Бутерброд с сыром

Моя кошка съела бутерброд с сыром.

Теперь это содержимое по-настоящему переносимо. Неважно, где оно появляется, на отдельной странице или на главной странице блога:

Мой клёвый блог

Бутерброд с сыром

Моя кошка съела бутерброд с сыром.

Новый алгоритм составления HTML5 выдает правильный результат:

• Мой клёвый блог

• Бутерброд с сыром

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

Однако если вы попытаетесь перенести кусочек содержимого из одного документа в другой, то столкнетесь с рядом проблем. CSS-правила, примененные к главному документу, будут применены и к вставленному содержимому. Это в настоящий момент одна из главных проблем с распространением виджетов в вебе.

HTML5 предлагает решение этой проблемы в виде атрибута scoped, который можно применить к элементу style. Все стили, объявленные внутри этого элемента style, будут применены только к ближайшему родительскому элементу-разделителю:

Мой клёвый блог

h1 { font-size: 75% }

Бутерброд с сыром

Моя кошка съела бутерброд с сыром.

В этом примере только у второго элемента 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:

"http://html5shiv.googlecode.com/svn/trunk/html5.js">