В чем все различия между атрибутами src и data-src?
Каковы различия и последствия (хорошие и плохие) использования либо data-src или src атрибут img тега? Могу ли я добиться тех же результатов, используя оба варианта? Если да, то когда следует использовать каждый из них?
Атрибуты src и не data-src имеют ничего общего, за исключением того, что оба они разрешены HTML5 CR и оба содержат буквы src . Все остальное другое.
src Атрибут определен в HTML спецификации, и имеет функциональное значение.
data-src Атрибут является лишь одним из бесконечного множества data-* атрибутов, которые не определяются значения , но могут быть использованы , чтобы включить невидимые данные в элементе, для использования в сценариях (или стилизации).
Если вы хотите, чтобы изображение загружалось и отображало конкретное изображение, используйте .src для загрузки URL этого изображения.
Если вам нужен фрагмент метаданных (по любому тегу), который может содержать URL-адрес, используйте data-src любой из них, data-xxx который вы хотите выбрать.
Пример src тега изображения, в котором изображение загружает для вас JPEG и отображает его:
Пример ‘data-src’ в теге, отличном от изображения, где изображение еще не загружено — это просто фрагмент метаданных в теге div:
Пример data-src тега изображения, используемого как место для хранения URL-адреса альтернативного изображения:
Полное руководство по data атрибутам
Элементы HTML могут иметь атрибуты, которые используются для чего угодно, от информации о доступности до стилистического контроля.
Что не рекомендуется это составление собственных атрибутов или перепрофилирования существующих атрибутов для несвязанного функциональности.
Есть множество причин, по которым это плохо. Ваш HTML-код становится невалидным, что может не иметь никаких реальных негативных последствий, но лишает вас этого теплого нечеткого действительного чувства HTML. Самая веская причина в том, что HTML — это живой язык, и только потому, что атрибуты и значения, которые ничего не делают сегодня, не означают, что они никогда этого не сделают.
Хорошая новость: вы можете создать свои собственные атрибуты. Вам просто нужно добавить к ним префикс, data-* и тогда вы сможете делать то, что вам нравится!
Синтаксис
Может быть очень удобно иметь возможность создавать свои собственные атрибуты HTML и помещать в них свою собственную информацию. К счастью, вы можете это сделать с data атрибутами:
Атрибуты данных часто называют data-* атрибутами, так как они всегда отформатированы таким образом: слово data , затем тире — , затем другой текст, который вы можете составить.
Можете ли вы использовать один атрибут data?
Вероятно, это не повредит, но вы не получите JavaScript API, о котором мы расскажем позже в этом руководстве. По сути, вы создаете для себя атрибут, который, как я уже упоминал во вступлении, не рекомендуется.
Что не стоит делать с data атрибутами
Хранить контент, который должен быть доступен. Если контент должен просматриваться или читаться на странице, помещайте его не только в data атрибут, но и в HTML-контент.
Стилизация с атрибутами данных
CSS может выбирать элементы HTML на основе атрибутов и их значений.
Это может быть убедительным. Преобладающими хуками стилей в HTML / CSS являются классы, и хотя классы хороши (они имеют среднюю специфичность и хорошие методы JavaScript через classList ), у элемента либо есть, либо нет (по сути, он включен или выключен ). С data-* атрибутами вы получаете эту способность включения / выключения плюс возможность выбирать на основе значения, которое оно имеет на том же уровне специфичности.
Специфика выбора атрибутов
Это точно так же, как класс. Мы часто думаем о специфике как о значении из четырех частей:
встроенный стиль, идентификаторы, классы / атрибуты, теги
Таким образом, один селектор атрибута равен 0, 0, 1, 0. Данный селектор:
2 — потому что есть один class ( .card ) и один attribute ( [data-foo=»bar»] ), а 1 — потому что есть один tag ( div ).
Селекторы атрибутов имеют меньшую специфичность, чем идентификатор, больше, чем элемент / тег, и такие же, как класс.
Значения атрибутов без учета регистра
В случае, если вам необходимо исправить возможные несоответствия капитализации в ваших атрибутах данных, в селекторе атрибутов для этого есть вариант без учета регистра.
Использование атрибутов данных для визуализации
CSS позволяет вам извлечь значение атрибута данных и отобразить его, если вам нужно.
Пример использования стиля
Вы можете использовать атрибуты данных, чтобы указать, сколько столбцов вы хотите иметь в сетке контейнера.
Доступ к атрибутам данных в JavaScript
Как и любой другой атрибут, вы можете получить доступ к значению с помощью универсального метода getAttribute .
Но атрибуты данных также имеют свой собственный API. Допустим, у вас есть элемент с несколькими атрибутами данных (что вполне нормально):
Если у вас есть ссылка на этот элемент, вы можете установить и получить такие атрибуты, как:
Обратите внимание на использование camelCase в последней строке. Он автоматически преобразует атрибуты стиля kebab в HTML, например data-this-little-piggy , в стиль camelCase в JavaScript будет dataThisLittlePiggy .
Этот API, возможно, не так хорошо , как classList с четкими методами add , remove , toggle и replace , но это лучше, чем ничего.
У вас также есть доступ к встроенным наборам данных:
Данные JSON внутри атрибутов данных
Эй, а почему бы и нет? Это просто строка, и ее можно отформатировать как допустимый JSON (обратите внимание на кавычки и тому подобное). Вы можете восстановить эти данные и проанализировать их при необходимости.
Сценарии использования JavaScript
Концепция заключается в том, что вы можете использовать атрибуты данных для помещения в HTML информации, которая может понадобиться JavaScript для выполнения определенных задач.
Обычный пример связан с функциональностью базы данных. Скажем, у вас есть кнопка «Like»:
У этой кнопки может быть обработчик кликов, который выполняет Ajax-запрос к серверу, чтобы увеличить количество лайков в базе данных при клике. Он знает, какую запись обновлять, поскольку получает ее из атрибута данных.
Использование data-* атрибутов
HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .
Синтаксис HTML
Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:
Доступ в JavaScript
Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).
Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .
Доступ в CSS
Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr :
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
Увидеть как это работает можно в примере на JSBin.
Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
Проблемы
Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.
Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .
Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.