Чтение онлайн

на главную - закладки

Жанры

HTML5 для веб-дизайнеров
Шрифт:

Если вы последуете совету, изложенному в спецификации 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).

На самом высоком уровне ARIA позволяет технологиям специальных возможностей в полной мере работать с самыми разнообразными Ajax-взаимодействиями с веб-приложением. На самом простом уровне ARIA позволяет нам добавить семантической насыщенности в наши документы.

Самая основная единица ARIA – атрибут

role
. Вы можете добавить
role="search"
к вашей форме поиска,
role="banner"
к красивому заголовку вашего сайта и 
role="contentinfo"
– к подвалу страницы. Полный список значений в спецификации ARIA можно посмотреть здесь: http://bkaprt.com/html5/10 [15] .

15

Полная ссылка: http://www.w3.org/TR/wai-aria/roles#role_definitions/.

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

Но роли ARIA – часть спецификации HTML5, так что можно и использовать ARIA, и проходить валидацию.

Вы также можете использовать дополнительную семантику атрибута

role
для добавления стилей. Здесь вам поможет селектор по атрибутам. Такие селекторы позволят вам отличать заголовки и подвалы документов от заголовков и подвалов внутри
содержимого разделов:

header[role="banner"] { }

footer[role="contentinfo"] { }

Валидация

Если использовать его с умом, валидатор – очень мощный инструмент для веб-разработчика. Если нет, то валидатор дает ботаникам и занудам повод показывать пальцем на чужую разметку и смеяться над ней.

Анри Сивонен (Henri Sivonen) разработал полнофункциональный валидатор HTML5. Он находится по адресу: http://validator.nu/.

Вам даже не нужно обновлять свои закладки, ведущие на валидатор W3C . Этот валидатор тоже использует парсер Анри, как только находит доктайп HTML5.

Тестирование функций

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

Modernizr – очень полезная JavaScript-библиотека, которая определяет поддержку различных типов ввода, а также

audio
,
video
и
canvas
(http:// www.modernizr.com/).

Этот скрипт создает в JavaScript объект с названием Modernizr. Запрашивая свойства этого объекта, вы можете определить, поддерживает браузер тот или иной тип ввода или нет:

if (!Modernizr.inputtypes.color) {

// Запасное решение на JavaScript.

}

Modernizr также исполнит маленький шулерский трюк, который позволит вам применять стили к новым структурным элементам Internet Explorer, – так что если вы используете Modernizr, то не нужно использовать вместе с ним скрипт Реми.

Выберите собственную стратегию

Только вы решаете, как будете использовать HTML5 – осторожно или, наоборот, амбициозно.

По крайней мере что вы можете сделать без всяких проблем – это взять ваши текущие HTML– или XHTML-документы и изменить доктайп на:

<!DOCTYPE html>

Ну вот, вы только что сделали первый шаг в большой мир.

Теперь можете начать использовать роли ARIA – что вам, собственно, терять?

Если вы беспокоитесь по поводу новых структурных элементов, все равно можете начать привыкать к новой семантике, потренировавшись на именах классов:

<div class="section" >

<div class="header" >

<h1>Hello world!</h1>

</div><!– /.header – >

</div><!– /.section – >

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

div
и имена классов соответствующими структурными элементами.

Поделиться:
Популярные книги

Печать Пожирателя

Соломенный Илья
1. Пожиратель
Фантастика:
попаданцы
аниме
сказочная фантастика
фэнтези
5.00
рейтинг книги
Печать Пожирателя

Привет из Загса. Милый, ты не потерял кольцо?

Лисавчук Елена
Любовные романы:
современные любовные романы
5.00
рейтинг книги
Привет из Загса. Милый, ты не потерял кольцо?

Мастер 2

Чащин Валерий
2. Мастер
Фантастика:
фэнтези
городское фэнтези
попаданцы
технофэнтези
4.50
рейтинг книги
Мастер 2

Нечто чудесное

Макнот Джудит
2. Романтическая серия
Любовные романы:
исторические любовные романы
9.43
рейтинг книги
Нечто чудесное

Клан

Русич Антон
2. Долгий путь домой
Фантастика:
боевая фантастика
космическая фантастика
5.60
рейтинг книги
Клан

Имя нам Легион. Том 3

Дорничев Дмитрий
3. Меж двух миров
Фантастика:
боевая фантастика
рпг
аниме
5.00
рейтинг книги
Имя нам Легион. Том 3

Запасная дочь

Зика Натаэль
Фантастика:
фэнтези
6.40
рейтинг книги
Запасная дочь

Убивать чтобы жить 7

Бор Жорж
7. УЧЖ
Фантастика:
героическая фантастика
космическая фантастика
рпг
5.00
рейтинг книги
Убивать чтобы жить 7

У врага за пазухой

Коваленко Марья Сергеевна
5. Оголенные чувства
Любовные романы:
остросюжетные любовные романы
эро литература
5.00
рейтинг книги
У врага за пазухой

Кодекс Охотника. Книга XXI

Винокуров Юрий
21. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XXI

Генерал Скала и ученица

Суббота Светлана
2. Генерал Скала и Лидия
Любовные романы:
любовно-фантастические романы
6.30
рейтинг книги
Генерал Скала и ученица

Оцифрованный. Том 1

Дорничев Дмитрий
1. Линкор Михаил
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Оцифрованный. Том 1

Его маленькая большая женщина

Резник Юлия
Любовные романы:
современные любовные романы
эро литература
8.78
рейтинг книги
Его маленькая большая женщина

Хуррит

Рави Ивар
Фантастика:
героическая фантастика
попаданцы
альтернативная история
5.00
рейтинг книги
Хуррит