details в HTML

в HTML

Всем привет и сегодня будет рассмотрен тег details который появился в спецификации HTML5. С помощью данного тега мы можем сворачивать и разворачивать для показа информацию по требованию пользователя.

Это выглядит примерно так:

Здесь у нас появился заголовок ‘Подробнее’ кликая по которому мы можем показывать и скрывать наш текст в теге details.

Если заголовок тега details нас не устаивает мы можем определить свой собственный через тег summary.

В качестве заголовка тега details у нас будет выступать содержимое тега summary.

Внутри details мы можем помещать все что угодно от текста до целых блоков.

Изначально контент в details у нас скрыт. Если мы хотим чтобы он сразу отображался, нам достаточно добавить атрибут open.

После использования атрибута open содержимое тега details будет изначально показано пользователю.

Раньше для реализации данного эффекта необходимо было прибегать к использованию javascript. Теперь же достаточно использовать данный тег.

Данный прием прежде всего необходим для удобства пользователей. Если пользователя заинтересует заголовок он по нему кликнет и для него развернется контент по интересующей его теме. Если контент под заголовком не интересует пользователя ему достаточно его свернуть или не открывать. Тем самым повышается вероятность того что пользователь быстрее найдет интересующий его вопрос.

Этот прием часто применяется в FAQ (Часто задаваемые вопросы).

На этом данная статья подошла к концу. Не забывайте оставлять комментарии.

А я с вами прощаюсь желаю успехов и удачи! Пока!

Элементы details и summary в HTML и CSS

Здесь сразу нужно подчеркнуть, что только работает и корректно выводит на обновленном браузере. Если говорить про элемент details, то он позволит вам показывать скрытую или дополнительную информацию, как раскрывающейся функция. Также его можно использовать в создание элементов, которые изначально разворачивались и сворачиваются, что ниже вам предоставлен один их материалов созданный на этих свойствах.

Так, когда вы могли бы использовать details. Часто задаваемые вопросы часто возникают. Мы часто используем аккордеоны для часто задаваемых вопросов, так что они отличный кандидат details. Также рассмотрите оглавление. Это может быть фиксированная область, которая прокручивается с содержимым.

Так будет смотрится при открытие окна:

Приступаем к установке:

С точки зрения бизнеса и маркетинга компании, которые, как правило, имеют тенденцию получать на 55 процентов больше трафика, чем предприятия, которые этого не делают. Фактически, «активные» блоги могут помочь генерировать на 67% больше потенциальных клиентов.

Шаблоны для сайта ВЫБРАТЬ

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

Дизайн для сайта ВЫБРАТЬ

Первичная установка в основном включает компании, приближающиеся и влиятельным людям, чтобы «создавать» отношения, где взаимодействуют.

div <
width:395px;
margin:0 auto;
top:63%;
transform:translateY(-50%);
color:#403d3d;
border:1px solid silver>

summary <
padding: 19.7px;
width: 395px;
font-size: 18px;
z-index: 1;
border-bottom: 1px solid #807676;
cursor: pointer;
>

p <
width:435px;
margin:-1px -18px 0;
padding:28px;
font-size:14px;
line-height:1.5;
border:1px solid silver;
text-align:justify;
z-index:2;
box-shadow:0 0 28px -11px #171616;
>

details[open] p <
animation:det .3s>

@keyframes det <
0% <
opacity:0>

button <
float:right;
background:#096190;
border:0;
padding:11px;
margin:-6px -6px 0 0;
color:#f5f0f0;
border-radius:4px;
cursor:pointer;
>

Здесь кратко узнали, как можно задействовать details и summary элементы под функционал. Где details будет являться новым элементом для создания интерактивного виджета раскрытия изначально в браузере. По сути у него один конкретный трюк CSS, который мы можем задействовать, но также есть много других CSS эффектов для его стилизации.

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

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

Так будет выглядеть:

Второе описание №2

Третье краткое описание №3

Четвертое описание №4

details <
border: 1px solid #E1E1E1;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
color: #363636;
margin: 0 0 .4em;
padding: 1%;
>

details[open] <
background: #E1E1E1;
>

summary <
background: -webkit-linear-gradient(top, #FAFAFA 50%, #E1E1E1 50%);
border-radius: 5px;
cursor: pointer;
font-size: .8em;
font-weight: bold;
margin: -1%;
padding: 8px 0;
position: relative;
width: 102%;
>

summary:hover, details[open] summary <
background: #E1E1E1;
>

summary::-webkit-details-marker <
display: none>

summary:before <
border-radius: 5px;
content: ‘+’;
color: #363636;
display: block;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -2px 10px 0 10px;
padding: 0;
text-align: center;
width: 20px;
>

details[open] summary:before <
content: ‘-‘;
margin-top: -4px;
>

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

HTML тег details

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

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

Содержимое элемента должно быть скрыто до тех пор, пока не будет установлен атрибут open.

Для определения видимого заголовка доп.информации в теге используется элемент . На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.

Разница между HTML 4.01 и HTML5

Общие атрибуты

HTML пример

CSS стили по умолчанию

Большинство браузеров будут отображать тег со следующими стилями

Применение элемента details в HTML5

Тег details в HTML5 абсолютно новый тег. В настоящее время этот тег поддерживается только последними версиями браузера Google Chrome. Но думаю что со временем все браузеры начнут его поддерживать. Этот элемент дает возможность скрыть и показать информацию по требованию посетителя сайта. У этого элемента есть свой атрибут open , который дает возможность изменить значение тега details (по умолчанию содержимое тега). Синтаксис написания очень простой:

Давайте попробуем применить этот тег на практике:

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

Тег в HTML5

Этот элемент помогает группировать различные элементы друг с другом. Мне очень понравился этот элемент. Я думаю вы тоже будете его использовать на ваших сайтов. Например, можно красиво оформить рамку с изображением или видео файлом с подписью. Причем сама подпись должна быть оформлена с помощью тега figcaption. Рассмотрим небольшой пример, который поможет вам во всём разобраться:

В итоге должно получиться следующее:

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

Все права на сайт принадлежат Александру Побединскому.

Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

HTML5 и

Тег details — это новый элемент HTML применяется для свёртывания и развёртывания своего содержания. Другими словами элемент для интерактивного раскрытия виджета. Тег details встроен в браузер и использует элемент . На мой взгляд отличная альтернатива спойлера.

details по умолчанию

Создать спойлер details легко, нужно между тегами вставить текст. Браузер выводит треугольник с словом Подробнее .

Вид details по умолчанию

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

Вид раскрытого details

Изменить стиль details

Изменить заголовок в теге details (Подробнее) на своё можно элементом summary.

По умолчанию в браузере границу с цветом #5B9DD9 определяет стандартный стиль WebKit .

Если граница тега не подходит под цветовую схему сайта или оформление, можно изменить :focus таким методом:

Возможно потребуется добавить:

Чтобы изменить значок тега (треугольник) на свой, для начала нужно спрятать стандартный значок WebKit. Далее к элементу summary добавить селектор :before . Значение селектора :before будет content: в кавычках которого указывается значок для тега . В примере ниже значок плюс когда спойлер закрыт, значок минус когда спойлер открыт. Больше значков можно найти на странице « Символы HTML ».

Тег предоставляет два варианта: показать скрыть и скрыть показать текст , какой вариант выбрать зависит от ваших потребностей.

в примерах ниже заголовок спойлера пишется внутри элемента summary!

Показать скрыть текст

После открытия спойлера к элементу details браузер добавляет атрибут open .

Стиль для содержания открытого спойлера определяется к тегу details с атрибутом open .

Скрыть показать текст

Если к элементу details в HTML самому добавить атрибут open , содержание будет показано, и только после нажатия на спойлер содержание скроется.

Для управления с клавиатуры для обоих случаев к элементу details в HTML нужно добавить атрибут tabindex .

Поддержка браузерами

Тег HTML5 слабенько поддерживается браузерами, на момент написания этого урока элемент не поддерживается браузерами IE. Обозреватель Firefox станет поддерживать HTML5 в близлежащее время.

В интернете много скриптов поллифил которые должны создать поддержку HTML5 для браузеров. Но, они меняют синтаксис поэтому работают не корректно !

Сообщить пользователю о том что, его браузер не поддерживает HTML5

Заключение

В этой статье Я продемонстрировал, как использовать элементы HTML5 и . Элементы очень полезны и решают много сложностей в оформлении веб-сайта или форума. Тег details идеально подходит для создания спойлера, аккордеона, табов. В настоящее время, это всё что нужно знать о элементе details.

Если у Вас есть любые свои идеи как использовать details дайте мне знать в комментариях.

Плавные спойлеры (HTML5 & CSS3)

Существует несколько основных вариантов создания спойлеров, показывающих или скрывающих контент по требованию пользователя: посредством JavaScript, через псевдокласс с таргетированием идентификаторов и при помощи интерфейсных флажков. Благодаря специальному HTML5-элементу к этому списку добавился еще один, наиболее простой и правильный с точки зрения семантики способ реализовать спойлеры.

Принцип работы тега «details»

Элемент представляет собой одно из многочисленных семантических нововведений HTML5 и предназначается для хранения контента, отображаемого или скрываемого по желанию пользователя. В отличие от традиционных методов разработки спойлера через и псевдокласса :checked или посредством id элемента и псевдокласса :target , для корректной работы элемента не требуется добавление стороннего HTML и CSS кода, что делает его использование простым и удобным.

Содержимое тега становится видимым, когда у него появляется атрибут open , который автоматически добавляется или удаляется браузером при клике по — заголовку спойлера. В свою очередь, заголовок должен стоять первым среди дочерних элементов, но его наличие не является обязательным. В случае отсутствия заголовка браузер установит стандартное название «подробности» из Shadow DOM, однако такой тег не пройдет валидацию. Это аналогично ситуации, когда не имеет

Элемент может содержать после своего заголовка блочный или строчный контент, принадлежащий к категории основной поточной информации (flow content). Содержимое, указанное после , как могло бы показаться, не будет отображаться и скрываться средствами CSS, а именно — переключением значения display . Браузер переносит его в необходимое место за счёт манипуляций с Shadow DOM, что делает возможным применить к контенту эффекты перехода ( transition ). Иными словами, в примере выше при отсутствии у спойлера атрибута open , для элемента

правило display: none не применяется.

Не смотря на кажущуюся практичность и тривиальность, элемент не лишён недостатков: отсутствие полной кроссбраузерной поддержки (речь идет об ограничениях в Internet Explorer, Edge и игнорирование Opera Mini) и непрезентабельное стандартное со (простой маркер перед заголовком , отсутствие анимации), поэтому при создании спойлеров необходимо учесть эти аспекты.

Как создать спойлеры

Прежде чем приступить к разметке кода и написанию CSS, важно обозначить три принципа, которым должно соответствовать красивое оформление спойлера:

1. Спойлеру необходимо выглядеть визуально интерактивным. Пользователь должен без особого труда понимать, что элемент является кликабельным;
2. Для визуально привлекательного плавного отображения и скрытия контента к спойлеру следует добавить эффекты перехода;
3. Открытый спойлер должен каким бы то ни было образом выделяться, чтобы сфокусировать внимание читателя на себе среди прочих неактивных, если на странице расположены несколько спойлеров подряд.

HTML-разметка

Предположим, необходимо создать такую популярную секцию для сайта, как небольшой раздел FAQ, где ответ появлялся бы после клика на сам вопрос. Для этого потребуется следующий незамысловатый HTML:

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

Изменение стандартного маркера

Основную сложность при добавлении CSS может вызвать изменение стиля для маркера, стоящего перед заголовком спойлера. В браузерах на движке WebKit для стилизации маркеров существует специальный псевдоэлемент ::-webkit-details-marker , в то время как Firefox отображает этот элемент как часть списка, то есть с правилом display: list-item , что, соответственно, позволяет удалить маркер простой сменой свойства display или же через псевдоэлемент ::-moz-list-bullet :

Использование display: block в данном случае приведет к нежелательному последствию: кликабельная область содержимого заголовка растянется на 100% ширины родительского элемента, а в идеале она должна соответствовать ширине собственного контента, поэтому в зависимости от необходимости рекомендуется прибегнуть к значениям display , например, inline , inline-block inline-flex , table или оставить заголовок как блочный и установить ширину содержимого как max-content или fit-content , но далеко не все браузеры поддерживают такие значения для width .

Добавление маркера и эффектов перехода

Когда стандартный маркер удалён, к спойлеру может быть добавлено собственное изображение через псеводоэлемент ::before . В готовом примере для этого используется SVG-иконка из коллекции Google Material Icons, которая выводится через background-image в base64, что позволяет избежать лишних подключений к внешним ресурсам.

Особую трудность при стилизации спойлеров представляют эффекты перехода, которые должны срабатывать как при открытии, так и при закрытии контента. Для их реализации следует использовать свойство transition , в основе которого будет лежать изменяющаяся минимальная и максимальная высота спойлера, т. е. самого элемента и прозрачность — для всего контента, стоящего после :

Решение проблем кроссбраузерности

Для обеспечения правильной работы спойлеров в Internet Explorer 10+ и Edge силами одного лишь CSS предлагается совместить и псевдокласс :focus таким образом, чтобы содержимое спойлера появлялось при появлении фокуса на заголовке. Чтобы применить указанный псевдокласс к заголовкам, в HTML-разметке они должны содержать упомянутый ранее атрибут tabindex . Кроме того, браузеры от Microsoft не знают тега и не добавляют к нему атрибут open при клике, поэтому часть CSS придется дублировать. Весь полученный код скрывается от прочих браузеров:

Этот фикс содержит небольшое функциональное ограничение: на странице нельзя будет открыть одновременно несколько спойлеров, т.к. фокус действует только на один элемент. Кроме того, в результате подобной реализации теряется плавный переход при открытии спойлера, но остается работать эффект прозрачности. При необходимости посредством CSS-хака миксин ie_fix() может быть добавлен и для старой Opera 12 (Presto) .

Пример CSS-спойлеров

В результате объединения всего SCSS и добавления соответствующей HTML-разметки получаются простые кроссбраузерные спойлеры без использования JS.

В заключение

Не смотря на преимущество с точки зрения семантики и практичности использования, тег не рекомендуется применять там, где требуется поддержка «древних» Internet Explorer и устаревших мобильных браузеров. В этом случае стоит прибегнуть к традиционным способам создания спойлеров на CSS, работающих практически везде, или использовать решения на JavaScript, в том числе HTML5-полифиллы. Остается надеется, что со временем старые браузеры окончательно уйдут в небытие и уступят место их обновленным версиям, и тогда новые семантические теги станут повсеместной практикой.

HTML тег

Элемент (от англ. «details» ‒ «детали») создаёт блок с дополнительной информацией, которую пользователь при желании может раскрыть и посмотреть. По умолчанию содержание элемента скрыто. Внутри данного элемента можно размещать любые HTML элементы.

По умолчанию содержимое элемента не отображается, для изменения статуса применяется атрибут open.

Для определения видимого заголовка дополнительной информации в теге используется элемент . На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

Тег details

В последнее время в число моих любимых тегов попал недавно интегрированный в Chrome (версия 12) элемент details . В сегодняшнем руководстве я покажу, как им пользоваться.

За что отвечает тег details ?

Этот тег позволят показывать и прятать контент с помощью одного клика мышки. Вы, наверно, уже знакомы с таким эффектом, но до сегодняшнего дня его можно было осуществить только с JavaScript. Представьте заголовок и расположенную рядом с ним стрелку, кликнув на стрелку, вы делаете видимым расположенный ниже контент. Кликнув еще раз, вы прячете его. Такую функцию можно часто встретить на страницах Чаво (FAQ).

C элементом details можно полностью отказаться от JavaScript. Точнее можно будет отказаться, так как поддержка браузерами данного элемента пока не сильно распространена.

Принцип работы тега details

Итак, давайте начнем изучение нового тега details . Создайте новый элемент details .

Затем воспользуемся тегом summary , чтобы описать контент расположенный внутри тега details .

Браузеры, в которых реализована поддержка тега details , скроют все содержимое тега details за исключением содержимого тега summary . Давайте добавим после тега summary какой-нибудь абзац.

Вышеприведенный пример можно просмотреть в Chrome 12 или выше.

Давайте сделаем что-то более практичное. Например, попытаемся показать различные статьи с помощью элемента details . Сначала создадим разметку для одной статьи.

Добавим немного стилей

Отметьте, что вся статья видна целиком, это реализовано при помощи атрибута open . То есть если вам нужно при загрузке страницы сразу открыть все содержимое тега details , пропишите внутри тега details атрибут open ( ). В данный момент это сделано для удобства, в дальнейшем мы оставим видным только содержимое тега summary.

Добавляем стрелку

Стрелку можно добавить с помощью псевдо класса -webkit-details-marker .

Если захотите использовать обычную иконку, то, использую приведенный выше псевдокласс, спрячьте стрелку, а затем либо применить фоновое изображение к элементу summary , либо воспользуйтесь псевдо элементами :after или :before .

Поддержка реализована – пока только Chrome 12+
Первый пример без атрибута open
Второй пример с атрибутом open

Заключение

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

HTML .am>

The HTML tag represents additional details that the user can view or hide on demand.

The element can be used in conjunction with the HTML tag to provide a heading that can be clicked on to expand/collapse the details as required.

The basic tag is written like this with the tag inserted between the opening and closing tags.

At the time of writing, the tag is in draft status as part of the W3C HTML 5.1 draft specification and it is included in the WHATWG HTML Living Standard. Therefore, the specifications of this element may change.

Example

The following example shows the element in action. You can modify the code (on the left) and click «Refresh» to see your changes take effect (on the right).

Attributes

The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.

Attributes Specific to the Element

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either open or open=»open» ).

• [Empty string]
• open

Global Attributes

The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.

Attribute	Description
accesskey	Specifies a shortcut key that can be used to access this element. [Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]
class	This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable	This attribute specifies whether the user can edit the content or not. true false
contextmenu	The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir	Specifies the direction of the text. Value Description ltr Specifies that the text should read left to right. rtl The text should read right to left. auto The text direction should be determined programatically using the contents of the element.
draggable	Specifies whether the user is allowed to drag this element or not. true false auto Value Description true This value specifies that the element is draggable. false A false value specifies that the element is not draggable. auto Uses the default behavior of the user agent/browser. This is the default value.
dropzone	The dropzone attribute specifies what should happen when the user «drops» an element (i.e. after dragging it) onto this element. Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. Value Description copy Results in a copy of the dragged data. Default value. move Results in the data being moved to the new location. link Results in a link to the original data. Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: « Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted. Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: « Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg» Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.
hidden	Indicates that this particular element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or h ). [Empty string] hidden
id	The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid	The itemid provides a global identifier for an «item». This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces. The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.
itemprop	This attribute provides one or more properties to one or more «items». Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. Each token must be one of the following: A valid URL that is an absolute URL, or If the item is a typed item: a «defined property name» allowed in this situation according to the specification that defines the relevant types for the item, or If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:). Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.
itemref	This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
itemscope	HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ). [Empty string] itemscope
itemtype	This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token. The itemtype attribute must only be present in elements that include the itemscope attribute.
lang	Sets the language code to be used. [Must be a valid RFC 3066 language code, or an empty string.]
spellcheck	Specifies whether the element should have its spelling checked. Value Description [Empty string] The element should have its spelling checked. true The element should have its spelling checked. false The element should not have its spelling checked. If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.
style	Specifies inline styles for this element. This allows you to define the styles within the page, and within this tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex	Helps determine the tabbing order for this element (for when the user uses the «tab» key on their keyboard to «tab» through the elements on the page in order to select an element). [Any valid integer. For example, 0, 1, 2, 3, . etc]
title	Specifies a title to associate with this particular element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»). [Any text to be displayed as a «tool tip».]
translate	Determines whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. The translate attribute is an enumerated attribute and may contain the following possible values: If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element. Event Handler Content Attributes The tag also accepts the event handler content attributes listed below. An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler. Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick=»» , you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere. Here are the event handler content attributes that can be used with the element. Attribute Description onabort Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded. onblur User has left the focus of the element. oncancel cancel event handler. oncanplay Invoked when the browser/user agent can start playing media, but hasn’t yet, due to buffering. In other words, if playback were to begin now, it wouldn’t play right to the end (due to the current playback rate) — it would need to pause during playback in order to load the rest of the media. oncanplaythrough The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. onchange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere). onclick Invoked when the user clicked on the object. onclose close event handler. oncontextmenu Invoked when a context menu has been triggered. oncuechange cuechange event handler. ondblclick Invoked when the user clicked twice on the object. ondrag Invoked when an element is being dragged. ondragend Invoked when an element has stopped being dragged. ondragenter Invoked when an element has been dragged to a drop target. ondragexit dragexit event handler. ondragleave Invoked when an element leaves a valid drop target. ondragover Invoked when an element is being dragged over a valid drop target. ondragstart Invoked when a drag operation has started. ondrop Invoked when an element is being dropped. ondurationchange Invoked when the length of the media is changed (i.e. the duration attribute has just been updated). onemptied Invoked when a media resource element suddenly becomes empty (for example, due to a network error). onended Invoked when the media has reached the end. onerror Invoked when an error occurs while the element is being loaded. Also handler for script error notifications. onfocus Invoked when the focus is on the element. oninput input event handler. oninvalid invalid event handler. onkeydown Invoked when a key was pressed over an element. onkeypress Invoked when a key was pressed over an element then released. onkeyup Invoked when a key was released over an element. onload The element has loaded. onloadeddata Invoked when the browser/user agent can render the media data at the current playback position for the first time. onloadedmetadata Invoked when the browser/user agent has just determined the duration and dimensions of the media resource. onloadstart Invoked when the browser/user agent has started loading the media resource. onmousedown The cursor moved over the object and mouse/pointing device was pressed down. onmousemove The cursor moved while hovering over an object. onmouseout The cursor moved off the object onmouseover The cursor moved over the object (i.e. user hovers the mouse over the object). onmouseup The mouse/pointing device was released after being pressed down. onmousewheel Invoked when the mouse wheel is being rotated. onpause Invoked when the media resource has been paused. onplay Invoked when the media resource starts playback. onplaying Playback has begun. onprogress The browser/user agent is fetching media data the. onratechange Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated). onreset reset event handler. onresize resize event handler. onscroll scroll event handler. Invoked when the element’s scrollbar is being scrolled. onseeked Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true) onseeking Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event. onselect Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field. onshow show event handler. onstalled Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming). onsubmit User submitted a form. onsuspend The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download). ontimeupdate Invoked when the media’s current playback position changed. onvolumechange Invoked when either the volume attribute or the muted attribute has changed. onwaiting The next frame of the media is not yet available (but the browser/user agent expects it to become available). More Information About the Element Content Categories Flow content. Sectioning root content. Interactive content. Palpable content. Can be used Where flow content is expected. Content model One element followed by flow content. End Tag Required? Yes. Any time you use the element, it must have both a start tag and an end tag. Right: Wrong: DOM Interface HTMLDetailsElement Specifications for the Tag Here is the element defined in the various specifications: W3C (HTML5). Note that this link goes to a draft specification page for HTML 5.1. This is because, at the time of writing, the element is still in draft status. WHATWG (HTML Living Standard) HTML tag does not work in IE/Edge I am trying to add additional toggleable section that user can show and hide. supported on major browsers (Opera, Chrome, Edge, IE11, Firefox, Safari on Mac) no javascript And was thinking of using the tag, however the code does not work on the Edge / IE browsers. Can I anyhow «make» it work, or is there anything else I can use for that task? Hacks are OK, as long as no javascript is present. Илон Маск рекомендует:  Faq создание отчета в ms word Понравилась статья? Поделиться с друзьями: Вам также может быть интересно Обучение программированию Эффект ледяной надписи Ледяной текст в Фотошопе Конечный результат: Ресурсы урока: 1. Создание фона Шаг 1 Создайте Обучение программированию Язык xml dom совместимые анализаторы XML-анализаторы в java XML как набор байт в памяти, запись в базе или текстовый Обучение программированию Языки описания пользовательских интерфейсов Языки описания пользовательских интерфейсов Язык описания интерфейсов Язык описания интерфейсов (IDL), используемый OMG определяет Обучение программированию Эффект линзы (watcom c) Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита, Обучение программированию Язык xml xml в microsoft internet explorer 5 0 Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language, Обучение программированию Языки программирования Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя Обучение программированию Эффект пламени По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый Обучение программированию Язык xml введение Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть Обучение программированию Якоря HTML Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело Обучение программированию Эффект разбитого текста Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося Обучение программированию Язык xml использование java xml обработчиков Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX, Обучение программированию Яндекс — крупнейшая поисковая система русскоязычного Интернета! Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта, Обучение программированию Эффект скручивания Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг Обучение программированию Язык xml описание технологии Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML Обучение программированию Ячейка заголовка 17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти Обучение программированию Эффективное использование gnu make Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание Обучение программированию Язык xml практическое введение Описание данных с помощью XML Если вы программируете на Java, за последние пару лет Обучение программированию Эффективный копирайтинг, как писать копирайтинг Как написать эффективный продающий текст. Часть первая. Подготовка Грамотно написанный продающий текст позволяет превращать Обучение программированию Язык xml просмотр xml документов Чем открыть XML Web — это место, где миллионы людей ежедневно связываются друг с Обучение программированию Эффективный способ применения интерфейсов в mdi приложениях Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать Обучение программированию Язык xml стилевые таблицы xsl Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в Обучение программированию Эффекты с изображениями Как сделать — визуальные эффекты изображениям Узнайте, как добавить визуальные эффекты к изображениям. Фильтры Обучение программированию Язык xml схемы данных Понимание XML Узнайте, как Расширяемый язык разметки (Extensible Markup Language — XML) облегчает универсальный Обучение программированию Юмор пиво для программиста ХАЙФХАК: ПРОГРАММИСТ ВЗЛОМАЛ СИСТЕМУ, ЧТОБЫ ПОПИТЬ ПИВО БЕСПЛАТНО / пиво :: geek новости ::