автордың кітабынан сөз тіркестері  HTML5 и CSS3. Веб-разработка по стандартам нового поколения

Б. Хоган

Новичкам я бы порекомендовал сначала прочитать книгу Джона Дакетта HTML and CSS: Design and Build Websites [Duc11], в ней хорошо излагаются основы. Также стоит обратить внимание на книгу Джеффри Зельдмана Designing with Web Standards [Zel09]

с улучшенной доступностью.

13 https://developer .mozilla.org/en-US/docs/Web/CSS/clear

14 http://code.google.com/p/html5shiv/

15 http://lea.verou.me/polyfills/progress/

16 http://jqueryui.com/

К сожалению, стандарт HTML5 развился до платформы HTML5, что создало невероятную путаницу среди разработчиков и клиентов

HTML5 — спецификация, описывающая некоторые новые теги и разметку, а также ряд замечательных JavaScript API

блочные элементы всегда начинаются с новой строки, тогда как встроенные (inline) элементы не требуют разрыва строки, так что тег оказывается лишним

блочные элементы всегда начинаются с новой строки, тогда как встроенные (inline) элементы не требуют разрыва строки, так что тег оказывается лишним

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

Отделение поведения от контента, или Чем плохо решение с onclick
За последние годы всплывающие окна приобрели плохую репутацию, и вполне заслуженно. Они часто используются для того, чтобы заставить вас просмотреть рекламу, спровоцировать неосторожного пользователя на установку вируса или шпионской программы или, еще хуже, сообщить личную информацию, которая затем перепродается злоумышленником. Неудивительно, что в большинстве браузеров имеются механизмы блокировки всплывающих окон.

Впрочем, всплывающие окна не всегда плохи. Разработчики веб-приложений часто используют их для вывода справки, дополнительных настроек или других важных аспектов пользовательского интерфейса. Чтобы всплывающие окна не вызывали раздражения у пользователей, их следует реализовать ненавязчиво. На странице отдела кадров AwesomeCo находятся ссылки, которые выводят справочную информацию во всплывающих окнах. Большинство из них выглядит так:

html5_popups_with_custom_data/original_example_1.html

Holiday pay

Такой способ создания ссылок, открывающих всплывающие окна, весьма широко распространен. Собственно, многие начинающие программисты на JavaScript учатся создавать всплывающие окна именно таким образом. Однако у этого способа имеются свои недостатки, о которых необходимо упомянуть, прежде чем двигаться дальше.

Улучшение доступности
В ссылке не задан адрес места назначения! Если пользователь отключит JavaScript, то ссылка не приведет его на нужную страницу. Это серьезная проблема, которую необходимо решать немедленно. Никогда не опускайте атрибут href и не присваивайте ему фиктивные значения — ни при каких условиях. Присвойте адрес ресурса, который должен открываться во всплывающем окне.

html5_popups_with_custom_data/original_example_2.html

Holiday pay

Код JavaScript читает адрес ссылки из атрибута href присоединенного элемента.

Чтобы ваши страницы обладали хорошей доступностью, прежде всего убедитесь в том, что вся функциональность работает без JavaScript. Написать интерактивную часть JavaScript на таком фундаменте может быть намного проще.

Тег похож на , но он предназначен для активного отображения хода выполняемой операции — наподобие тех, которые отображаются при загрузке файлов. Шкала, напротив, предназначена для вывода статической информации — скажем, текущего объема пространства на сервере, доступного для некоторого пользователя. Разметка индикатора прогресса очень похожа на разметку шкалы:

html5_meter/progress.html

Тег , как и , пока поддерживается не всеми браузерами. Чтобы справиться с проблемой, используйте JavaScript для извлечения значений из индикатора и построения собственной визуализации. Также можно воспользоваться готовым компонентом HTML5-Progress15, созданным Леа Веру (Lea Verou).

Конечно, нужного результата можно добиться при помощи тегов , к которым применяются стили CSS, но также можно воспользоваться новым тегом , разработанным специально для таких задач. Тег помогает создать семантическое описание шкалы. Чтобы ваша шкала соответствовала рекомендациям спецификации, не используйте ее для отображения данных с неопределенными минимальными и максимальными значениями (например, рост или вес — кроме ситуаций, когда вы задаете конкретные границы). С другой стороны, тег можно использовать для отображения температуры, если интерпретировать его как шкалу термометра с заданным минимумом и максимумом.

В нашем примере шкала должна показывать, насколько близко мы подошли к цели $5000. Минимальное и максимальное значения известны, так что тег идеально подходит для этой задачи.

Простой прототип шкалы будет создан в новом документе HTML5. Чтобы продемонстрировать работу шкалы, в коде жестко зафиксировано текущее значение 2500.00.

html5_meter/index.html

Our Fundraising Goal

Help us reach our goal of $5000!

Для управления шириной шкалы можно воспользоваться CSS. Создайте файл stylesheets/style.css и добавьте в него следующий код:

html5_meter/stylesheets/style.css

meter{

width: 280px;

}

Не забудьте включить ссылку на файл CSS в секцию страницы HTML:

html5_meter/index.html

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