Від автора: вітаю вас, дорогі читачі блогу webformyself. У цій статті ми продовжимо говорити про технології html5. В цей раз я хотів би торкнутися інші нововведення цієї специфікації. Такими є в html5 data-атрибути, які можна прописувати будь-тегам.
Що таке data-атрибути і для чого вони потрібні?
Отже, почнемо з того, що ж це таке взагалі. Як ви можливо знаєте, в html будь-якого тегу можна вказати якийсь атрибут, будь то універсальний (class, id) або унікальний для цього елемента.
Так от, нова специфікація HTML5 додала декілька нових атрибутів. В основному вони пишуться для таких же нових тегів, але також з’явилася ще одна, абсолютно нова категорія – data-атрибути.
Їх перша особливість у тому, що атрибут може називатися як завгодно. Єдине правило – він повинен починатися з префікса data – і в ньому, природно, не повинно бути російських букв. До одного тегу можна записати скільки завгодно таких параметрів. В якості значень також можна встановлювати довільні слова. До речі, значення можна вказувати і на російській. Приклад:
Як бачите, можна вказувати будь-які імена і будь-які значення. Але ж ці параметри нічого не роблять з елементом, навіщо вони взагалі потрібні? Є як мінімум кілька способів застосування data-атрибутів в сайтобудуванні, і давайте розглянемо їх.
Спосіб застосування 1 – звернення до елементів css
Якщо ви знаєте, що таке селектори атрибутів, то, напевно, вже здогадуєтеся, як можуть бути використані нові можливості. Вказуючи для тега унікальний data-атрибут, ви зможете відповідним чином звернутися до нього в стилях. Давайте розглянемо приклад:
div[data-css = ‘css’]{}
Це дозволило нам звернутися до елементу без використання стильових класів. Однак, якщо так подумати, то ніякого особливого переваги це не дає, для звернення по класу потрібно виконати приблизно такі ж дії. Таким чином, у вас просто розширюються можливості по селекторам і нічого більше.
Спосіб застосування 2 – зберігання значень і їх використання
З першого погляду, значення data-атрибутів нічого не змінюють і взагалі ніяк не впливають на веб-сторінку. Так навіщо вони взагалі потрібні? Насправді застосування знайти можна, якщо згадати про функцію attr() в css.
Давайте поставимо задачу: потрібно вивести на сторінку пояснювальний текст до фотографій, який з’являвся б або відразу з завантаженням картинки, або при наведенні на неї, не важливо як. Стандартна підказка реалізується з допомогою атрибута title.
Але така підказка може не задовольняти вас по дуже багатьом параметрам. По-перше, вона з’являється плавно (що не завжди потрібно). По-друге, вона зникає через якийсь час. По-третє, вона з’являється в різних місцях, в залежності від того, куди наведено курсор. Ну а найбільша проблема – ми ніяк не можемо стилізувати нашу підказку – це завжди буде чорний текст на білому тлі, що не дуже цікаво.
Отже, вище в коді ми вставили картинку, вказали шлях до неї і додатково записали довільний data-параметр. Реалізувати висновок пояснення до фото тепер можна таким чином:
Що ми зробили? Тепер у всіх зображень буде псевдоэлемент, в якому буде знаходитися значення атрибута data-img, якщо воно є у тега img. Таким нехитрим способом ви змогли вивести пояснювальний текст до фотографії.
Я не буду в цій статті наводити інструкцію, як оформити підказку. Скажу тільки, що за замовчуванням вона буде відображатися після завантаження сторінки. Найчастіше її треба спочатку приховати, а виводити при наведенні на картинку. Щоб це реалізувати, потрібно скористатися селектором img:hover:after.
Ну а які є ще html5 атрибути, що з’явилися тільки в цій специфікації? До таких можна віднести, наприклад, controls – атрибут для нових елементів audio і video, який дозволяє вивести елементи управління відеороликом або аудіозаписом.
У відео за допомогою параметра poster можна вказати шлях до зображення, яке буде фоном до початку перегляду відео. Загалом, ось таких дрібних атрибутів з’явилося не так вже й мало.
Також у одиночного елемента input з’явилося дуже багато нових параметрів. Тепер можна створювати поля для введення електронної пошти, телефону, вибору календарної дати або часу, поле для вибору кольору і т. д. Порожній атрибут required робить будь-яке поле є обов’язковим для заповнення, якщо цього не зробити, то браузер просто не пропустить відправку форми.
Звичайно, єдиний мінус всіх цих нововведень в тому, що вони не скрізь належним чином підтримуються. Так що якщо в одному браузері нові можливості прекрасно працюють і користувачі можуть використовувати нові поля, то в іншому браузері все може бути по-іншому. Звичайно, частково винні самі користувачі, які не оновлюють, але треба також стежити за тим, що і як підтримується. У преміум-курсі з HTML5 ви зможете дізнатися про хороших сервісах, які визначають підтримку тих чи інших властивостей.
Спрощений синтаксис
Не можу не згадати про те, як правильно записувати атрибути та їх значення. Справа в тому, що HTML 5 в цьому плані став набагато простішим. Досить вказати , і можна писати код навіть з невеликими помилками, а в результаті він все одно буде оброблений правильно. Приклади:
Здавалося б, що це? Невже можна так писати? Виявляється, в html5 можна. Значення атрибута можна вказувати без лапок, а самі назви тегів писати хоч у різних регістрах. Звичайно, не варто робити це спеціально, та й сенсу в цьому не видно. Але все ж, якщо ви випадково де-небудь допустіть таку незначну помилку, то ніякої проблеми не виникне.
Від Автора: Коли в особливій ціні простір, використання слайдерів — оптимальний спосіб передачі інформації. Сьогодні ми подивимося, як створити простий слайдер для сайту,...