Браузерная совместимость семантических элементов
143Веб-программирование --- HTML5 --- Браузерная совместимость семантических элементов
В предыдущей статье было показано использование новых семантических элементов HTML5. Полученный результат выглядит неплохо. Но результаты не будут такими воодушевляющими, если просмотреть нашу страницу в старых браузерах. Однако прежде чем заняться этим вопросом, стоит выяснить, какие браузеры предоставляют поддержку простых чисто семантических элементов. Эта информация предоставлена в таблице:
| Браузер | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
| Минимальная версия | 9 | 4 | 8 | 5 | 11.1 | 4 | 2.1 |
Как видим, ситуация в этой области не очень утешительная. К счастью, эта проблема из разряда легко решаемых. Ведь семантические элементы по сути ничего не делают. Все, что нужно браузеру делать для их поддержки — это обрабатывать их как обычный элемент <div>. Но для этого нам нужно решить две проблемы.
Первым делом нам нужно преодолеть привычку браузера рассматривать все неопознанные им элементы, как встроенные. Большинство семантических элементов HTML5 (за исключением элемента <time>) являются блочными элементами. Это означает, что их нужно отображать в отдельной строке, с небольшим расстоянием между ними и предшествующими и следующими элементами.
Браузеры, которые не распознают элементы HTML5, не знают, что некоторые из этих элементов следует отображать как блочные, вследствие чего они, скорее всего, сбросят эти элементы в одну беспорядочную кучу. Чтобы решить эту проблему, нужно просто добавить одно новое правило в таблицу стилей. Далее приведен код для суперправила, которое одним махом применяет форматирование блочного отображения к девяти требующим его элементам HTML5:
article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {
display: block;
}Это правило таблицы стилей никаким образом не будет влиять на браузеры, которые уже понимают HTML5, т.к. свойство display уже имеет значение block. Также оно не будет влиять ни на какие правила, которые уже используются для форматирования этих элементов, т.к. они будут продолжать применяться в дополнение к этому суперправилу.
Этот метод решает проблему распознавания семантических элементов в большинстве браузеров, но в это большинство не входят Internet Explorer 8 и более старые его версии. Здесь нужно решить вторую проблему, заключающуюся в том, что эти версии IE отказываются применять форматирование таблицы стилей к элементам, которые они не распознают.
К счастью, эта проблема решается с помощью небольшого трюка: браузер IE можно обмануть и заставить его распознавать чужие ему элементы, зарегистрировав их с помощью команды JavaScript. Например, в следующем JavaScript-коде браузер IE наделяется способностью понимать и применять стиль к элементу <header>:
document.createElement('header');Но вместо того чтобы самому разрабатывать такой код для всех элементов, можно воспользоваться уже готовым сценарием, ознакомиться с которым можно на странице HTML5 enabling script. Чтобы использовать этот сценарий, просто вставьте ссылку на него в блок <head> разметки:
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>Этот код загружает сценарий с веб-сервера html5shim.googlecode.com и исполняет его, прежде чем браузер начинает обрабатывать остальную разметку страницы. Этот простой и краткий сценарий применит рассмотренный выше JavaScript-код для элемента <header>, с соответствующими изменениями, ко всем новым элементам HTML5, что позволяет форматировать их с помощью правил таблиц стилей.
Добавьте в таблицу стилей приведенное ранее суперправило, и новые элементы будут отображаться должным образом, как блочные элементы. Вам только остается использовать новые элементы и добавить собственные правила таблицы стилей для их форматирования.
Кстати, сценарий html5.js исполняется, только если он определит, что используется старая версия Internet Explorer. Но если вы хотите вообще избежать накладных расходов, связанных с ненужным вызовом сценария JavaScript в современных браузерах, можно в ссылку на него добавить соответствующее условие, как показано в следующем коде:
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Таким образом, не нуждающиеся в нем браузеры (IE 9 и более поздние версии) будут игнорировать эту команду, что сэкономит несколько миллисекунд на исполнении кода разметки страницы.
