Всё в деталях

Доброго времени суток!

Введение

К своему стыду, я совсем недавно познакомился с элементом details, который по сути является виджетом для представления информации о чём-либо. По информации, которая есть у меня, его поддержка достаточна скудна, так как поддерживается он на данный момент лишь в Google Chrome, начиная с 12.0, а также в Android Browser, начиная с версии 4.0. Что же, давайте посмотрим, что это за зверь такой.

Простейшее представление

Простейшее представление информации с помощью данного элемента будет выглядеть так:

<details>
     <summary>Что такое HTML5?</summary>
</details>

А в браузере это выглядит таким образом:

Двигаемся дальше

Раз у нас есть вопрос, то давайте на него дадим ответ и прикрепим логотип HTML5. Нет ничего проще, ведь делается это также, как и при обычной вёрстке — т.е. мы создаём div, а в него вносим заголовки и параграфы. Вот так:

<details>
     <summary>Что такое HTML5?</summary>
	 <img src="./html5.jpg" alt="HTML5" />
	 <div>
	     <h3>HTML5 - это...</h3>
		 <p>Язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году) и находится в стадии разработки по состоянию на ноябрь 2011 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т.д.). HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).</p>
	 </div>
</details>

Открываем наш пример, кликаем по стрелочке и… Вуаля!

И всё-таки

Но уж как-то это всё не профессионально. Мы не применили стили. А для красивого отображения сделать это достаточно легко. Давайте попробуем.

body {
     font-family: sans-serif, arial;
}

details {
     overflow: hidden;
     background: #e3e3e3;
     margin-bottom: 10px;
     display: block;
}

details summary {
     cursor: pointer;
     padding: 10px;
}

details div {
     float: left;
     width: 65%;
}

details div h3 {
     margin-top: 0px;
}

details img {
     float: left;
     width: 200px;
     padding: 0px 30px 10px 10px;
}

Ничего необычного. Задаём отступы, немного красим задний фон, меняем курсор — всё, как обычно. Хотя, если честно, с курсором приходилось работать очень редко.
Хорошо, пора посмотреть на результат. Вот он:

Напоследок

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

details summary::-webkit-details-marker {
     color: red;
     font-size: 20px;
}

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

Заключение

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

До скорых встреч!