Як використовувати html 5 data-атрибути і інші нові атрибути

16

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

Що таке data-атрибути і для чого вони потрібні?

Отже, почнемо з того, що ж це таке взагалі. Як ви можливо знаєте, в html будь-якого тегу можна вказати якийсь атрибут, будь то універсальний (class, id) або унікальний для цього елемента.

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

Їх перша особливість у тому, що атрибут може називатися як завгодно. Єдине правило – він повинен починатися з префікса data — і в ньому, природно, не повинно бути російських букв. До одного тегу можна записати скільки завгодно таких параметрів. В якості значень також можна встановлювати довільні слова. До речі, значення можна вказувати і на російській. Приклад:

Як бачите, можна вказувати будь-які імена і будь-які значення. Але ж ці параметри нічого не роблять з елементом, навіщо вони взагалі потрібні? Є як мінімум кілька способів застосування data-атрибутів в сайтобудуванні, і давайте розглянемо їх.

Спосіб застосування 1 – звернення до елементів css

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

div[data-css = ‘css’]{}

Як використовувати html 5 data-атрибути і інші нові атрибути

Як використовувати html 5 data-атрибути і інші нові атрибути

Це дозволило нам звернутися до елементу без використання стильових класів. Однак, якщо так подумати, то ніякого особливого переваги це не дає, для звернення по класу потрібно виконати приблизно такі ж дії. Таким чином, у вас просто розширюються можливості по селекторам і нічого більше.

Спосіб застосування 2 – зберігання значень і їх використання

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

Як використовувати html 5 data-атрибути і інші нові атрибути

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

Але така підказка може не задовольняти вас по дуже багатьом параметрам. По-перше, вона з’являється плавно (що не завжди потрібно). По-друге, вона зникає через якийсь час. По-третє, вона з’являється в різних місцях, в залежності від того, куди наведено курсор. Ну а найбільша проблема – ми ніяк не можемо стилізувати нашу підказку – це завжди буде чорний текст на білому тлі, що не дуже цікаво.

Отже, вище в коді ми вставили картинку, вказали шлях до неї і додатково записали довільний data-параметр. Реалізувати висновок пояснення до фото тепер можна таким чином:

img{
display: inline-block;
}
img:after{
content: attr(data-img);
}

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

Я не буду в цій статті наводити інструкцію, як оформити підказку. Скажу тільки, що за замовчуванням вона буде відображатися після завантаження сторінки. Найчастіше її треба спочатку приховати, а виводити при наведенні на картинку. Щоб це реалізувати, потрібно скористатися селектором img:hover:after.

Ну а які є ще html5 атрибути, що з’явилися тільки в цій специфікації? До таких можна віднести, наприклад, controls – атрибут для нових елементів audio і video, який дозволяє вивести елементи управління відеороликом або аудіозаписом.

У відео за допомогою параметра poster можна вказати шлях до зображення, яке буде фоном до початку перегляду відео. Загалом, ось таких дрібних атрибутів з’явилося не так вже й мало.

Також у одиночного елемента input з’явилося дуже багато нових параметрів. Тепер можна створювати поля для введення електронної пошти, телефону, вибору календарної дати або часу, поле для вибору кольору і т. д. Порожній атрибут required робить будь-яке поле є обов’язковим для заповнення, якщо цього не зробити, то браузер просто не пропустить відправку форми.

Звичайно, єдиний мінус всіх цих нововведень в тому, що вони не скрізь належним чином підтримуються. Так що якщо в одному браузері нові можливості прекрасно працюють і користувачі можуть використовувати нові поля, то в іншому браузері все може бути по-іншому. Звичайно, частково винні самі користувачі, які не оновлюють, але треба також стежити за тим, що і як підтримується. У преміум-курсі з HTML5 ви зможете дізнатися про хороших сервісах, які визначають підтримку тих чи інших властивостей.

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

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

Як використовувати html 5 data-атрибути і інші нові атрибути

Здавалося б, що це? Невже можна так писати? Виявляється, в html5 можна. Значення атрибута можна вказувати без лапок, а самі назви тегів писати хоч у різних регістрах. Звичайно, не варто робити це спеціально, та й сенсу в цьому не видно. Але все ж, якщо ви випадково де-небудь допустіть таку незначну помилку, то ніякої проблеми не виникне.