Как использовать в html 5 data-атрибуты и другие новые атрибуты

От автора: приветствую вас, дорогие читатели блога webformyself. В этой статье мы продолжим говорить о технологии html5. В этот раз я хотел бы затронуть другие нововведения этой спецификации. Таковыми являются в html5 data-атрибуты, которые можно прописывать любым тегам.

Что такое data-атрибуты и для чего они нужны?

Итак, начнем с того, что же это такое вообще. Как вы возможно знаете, в html любому тегу можно указать какой-то атрибут, будь то универсальный (class, id) или уникальный для этого элемента.

Так вот, новая спецификация HTML5 добавила несколько новых атрибутов. В основном они пишутся для таких же новых тегов, но также появилась еще одна, абсолютно новая категория – data-атрибуты.

Их первая особенность в том, что атрибут может называться как угодно. Единственное правило – он должен начинаться с префикса data- и в нем, естественно, не должно быть русских букв. Одному тегу можно записать сколько угодно таких параметров. В качестве значений также можно указывать произвольные слова. Кстати, значение можно указывать и на русском. Пример:

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

Способ применения 1 – обращение к элементам в css

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

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

Способ применения 2 – хранение значений и их использование

С первого взгляда, значения data-атрибутов ничего не меняют и вообще никак не влияют на веб-страницу. Так зачем они вообще нужны? На самом деле применение им найти можно, если вспомнить про функцию attr() в css.

Давайте поставим задачу: нужно вывести на страницу поясняющий текст к фотографиям, который появлялся бы либо сразу с загрузкой картинки, либо при наведении на нее, не важно как. Стандартная подсказка реализуется с помощью атрибута title.

Но такая подсказка может не удовлетворять вас по очень многим параметрам. Во-первых, она появляется плавно (что не всегда нужно). Во-вторых, она исчезает через какое-то время. В-третьих, она появляется в разных местах, в зависимости от того, куда наведен курсор. Ну а самая большая проблема – мы никак не можем стилизовать нашу подсказку – это всегда будет черный текст на белом фоне, что не очень интересно.

Итак, выше в коде мы вставили картинку, указали путь к ней и дополнительно записали произвольный data-параметр. Реализовать вывод пояснения к фото теперь можно таким образом:

Что мы сделали? Теперь у всех изображений будет псевдоэлемент, в котором будет находиться значение атрибута data-img, если оно есть у тега img. Таким нехитрым способом вы смогли вывести поясняющий текст к фотографии.

Я не буду в этой статье приводить инструкцию, как оформить подсказку. Скажу только, что по умолчанию она будет отображаться после загрузки страницы. Зачастую ее нужно изначально скрыть, а выводить при наведении на картинку. Чтобы это реализовать, вам нужно воспользоваться селектором img:hover:after.

Ну а какие есть еще html5 атрибуты, появившиеся только в этой спецификации? К таковым можно отнести, например, controls – атрибут для новых элементов audio и video, который позволяет вывести элементы управления видеороликом или аудиозаписью.

У видео с помощью параметра poster можно указать путь к изображению, которое будет фоном до начала просмотра видео. В общем, вот таких вот мелких атрибутов появилось не так уж и мало.

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

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

Упрощенный синтаксис

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

Казалось бы, что это? Неужели можно так писать? Оказывается, в html5 можно. Значение атрибута можно указывать без кавычек, а сами названия тегов писать хоть в разных регистрах. Конечно, не стоит делать это специально, да и смысла в этом не видно. Но все же, если вы теперь случайно где-нибудь допустите такую незначительную ошибку, то никакой проблемы не возникнет.

Комментарии Вконтакте: