Не используйте HTML5 секции при стилизации заголовков.

Автор статьи: Nicole Sullivan. Оригинал: http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/

Либо сложность вопроса стилизации заголовков обманчива, либо сама практика CSS кодирования представила его в таком виде для того, чтобы на него обратили внимание.

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

  1. DRY. «Do not Repeat Yourself» — не повторяйтесь. Мы должны определять стили заголовков в одном месте и никогда (за редкими исключениями) не переопределяйте их свойства в других местах. Это значительно облегчит процесс обслуживания вашего сайта.
  2. Предсказуемость. Определенный заголовок должен выглядеть одинаково, не зависимо от того, в какой части страницы он размещен. Таким образом, вы упростите процесс создания новых страниц и оформления контента.
  3. Используйте максимально простые селекторы с низким значением специфичности. Это повысит производительность и позволит избежать неконтролируемого роста сложности и запутанности кода.

Представленный новой HTML5 спецификацией секционный элемент не так прост, как кажется на первый взгляд. Он абсолютно нарушает привычный для нас метод применения заголовков. Кроме того, он кардинально меняет способ их обработки браузерами и программами для людей с ограниченными возможностями. Вот, что говориться в спецификации:

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

Спецификация идет дальше и предупреждает нас о том, что секции не предназначены для использования лишь с целью назначения стилей определенному фрагменту контента:

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

Люди, похоже, не придали значения последнему (очень важному) моменту, поэтому я затрону его снова. Секции, по сути своей, не предназначены для использования их с целью назначения CSS стилей (по крайней мере, только для этих целей). Но если я не могу использовать секционные элементы для придания своим заголовкам требуемого стилевого оформления, то зачем они вообще нужны? Они кардинально меняют способ определения важности отдельного заголовка относительно других заголовков на странице, используемый браузерами и средствами облегчения доступа к веб-ресурсам. Для того чтобы понять это, вам нужно знать, какие заблуждения, связанные с использованием элементов заголовков, и по сей день имеют место.

Заголовки HTML.

Вспомните школьные времена, когда вам приходилось составлять план какого-либо произведения, сочинения или изложения. Для этого вы использовали список, элементы которого имели различное значение их важности. Нечто подобное имеет место и здесь. На сайте каждый заголовок соответствует отдельному элементу такого плана документа и вы, выбрав определенный его пункт, можете с легкостью определить, на каком уровне вложенности он находится и куда нужно переместиться, чтобы попасть в необходимое место документа. К примеру, заголовок h2 находится на один уровень ниже, чем h1, а h6 на четыре уровня ниже заголовка h2. Схематически это можно представить примерно вот так:

ЭТО ЗАГОЛОВОК — h1
I. Большая римская цифра соответствует заголовкам второго уровня — h2
A. Большая латинская буква эквивалентна — h3
B. Это тоже h3
i. Маленькая римская цифра — это h4
ii. Еще один h4
II. Большие римские цифры – это H2
III. Большие римские цифры – это H2
IV. Большие римские цифры – это H2

Проблема в том, что современные сайты и веб-приложения не придерживаются в точности такой же модели. Особенно это касается сайтов, применяющих мэшап для формирования контента, используя при этом источники, которые они не контролируют (к примеру, если вы добавляете твиттер фид на свой блог). При этом вы не можете контролировать уровни заголовков, находящихся в сформированном из различных источников контенте. Поэтому в этих случаях большинство разработчиков просто размещают новый контент, что делает структуру документов не четкой.

Забегая немного на перед, я хотела бы сказать, что документы с размытой структурой могут быть вполне допустимы для современных сайтов, а используемая в примере идея схожести структуры сайта и школьных планов несколько преувеличена. Введением секционного элемента специалисты пытаются преодолеть разрыв между стандартным W3C представлением структуры документа и реальным способом создания сайтов разработчиками. Элемент секции кардинально изменяет принцип построения дерева заголовков таким образом, что какого бы уровня заголовки не использовались <h1>-<h6>, но если они находятся внутри секционного элемента, то их значение будет зависеть от степени их вложенности и, как следствие, от остального контента документа. При этом они должны соответствовать внутреннему содержанию секции.

Вот примерно в таком порядке используются заголовки в большинстве HTML страниц:

<h2>Я в интернете…</h2>
<h1>Мой Twitter Feed</h1>
<ul class="tweets">
<li>Сегодня посмотрел классную кинушку…</li>
<li>Да, это что-то…</li>
</ul>
<p><a href="more.html">Читать дальше…</a></p>

HTML5 секционные элементы и заголовки.

Теперь, если вы заключите необходимый фрагмент кода в рамки секции, то браузер будет интерпретировать внутренний заголовок <h1> на уровень ниже, чем предшествующий <h2> заголовок:

<h2>Я в интернете…</h2>
<section>
<h1>Мой Twitter Feed</h1>
<ul class="tweets">
<li>Сегодня посмотрел классную кинушку…</li>
<li>Да, это что-то…</li>
</ul>
</section>
<p><a href="more.html">Читать дальше…</a></p>

Кроме того, благодаря секционному элементу становится ясным, что список твиттов является частью Твиттер фида, а ссылка Читать дальше… — нет. Это делает контент более мобильным, что, конечно же, хорошо, даже если это и не имеет особого значения в конкретном случае. Но, тем не менее, в создавшейся ситуации возникает много вопросов, касающихся стилизации заголовков документа. На мой взгляд, вот этот фрагмент спецификации вводит людей в заблуждение:

«Обратите внимание на то, что при использовании секции, разработчик может применять элемент h1 везде, не беспокоясь о том, на каком уровне находится текущая секция – на первом, втором, третьем или каком-либо другом.»

Это наводит людей на мысли о том, что они должны использовать только h1 заголовки (что является вполне справедливой интерпретацией замечания, сделанного рабочей группой). Но, все же, большинство людей зашли слишком далеко в своих заблуждениях, по причине того, что не читали второе правило, где четко говорится о том, что секционные элементы не предназначены для использования только лишь для назначения CSS стилей. Различие тонкое, но существенное. То есть, секционные элементы помогают браузеру определить реальный уровень важности заголовка, и совсем не обязательно должны указывать на то, какие стили применять к этому заголовку. Привязывая необходимые стили к заголовкам, с учетом того как браузер интерпретирует их уровень, разработчики (пытаясь придерживаться HTML5 спецификации) в результате приходят к ситуации, когда их селекторы выглядят примерно вот так:

h1{font-size: 36px}
section h1{font-size: 28px}
section section h1{font-size: 22px}
section section section h1{font-size: 18px}
section section section section h1{font-size: 16px}
section section section section section h1{font-size: 14px}
section section section section section section h1{font-size: 13px}
section section section section section section section h1{font-size: 11px}
Благодаря использованию только секционных элементов section в селекторах, я максимально упростила этот пример, но если рассматривать реальные ситуации, где в селекторах участвуют и другие секционные элементы, такие как articles или asides, то код будет выглядеть вот так.

Насколько это отвечает нашим требованиям?

Что если в семантических целях вам необходимо добавить дополнительную секцию, содержащую небольшой фрагмент кода?

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

А что если согласно вашему дизайну заголовок будет иметь 14px размер шрифта только в том случае, если он вложен внутрь второй секции контента?

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

Что если в процессе мы создадим еще одно правило, которое дублирует значение свойства размера шрифта 14px?

section.special section h1 {font-size:14px}

Это, определенно, не отвечает требованию DRY. Для определения 14px размера шрифта для заголовка, находящегося внутри «специальной» (.special) секции, наш код будет повторяться, кроме того, у нас начнется путаница, связанная со специфичностью селекторов. И если нам понадобится создать нормальный заголовок двухсекционной вложенности (22px) в пределах «специальной» секции, то мы уже этого сделать не сможем. Кроме того, мы не сможем повторно использовать новое правило где-либо в другом месте. Продолжая в том же духе при работе над проектом, через определенное время вы обнаружите, что ваш код насчитывает сотни, а то и тысячи деклараций по стилизации заголовков. И это уж никак не отвечает нашим требованиям.

Более глубоко тема неконтролируемого усложнения кода рассматривается в этой статье.

Как же применять стили к заголовкам в эре HTML5?

Ответ на этот вопрос находится там же — в спецификации, сразу за тем местом, где мы узнали, о использовании только h1 элементов. Мы не должны использовать секционные элементы с целью назначения стилей. Мы должны позволить им выполнять задачу, для которой они были созданы – формирование внутренней архитектуры документа, а вопросы стилизации решать другими методами, которые вполне удовлетворяют нашим требованиям. То есть применять для этих целей обычные универсальные имена классов, которые мы можем повторно использовать для форматирования заголовков любой степени вложенности в структуру документа.

Я рекомендую абстрагировать все широко используемые на сайте заголовки в классы, так как это придает им свойство портативности, предсказуемости и «не повторяемости» — DRY. (*сухости :)) С их помощью вы можете применить любые стили к элементам заголовкам. Джереми Кейт рекомендует вот такой подход:

.Alpha {}
.Beta {}
.Gamma {}
.Delta {}
.Epsilon {}
.Zeta {}

или вот такой:

.tera {}
.giga {}
.mega {}
.kilo {}
.hecto {}
.deca {}
.deci {}
.centi {}
.milli {}
.micro {}
.nano {}
.pico {}

Я придерживаюсь более простого варианта:

.h1{}
.h2{}
.h3{}
.h4{}
.h5{}
.h6{}

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

<h1 class="giga">Я в интернете…</h1>
<section>
<h1 class="kilo">Мой Twitter Feed</h1>
<ul class="tweets">
<li>Сегодня посмотрел классную кинушку…</li>
<li>Да, это что-то…</li>
</ul>
</section>
<p><a href="more.html">Читать дальше…</a></p>

Теперь ваш Твиттер фид может находиться в любом месте страницы – в сайдбаре, статье, футере или на главной странице, в любом случае он будет выглядеть одинаково — так, как и предусмотрено дизайнерским решением. И независимо от того, придерживаетесь ли вы HTML5 стандарта или нет, у вас нет необходимости в дублировании кода или создании сложных для понимания, нечитабельных селекторов. Поэтому, на мой взгляд, разделение стилизации заголовков от их размещения в структуре документа имеет смысл.

Обновление:

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

<h1 class="giga">Я в интернете…</h1>
<section class="tweetfeed">
<h1>Мой Twitter Feed</h1>
<ul class="tweets">
<li>Сегодня посмотрел классную кинушку…</li>
<li>Да, это что-то…</li>
</ul>
</section>
<p><a href="more.html">Читать дальше…</a></p>

Но этот способ определения стилей является скорее исключением, чем правилом.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *