Использование тега и атрибута данных HTML5
29 марта 2018 | Опубликовано в css | Нет комментариев »
Знаете ли вы о возможности создания атрибута HTML, которому можно задать любое название и значения по Вашему желанию, при этом всегда будучи уверенными, что код останется корректным? Если Вы считаете, что в HTML5 это невозможно, вам будет полезно ознакомиться с этим уроком.
При создании такого атрибута нужно выполнить всего два условия:
1. Название атрибута должно начинаться с «data-».
2. Выбранное Вами название должно соответствовать соглашениям по именованиям в сети.
И это все. Вы можете попробовать сами, создайте в любом редакторе корректную веб-страницу HTML5 и вставьте следующий код в тег <body>:
<h1 data-holyHaleakala="big mojo">Heading 1</h1>
После этого проверьте этот код на корректность и убедитесь, что он действительно работает.
Можно даже использовать атрибут данных в теге данных:
<data data-holyHaleakala="big mojo">content</data>
Теперь разберемся, для чего же можно использовать тег и атрибут данных? Например, для решения следующей задачи: на Вашем веб-сайте есть изображения, которые могут быть неуместны для просмотра на рабочем месте или детьми. Вы бы хотели загрузить эти изображения на страницу, но не показывать их по умолчанию, а вместо этого дать возможность пользователю самому выбрать, хочет ли он увидеть такие изображения, используя переключатель на самом веб-сайте.
Решить эту задачу можно следующим образом. Создадим атрибут данных с подходящим названием и значениями и применим его к таким изображениям:
<img src="hot-koala-action.jpg" data-nsfw="true">
После этого в коде CSS для этой веб-страницы используем селектор, чтобы отключить такие изображения по умолчанию:
img[data-nsfw=true] { display: none; }
После этого можно использовать код JavaScript или код CSS, или их сочетание для того, чтобы сделать такие изображения видимыми, когда пользователь укажет, что он хочет их увидеть.
Обратите внимание, что это решение можно обойти, например, кто-то, достаточно разбирающийся в веб-разработке может просто отключить CSS и/или JavaScript для этой страницы и таким образом увидеть изображения. Единственный абсолютно безопасный способ — включать изображения с помощью языка скриптов, выполняемого на сервере, такого как PHP.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
549