hheader {
margin: 0 2em;
}
Этот селектор элемента описывает оба тега header. Мы могли бы использовать селектор наследования (т. е. body
> header
), но это кажется немного тяжеловесным, не говоря уже о том, что верхний заголовок может стать «шапкой» целого сайта. Здесь мы можем выгодно использовать роль WAI-ARIA, просто добавив role=”banner”
в HTML:
Тракторы: Интерактивное руководство
Обслуживание тракторов
Этот ролевой атрибут говорит о том, что элемент
– «глобальный» и его содержимое лучше применять ко всему сайту, а не только к текущей странице. А благодаря простому селектору атрибутов, несложно задать стиль:
header [role=”banner”] {
margin: 0 2em;
}
Из-за того, что теги header
и footer
могут использоваться во многих местах, пожалуй, мы бы остались без тега для основного контента. И снова спасибо ролям ARIA, которые предоставляют богатый выбор.
Добавляя роль “main”
к article
(таким образом, получаем
), мы можем легко определить, что основной контент для текущего документа расположен внутри article. (В примерах выше вы могли заметить, что тег
h1
используется в верхнем заголовке (корневом), а
h2
– во вложенном.) В сочетании они в лучшем виде описывают иерархию документа).
Вы, вероятно, уже отметили изящество этого подхода. Описание контента становится более детальным, и мы можем применять стили к нашим новым тегам, не особо напрягаясь. Третья из ролей ARIA – это contentinfo
, которая часто применяется для конфиденциальных заявлений, уведомления об авторских правах и общей информации о текущей странице сайта. (Некоторые называют это «метаинформацией»).
И, наконец, четвертая и очень полезная роль ARIA, про которую нужно знать, – это navigation. Она легко отличает навигационный раздел от обычного старого списка ссылок. Добавление ролей ARIA – хороший способ сделать контент и контекст вашего существующего сайта более наглядным. Потом, когда вы решите усовершенствовать сайт, вы сможете прибегнуть к новым тегам.
Надеюсь, это небольшое введение помогло вам убедиться в пользе семантического контента. Роли ARIA – отличный пример тому.
Хранилище на стороне клиента
А теперь поговорим об абсолютно новой теме: хранилище на стороне клиента в HTML5. На сегодняшний день мы имеем невеликий выбор средств для хранения данных у пользователя. Наиболее распространенным способом стала скромная куки-сессия. Но этому методу сопутствует множество маленьких проблем. И самые выматывающие из них – это следующие:
• Данные, которые вы сохраняете в сессии, перемещаются туда и обратно между клиентом и сервером при каждом запросе.
• Данные, которые вы сохраняете, имеют лимит в 4 kB.
• Все куки ограничены во времени.
Впрочем, с использованием куки все обстоит не так уж плохо. Куки – то, что сохраняет данные пользователя для регистрации на сайте и помогает серверу идентифицировать его. Ясно, что нам нужны и другие варианты для сохранения данных. К счастью, у нас есть фантастическое решение в локальном и сессионном хранилище. Что это? Рад, что вам интересно.
С localStorage
и sessionStorage
, у нас есть два JavaScript API для сохранения строк для браузера. SessionStorage
очищается, когда заканчивается сеанс пользователя (т. е. когда «вкладка» или «браузер» закрываются), а в это время localStorage
хранится, пока разработчик (через JavaScript) или пользователь (через свои браузерные настройки) не решают удалить его.
Интерфейсы API виртуально идентичны – единственная разница будет в сроках хранения. Откройте свою панель инструментов разработчика в современном браузере (имеется в виду выпуска последних трех лет).
Введите localStorage.setItem (“name”, “Ben”)
. В Webkit-браузерах вы увидите мое имя, сохраненное под вкладкой «Ресурсы» (для этого вам нужно будет раскрыть “Local Storage”). Вы только что сохранили свой первый элемент данных в localStorage
.
А теперь давайте извлечем то, что вы сохранили, используя localStorage.getItem(“name”)
. Вы увидите “Ben”, четко напечатанное в консоли.
И, наконец, чтобы очистить все после себя, воспользуйтесь либо localStorage.deleteItem(“name”)
, чтобы удалить мое имя, либо localStorage.clear()
, чтобы убрать все из localStorage
. Когда пользователи вызовут localStorage.clear()
, они лишь очистят его для текущего домена.
Итак, если пользователь сохраняет какие-либо данные на сайте, расположенном на example.com, а потом переключают вкладки на google.com, они увидят, что у них нет доступа к данным, сохраненным ими на вкладке example.com.
Читать дальше
Конец ознакомительного отрывка
Купить книгу