HTML5 для веб-дизайнеров

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

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

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

article

style scoped

h1 { font-size: 75% }

/style

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

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

/article

В этом примере только у второго элемента h1 будет значение размера шрифта, равное 75%. По крайней мере теория такова. Ни один браузер еще не поддерживает атрибут scoped.

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

6. Использование HTML5 сейчас

Если вы хотите начать использовать новые структурные элементы HTML5 прямо сейчас, вам ничто не мешает. Большинство браузеров позволят вам назначать стили новым элементам. Дело не в том, что браузеры активно поддерживают эти элементы, а в том, что большинство браузеров позволяют использовать и назначать стили любому элементу, который вы захотите изобрести.

Стили

Браузеры по умолчанию не применяют к новым элементам никаких CSS-стилей. Так что по крайней мере вы, скорее всего, захотите объявить, что все новые структурные элементы должны начинаться с новой строки:

section, article, header, footer, nav, aside, hgroup {

display: block;

}

Для большинства браузеров этого достаточно. Internet Explorer требует к себе особого внимания. Он решительно отказывается признать новые элементы, если только экземпляр каждого элемента не создан заранее с помощью JavaScript, вот так:

document.createElement('section');

Реми Шарп (Remy Sharp), гений JavaScript, написал очень полезный скриптик, который генерирует все новые элементы HTML5. Загрузите этот скрипт внутри условного комментария, так что он будет исполняться только в нуждающемся Internet Explorer:

!-[if IE]

script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"

/script

![endif]-

Теперь вы можете назначать стили новым элементам сколько душе угодно.

Заголовки

Браузеры еще не начали поддерживать новый алгоритм содержания в HTML5, но вы все равно можете начать использовать доступные вам дополнительные уровни заголовков.

Джоффри Снеддон (Geoffrey Sneddon) написал очень полезную онлайн-утилиту, которая сгенерирует содержание по спецификациям HTML5 [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,

section section h1, section article h1, section aside h1,

article section h1, article article h1, article aside h1,

aside section h1, aside article h1, aside aside h1 {

font-size: 1.6em;

}

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

Aria

Новые структурные элементы HTML5 будут очень полезны для технологии специальных возможностей. Вместо того чтобы создавать ссылки «пропустить навигацию», все, что нужно делать, – правильно использовать элемент nav. Это позволит пользователям программ для чтения с экрана пропустить навигацию, а нам не придется создавать для этого отдельную ссылку.

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

К счастью, в настоящий момент отличную поддержку имеет стандарт ARIA (доступные насыщенные интернет-приложения, Accessible Rich Internet Applications).