Меню

Html не работает details

Эле­мен­ты details и summary

Вам часто приходилось использовать JavaScript для создания виджета, показывающего и скрывающего какое-то содержимое? Возможно, для этого вы даже скачивали целую JavaScript-библиотеку? Что ж, можете радоваться: HTML5 позволяет создавать подобное всего лишь парой строчек кода, без применения JavaScript. Зависит от браузера, конечно, но мы вернёмся к этому позже. Представляем вам элемент .

Вот что о нём написано в спецификации:

Элемент представляет собой раскрывающийся виджет, показывающий пользователю дополнительную информацию или элементы управления.

Мы можем использовать для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно разместить любое содержимое.

Поддержка браузерами Скопировать ссылку

Прежде чем мы продолжим, вам нужно учесть, что сейчас только Chrome поддерживает элемент . Скоро к нему присоединится и Opera, но немного костылей нам все-таки понадобится. Что ж, запускайте Chrome, и давайте смотреть.

Использование Скопировать ссылку

Имеются два элемента: и необязательный . Элемент — это обёртка для содержимого, которое мы хотим показать и скрыть, а содержит описание и заголовок этой группы. Формально нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript!

Атрибут open Скопировать ссылку

В вышеприведенном примере содержимое скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут open для , пример на jsbin:

Атрибута closed не существует. Поэтому, опуская open , вы по умолчанию подразумеваете closed .

Элемент Скопировать ссылку

Мы бегло взглянули на в действии, теперь остановимся на нём подробнее. Внутри могут использоваться строчные элементы, такие как или . Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования для элемента формы. По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

Теоретически, нажатие на должно раскрывать содержимое элемента . Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с , который переводит фокус на соответствующий — даже если он скрыт с помощью .

Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров, читающих эту статью, есть какие-то идеи? 🙂

Вложенность Скопировать ссылку

Вы можете помещать друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

Примеры использования Скопировать ссылку

Так в каких же случаях вы можете использовать ? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому замечательно подходит.

Также не забывайте о навигации по странице. Это может быть закрепленный блок, передвигающаяся одновременно с прокруткой. Возможно, что-то вроде этого?

Вы можете использовать для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этом примере из спецификации:

Пример использования из спецификации.

На самом деле, даже глядя сейчас на админку WordPress, я вижу множество возможностей использования . Если у вас есть ещё какие-то идеи и предложения — расскажите о них в комментариях.

Оформление Скопировать ссылку

Как же нам оформить эту штуку? Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдоэлемент ::-webkit-details-marker . Небольшой пример:

Мы также можем позиционировать этот элемент по отношению к родителю. Здесь, например, он прижат к правому краю. В общем-то, и все.

А как же заменить раскрывающий элемент своей иконкой? Используя выборку по атрибуту, вы можете определить, когда раскрыт, а когда закрыт, и применить соответствующее фоновое изображение. Мы делаем примерно то же самое в этом примере, за исключением того, что вместо фонового изображения мы используем псевдоэлемент ::after :

В этом примере символы + и — используются в качестве раскрывающей ссылки. В зависимости от дизайна вы можете использовать ::before вместо ::after , но, в любом случае, оба псевдоэлемента позволяют использование изображения.

Читайте также:  Чери амулет не работает стоп сигнал

Выборка по атрибуту details[open] скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали доработанный пример, показанный на этом скриншоте:

Оформленный в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания , но пока это невозможно.

Доступность Скопировать ссылку

К сожалению, на момент написания статьи отсутствует возможность управления с помощью клавиатуры. Стив Фолкнер пишет:

Проблема в том, что на данный момент отсутствует поддержки клавиатуры и нет никакой информации для обеспечения доступности.

Попробуйте сами. Если вы раскроете элемент с помощью мыши, тогда вы сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать с клавиатуры. Что ж, неидеально, но я уверен, что разработчики Chrome скоро с этим разберутся. Правда, ребята?

Обратная совместимость Скопировать ссылку

Прежде чем кто-то начнет восклицать, что это не работает в IE6, хочу сказать: мы знаем. Тем не менее, благодаря некоторым умным людям, мы можем обеспечить изящную обратную совместимость. В этой очень полезной коллекции всевозможных кроссбраузерных костылей я нашел два решения, оба они требуют jQuery:

Многие из вас захотят использовать Modernizr для определения возможностей браузера, но на данный момент в Modernizr отсутствует проверка поддержки . Матиас, автор приведенного выше решения для обратной совместимости, предлагает использовать этот Modernizr-сниппет.

Зачем вообще это использовать? Скопировать ссылку

Конечно, дарёному коню в зубы не смотрят, но все-таки — почему этот виджет существует в HTML5? Что ж, как и в случае с другими возможностями HTML5, он просто делает нашу жизнь легче. Реализация таких элементов, как календарь, слайдер, прогресс-бар, а теперь ещё и «аккордеон», становится гораздо проще и не требует использования JavaScript. Кто знает, что будет следующим? Нативные табы? Было бы здорово 🙂

В заключение Скопировать ссылку

В этой статье мы продемонстрировали, как использовать элементы и . Элемент при помощи создаёт естественный для браузера интерактивный раскрывающийся виджет.

На текущий момент работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится. Пока что мы можем использовать в CSS только ::-webkit-details-marker , но есть и множество других CSS-техник. Если у вас есть какой-либо опыт или идеи для использования элемента , расскажите об этом в комментариях.

Источник

Html не работает details

HTML-элемент используется для раскрытия скрытой (дополнительной) информации.

Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента является , содержимое элемента используется в качестве метки для виджета раскрытия.

Content categories Flow content, sectioning root, interactive content, palpable content.
Permitted content One element followed by flow content.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles None
DOM interface HTMLDetailsElement (en-US)

Атрибуты

Элемент поддерживает только глобальные атрибуты.

open Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.

Пример

Result

Примечание: Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию.

Примеры стилизации

Следуя более новой спецификации, Firefox отображает элемент summary как display: list-item и маркер можно стилизовать так же, как и элементы списка.

Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент ::-webkit-details-marker , с помощью которого можно стилизовать маркер.

Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу summary , а для Chrome и Safari’s установить ::-webkit-details-marker . После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.

Читайте также:  Как настроить время starline e90

Источник

Знакомьтесь,

Я хочу рассказать о замечательном элементе и показать несколько примеров его использования, от простых до безумных.

Вам знаком паттерн верстки компонента, который может менять своё состояние с видимого на скрытый:

А теперь забудьте. Существует элемент, который может делать это из коробки. Знакомьтесь —

HTML-элемент используется для раскрытия скрытой (дополнительной) информации.

Базовое применение

Прежде всего давайте посмотрим как этот элемент работает:

Обратите внимание, что пример работает без каких либо дополнительных стилей или JavaScript. Вся функциональность встроена в сам браузер.

По умолчанию видимый текст зависит от настроек языка вашей системы, но его можно изменить добавив в элемент :

Чтобы изменить состояние элемента в html вам достаточно добавить атрибут open

А чтобы управлять состоянием средствами JavaScript предусмотрен специальный API:

Пара слов о доступности

Элемент фокусируемый. То есть передвигаясь по странице с клавиатуры вы попадёте на этот элемент. А вот содержимое может попасть в фокус только если открыт, то есть фокус никогда не попадет на невидимые элементы внутри .

Как правило, программы чтения с экрана хорошо справляются со стандартным использованием и . Существуют некоторые вариации в объявлении в зависимости от программы и браузера. Подробнее.

Примеры использования

Далее я примерно повторю некоторые компоненты из документации bootstrap, но практически без JavaScript.

Изменяем маркер

Первое что вам может понадобится — изменить внешний вид маркера. Делается это очень просто:

Или вы можете скрыть стандартный маркер и реализовать собственный

Collapse Component

Здесь всё просто. Базовый функционал такой же. Нужно лишь немного изменить внешний вид:

Accordion Component

Повторим предыдущий пример, немного изменим внешний вид и получим аккордеон:

Но, как видите, один элемент не закрывается когда открывается другой. Чтобы добиться этого нам понадобится пара строк JavaScript. поддерживает событие toggle . Используя это, можно очень легко отслеживать открытие одного элемента и по этому событию закрывать остальные:

Popover Component

Эта реализация очень похожа на Collapse Component, с той разницей что содержимое имеет абсолютное позиционирование и перекрывает контент.

Dropdown Component

В своей основе это тот же Popover Component. Отличается лишь внешний вид.

Тот же пример, только с отдельной кнопкой

Но у Dropdown Component есть ещё одно важное отличие: по клику за его пределами он должен скрываться. Чтобы реализовать это снова понадобится написать пару строк JavaScript.

Modal Component

И напоследок пример модального окна.

Вообще не лучший выбор для реализации этого компонента. Существует куда более подходящий элемент — , но у него весьма плохая поддержка браузерами.

Ссылки

UPD.
Решил добавить ещё один пример использования — многоуровневая навигация. Ещё раз хочу обратить ваше внимание на то, что пример работает без какого либо JavaScript. И он намного более инклюзивный чем традиционная верстка на

Источник

details и summary

Вероятно вам приходилось использовать JavaScript или jQuery для создания блока, показывающего и скрывающего какое-то содержимое? HTML5 позволяет создавать подобное всего лишь парой строчек кода, без применения JavaScript. Представляем вам элемент . Над данный момент только Chrome поддерживает элемент . Возможно, скоро к нему присоединится Opera.

Вот что о нём написано в спецификации:
Элемент details представляет собой раскрывающийся виджет, показывающий пользователю дополнительную информацию или элементы управления.

Мы можем использовать для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно разместить любое содержимое.

Использование

Имеются два элемента: и необязательный . Элемент — это обёртка для содержимого, которое мы хотим показать и скрыть, а содержит описание и заголовок этой группы. Формально нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:

Читайте также:  Как починить дверь входную если она просела

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения.

Атрибут open

В вышеприведенном примере содержимое скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут open для , пример на jsbin:

Атрибута closed не существует. Поэтому, опуская open , вы по умолчанию подразумеваете closed .

Элемент

Мы бегло взглянули на в действии, теперь остановимся на нём подробнее.

Внутри могут использоваться строчные элементы, такие как или . Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования для элемента формы. По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

Теоретически, нажатие на должно раскрывать содержимое элемента . Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с , который переводит фокус на соответствующий — даже если он скрыт с помощью .

Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров есть какие-то идеи?

Вложенность

Вы можете помещать друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

Примеры использования

Так в каких же случаях вы можете использовать ? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому замечательно подходит.

Также не забывайте о навигации по странице. Это может быть закрепленный блок, передвигающаяся одновременно с прокруткой. Возможно, что-то вроде этого?

Вы можете использовать для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этом примере из спецификации:

из спецификации»/>

Пример использования из спецификации.

Оформление

Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдо-элемент ::-webkit-details-marker .

Мы также можем позиционировать этот элемент по отношению к родителю. Здесь, например, он прижат к правому краю.

А как же заменить раскрывающий элемент своим значком? Используя выборку по атрибуту, вы можете определить, когда раскрыт, а когда закрыт, и применить соответствующее фоновое изображение.

Мы делаем примерно то же самое в этом примере, за исключением того, что вместо фонового изображения мы используем псевдо-элемент :after :

В этом примере символы + и — используются в качестве раскрывающей ссылки. В зависимости от дизайна вы можете использовать :before вместо :after , но, в любом случае, оба псевдо-элемента позволяют использование изображения.

Выборка по атрибуту details[open] скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали доработанный пример, показанный на этом скриншоте:

в Chrome»/>

Оформленный в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания , но пока это невозможно.

Доступность

К сожалению, на момент написания статьи отсутствует возможность управления с помощью клавиатуры.

Если вы раскроете элемент с помощью мыши, тогда вы сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать с клавиатуры.

Обратная совместимость

Зачем вообще это использовать?

Многие из вас захотят использовать Modernizr для определения возможностей браузера, но на данный момент в Modernizr отсутствует проверка поддержки . Матиас, автор приведенного выше решения для обратной совместимости, предлагает использовать этот Modernizr-сниппет.

В заключение

В этой статье мы продемонстрировали, как использовать элементы и . Элемент при помощи создаёт естественный для браузера интерактивный раскрывающийся виджет.

На текущий момент работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится. Пока что мы можем использовать в CSS только ::-webkit-details-marker , но есть и множество других CSS-техник.

Источник

Adblock
detector