Data url attribute in html

HTML data-* Attribute

The data-* attribute is used to store custom data private to the page or application.

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attribute consist of two parts:

1. The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix «data-«
2. The attribute value can be any string

Note: Custom attributes prefixed with «data-» will be completely ignored by the user agent.

Applies to

The data-* attribute is a Global Attribute, and can be used on any HTML element.

Element	Attribute
All HTML elements	data-*

Example

Example

Use the data-* attribute to embed custom data:

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Attribute
data-*	4.0	5.5	2.0	3.1	9.6

Источник

Полное руководство по HTML-атрибутам data-*

Представляем вашему вниманию перевод статьи, посвящённой использованию атрибутов data-* . Это — атрибуты, которые можно применять для удобного хранения в стандартных HTML-элементах различной полезной информации. Эта информация, в частности, может применяться в JavaScript и CSS.

Общие сведения

HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.

При этом не рекомендуется создавать собственные атрибуты, или применять существующие атрибуты такими способами, на которые они не рассчитаны.

Это плохо по многим причинам. HTML-код оказывается неправильно сформированным. И хотя подобное может и не иметь реальных негативных последствий, это лишает разработчика тёплого чувства вызываемого тем, что он создаёт валидный HTML-код. Но главная причина того, что так поступать не следует, заключается в том, что HTML — это язык, который постоянно развивается. В результате, если некий атрибут сегодня в языке не применяется, это не значит, что в будущем ничего не изменится.

Правда, если кому-то нужно использовать подобные атрибуты, у него есть совершенно нормальный способ это делать. Речь идёт о создании собственных атрибутов, названия которых начинаются с префикса data- . С этими атрибутами можно совершенно спокойно работать, применяя их так, как нужно программисту.

Синтаксис

Возможность создавать собственные HTML-атрибуты и записывать в них данные может оказаться крайне полезной. Это, как вы понимаете, возможно благодаря атрибутам data-* . Именно для этого такие атрибуты и предназначены. Выглядит это так:

Эти атрибуты, именно из-за того, что они всегда начинаются с префикса data- , часто называют атрибутами data-* или data-атрибутами. При формировании имён этих атрибутов сначала идёт слово data , потом — тире ( — ), а потом — оставшаяся часть имени, устроенная так, как нужно разработчику.

Можно ли использовать атрибут, имеющий имя data?

Вот пример кода, в котором используется атрибут с именем data :

Атрибут с таким именем, вероятно, никому не повредит, но его применение не позволит пользоваться JavaScript-инструментами, которые мы рассмотрим ниже. В этом примере разработчик, фактически, создаёт некий собственный атрибут, что, как уже было сказано, делать не рекомендуется.

Чего не стоит делать с атрибутами data-*

В таких атрибутах не стоит хранить содержимое, которое должно быть доступно ассистивным технологиям. Если некие данные должны быть видимы на странице, или должны быть доступны средствам для чтения с экрана, их недостаточно просто поместить в атрибут data-* . Такие данные должны появиться и в обычной HTML-разметке.

Вот материал о том, как скрывать элементы веб-страниц.

Стилизация элементов с использованием атрибутов data-*

В CSS можно выбирать HTML-элементы, основываясь на атрибутах и их значениях.

/* Выбрать элемент с таким именем атрибута, имеющим такое значение */ [data-size="large"] < padding: 2rem; font-size: 125%; >/* Выбор можно ограничить элементом, классом, или чем-то другим */ button[data-type="download"] < >.card[data-pad="extra"]

Это может показаться интересным. Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList ), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.

/* Выбор элементов, у которых имеется указанный атрибут */ [data-size] < >/* Выбор элемента, атрибут которого имеет заданное значение */ [data-state="open"], [aria-expanded="true"] < >/* Селектор "начинается с", использование которого приведёт к выбору элементов, атрибут которых содержит "3", а так же - что угодно другое, начинающееся с 3 - вроде "3.14" */ [data-version^="3"] < >/* Селектор "содержит" указывает на то, что заданная строка должна содержаться где-то в значении свойства */ [data-company*="google"]

Специфичность селекторов атрибутов

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

Он уже будет описываться значением 0, 0, 2, 1 . Число 2 здесь появляется из-за того, что тут имеется и класс ( .card ), и атрибут ([data-foo=»bar»] ). А 1 здесь из-за того, что тут присутствует лишь один тег ( div ).

Вот, чтобы было понятнее, иллюстрированная версия этих рассуждений.

1 тег, 1 класс и 1 атрибут

У селекторов атрибутов специфичность ниже, чем у идентификаторов ( ID ), но выше, чем у тегов (элементов). Их специфичность равна специфичности классов.

Значения атрибутов, нечувствительные к регистру

Если нужно, чтобы селекторы выбирали бы атрибуты, значения которых могут содержать строки, записанные с использованием разных комбинаций строчных и прописных букв, можно воспользоваться вариантом селектора, нечувствительным к регистру.

/* Всё это соответствует следующему селектору */ [data-state="open" i]

Такое поведение обеспечивает использование в селекторе символа i .

Вывод данных, хранящихся в атрибутах data-*

CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.

Примеры использования атрибутов data-* для стилизации элементов

Атрибуты data-* можно использовать для указания того, сколько столбцов должно быть у grid -контейнера. Вот HTML-код:

Вот соответствующий CSS-код:

[data-columns] < display: grid; grid-gap: 1rem; padding: 1rem; margin: 0 0 1rem 0; >[data-columns] > div < height: 100px; background: white; >[data-columns="2"] < background: #64B5F6; grid-template-columns: repeat(2, 1fr); >[data-columns="3"] < background: #9CCC65; grid-template-columns: repeat(3, 1fr); >[data-columns="4"]

А вот — фрагмент результирующей страницы.

Grid-контейнеры, настройка которых производится с помощью атрибутов data-*

Поэкспериментировать с этим примером можно на CodePen.

Работа с атрибутами data-* в JavaScript

К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.

// Чтение значения атрибута let value = el.getAttribute("data-state"); // Запись значения атрибута. // В data-state записывается значение "collapsed" el.setAttribute("data-state", "collapsed");

Однако атрибуты data-* имеют и собственный особый API. Предположим, у нас есть элемент с несколькими атрибутами data-* (что совершенно нормально):

Если имеется ссылка на этот элемент, то читать и записывать значения его атрибутов можно так:

// Чтение span.dataset.info; // 123 span.dataset.index; // 2 // Запись span.dataset.prefix = "Mr. "; span.dataset.emojiIcon = ";-)";

Обратите внимание на то, что в последней строке JS-кода используется запись имени атрибута в верблюжьем (CamelCase) стиле. Система автоматически преобразует имена HTML-атрибутов, записанные в кебаб-стиле, в имена, записанные в верблюжьем стиле. То есть — data-this-little-piggy превращается в dataThisLittlePiggy .

Этот API, конечно, не такой удобный, как API classList, поддерживающий понятные методы вроде add , remove , toggle и replace , но это, всё же, лучше чем ничего.

В JavaScript можно работать и со встроенными в элементы наборами данных:

А почему бы не записать в атрибут data-* JSON-данные? Ведь это всего лишь строки, которые можно отформатировать как валидные JSON-данные (учитывая кавычки и прочее). При необходимости эти данные можно извлечь из атрибута и распарсить.

const el = document.querySelector("li"); let json = el.dataset.person; let data = JSON.parse(json); console.log(data.name); // Chris Coyier console.log(data.job); // Web Person

Об использовании атрибутов data-* в JavaScript

Идея тут заключается в том, чтобы, пользуясь атрибутами data-* , размещать в HTML-коде данные, к которым можно обращаться из JavaScript для выполнения неких действий.

Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like :

У этой кнопки может быть обработчик нажатия, выполняющий AJAX-запрос к серверу. Обработчик, если пользователь лайкнет что-то с помощью кнопки, увеличивает количество лайков в серверной базе данных. Обработчик знает о том, какую именно запись надо обновить, так как берёт сведения об этом из атрибута data-* .

Итоги

Вот, вот и вот — стандарты, связанные с селекторами атрибутов data-* . Здесь, на сайте Caniuse, можно узнать о поддержке атрибутов data-* браузерами. Если вы раньше не пользовались этими атрибутами, надеемся, этот материал дал вам пищу для размышлений.

Уважаемые читатели! Как вы применяете HTML-атрибуты data-*?

Источник

URL-схема data:

URL-схема data: (от англ. «data» ‒ «данные») позволяет включать небольшие элементы данных в URL строку так, как если бы они являлись ссылкой на внешний ресурс.

Поддержка браузерами

Спецификация

URL составляющие схемы

Указывает спецификацию типа носителей данных. «медиаТип» имеет вид [ тип «/» подтип ] *( «;» параметр ) .

тип Указывает медиа тип данных.

data: text /plain;charset=US-ASCII,A%20brief%20note

подтип Указывает медиа подтип данных.

data:text/ plain ;charset=US-ASCII,A%20brief%20note

параметр Указывает параметы медиа типа данных.

data:text/plain; charset=US-ASCII ,A%20brief%20note

по умолчанию: « text/plain;charset=US-ASCII ».

Примечание: При указании значения использующегося по умолчанию, можно опустить « text/plain », оставив только параметр « charset ».

base64

Указывает способ представления (кодирования) данных. Если указано « base64 », то это означает, что данные закодированы в base64. Если же запись « base64 » отсутствует, то это означает, что данные представлены, с помощью кодировки ASCII. При этом символы, которые находятся в диапазоне безопасных URL символов, записываются как обычно, а символы, которые находятся вне диапазона безопасных URL символов, кодируются при помощи стандартного шестнадцатеричного кодирования символов используемого в URL.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZ SiLoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA 7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAZ SURBVBhXY7hx48Z/MGAAYggHxAJxbtwAAH8HGYcGiB3UAAAAAElFTkSuQmCC

Указываются закодированные данные. Является обязательным параметром.

Пример использования

Схема data:

.box padding: 3px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAZSURBVBhXY7hx48Z/MGAAYggHxAJxbtwAAH8HGYcGiB3UAAAAAElFTkSuQmCC) repeat;
border: 1px solid #E5E5E5;
>

Примеры со схемой «data:»

Источник