Предположим, у меня есть запись в блоге под названием «Бутерброд с сыром». До HTML5 мне нужно было бы знать контекст, в котором расположена запись, чтобы определить, какой уровень заголовков использовать для заголовка записи. Если запись находится на главной странице, то она появляется вслед за элементом h1, который содержит название моего блога:
Мой клёвый блог
Моя кошка съела бутерброд с сыром.
Но если я публикую запись в блоге на отдельной странице, то я хочу, чтобы заголовок записи был заголовком первого уровня:
Бутерброд с сыром
Моя кошка съела бутерброд с сыром.
С HTML5 мне не нужно волноваться о том, какой уровень заголовков использовать. Мне нужно просто использовать содержимое-разделитель: в данном случае – элемент article:
Бутерброд с сыром
Моя кошка съела бутерброд с сыром.
Теперь это содержимое по-настоящему переносимо. Неважно, где оно появляется, на отдельной странице или на главной странице блога:
Мой клёвый блог
Бутерброд с сыром
Моя кошка съела бутерброд с сыром.
Новый алгоритм составления HTML5 выдает правильный результат:
• Мой клёвый блог
• Бутерброд с сыром
То, что у каждого элемента-разделителя есть свое собственное содержание, делает эти элементы прекрасно подходящими для решений на Ajax. И снова HTML5 показывает свое происхождение из спецификации для веб-приложений.
Однако если вы попытаетесь перенести кусочек содержимого из одного документа в другой, то столкнетесь с рядом проблем. CSS-правила, примененные к главному документу, будут применены и к вставленному содержимому. Это в настоящий момент одна из главных проблем с распространением виджетов в вебе.
HTML5 предлагает решение этой проблемы в виде атрибута scoped, который можно применить к элементу style. Все стили, объявленные внутри этого элемента style, будут применены только к ближайшему родительскому элементу-разделителю:
Мой клёвый блог
Бутерброд с сыром
Моя кошка съела бутерброд с сыром.
В этом примере только у второго элемента h1 будет значение размера шрифта, равное 75%. По крайней мере теория такова. Ни один браузер еще не поддерживает атрибут scoped.
В этом-то и загвоздка. Перед тем как начать использовать какое-либо новое добавление в HTML5, вам нужно учесть, какие браузеры поддерживают эту функцию. Впрочем, какой бы ни была браузерная поддержка, у меня есть несколько стратегий, которые помогут вам начать работать с HTML5. В следующей, последней главе я хотел бы поделиться с вами этими стратегиями.
Если вы хотите начать использовать новые структурные элементы HTML5 прямо сейчас, вам ничто не мешает. Большинство браузеров позволят вам назначать стили новым элементам. Дело не в том, что браузеры активно поддерживают эти элементы, а в том, что большинство браузеров позволяют использовать и назначать стили любому элементу, который вы захотите изобрести.
Браузеры по умолчанию не применяют к новым элементам никаких CSS-стилей. Так что по крайней мере вы, скорее всего, захотите объявить, что все новые структурные элементы должны начинаться с новой строки:
section, article, header, footer, nav, aside, hgroup {
display: block;
}
Для большинства браузеров этого достаточно. Internet Explorer требует к себе особого внимания. Он решительно отказывается признать новые элементы, если только экземпляр каждого элемента не создан заранее с помощью JavaScript, вот так:
document.createElement('section');
Реми Шарп (Remy Sharp), гений JavaScript, написал очень полезный скриптик, который генерирует все новые элементы HTML5. Загрузите этот скрипт внутри условного комментария, так что он будет исполняться только в нуждающемся Internet Explorer:
<![endif]->
Теперь вы можете назначать стили новым элементам сколько душе угодно.
Браузеры еще не начали поддерживать новый алгоритм содержания в HTML5, но вы все равно можете начать использовать доступные вам дополнительные уровни заголовков.
Джоффри Снеддон (Geoffrey Sneddon) написал очень полезную онлайн-утилиту, которая сгенерирует содержание по спецификациям HTML5 (http://bkaprt.com/html5/9)[14].
Если вы последуете совету, изложенному в спецификации HTML5, и начнете с нуля, начиная с h1, внутри каждого раздела вашего содержимого CSS-правила, которые вы напишете, очень быстро станут очень запутанными:
h1 {
font-size: 2.4em;
}
h2, section h1, article h1, aside h1 {
font-size: 1.8em;
}
h3, section h2, article h2, aside h2,
