Настройка значений CSS с помощью атрибутов данных HTML5

В сфере веб-разработки появилась возможность использования атрибутов данных HTML5 для изменения значений CSS. вызвало любопытство. Этот метод имитирует способ изменения содержимого CSS с помощью свойств контента.

Изучаем подход к атрибутам данных HTML5

Рассмотрим следующий фрагмент HTML и CSS:

div { width: attr(data-width); }

Текущие ограничения реализации

На момент написания этот подход не работает должным образом. Браузер интерпретирует атрибут data-width как строку, а не числовое значение ширины.

Предстоящая функция: пользовательские свойства

Однако спецификация значений CSS предполагает эта функция. Нотация attr() позволяет CSS получить доступ к значению указанного атрибута данных.

div { width: attr(data-width); }

Статус реализации

К сожалению, эта функция все еще находится в стадии разработки и не полностью поддерживается основными браузерами.

Альтернатива для псевдо- Элементы

Хотя возможность напрямую устанавливать значения CSS пока недоступна, вы можете использовать псевдоэлементы для управления содержимым:

::after {
  content: attr(data-width);
}
Этот метод позволяет отображать значение атрибута data-width как содержимое псевдоэлемента.