CSS attr() в виде текста: прямое вставление значений атрибутов HTML в стили

Представьте полоску прогресса, значение которой — 87 — уже указано в маркипаде как data-fill="87". До недавнего времени для включения этого числа в атрибут width требовался небольшой скрипт: необходимо было считать значение из dataset.fill, добавить к нему знак процента и записать полученное значение обратно в тот же элемент. Значение покидало документ лишь для того, чтобы сразу же вернуться обратно, что требовало использования скрипта и дополнительной обработки изображения.

Функция attr() устраняет эту необходимость. Теперь она принимает тип данных, поэтому стилишит может считывать атрибут как длину, цвет, число или идентификатор и использовать его в любом свойстве, принимающем данный тип. В этом руководстве рассматриваются синтаксис функции, четыре способа её работы, шаблоны, заменяющие обычные скрипты, ограничения безопасности, связанные с URL, а также способы внедрения этой функции при неполной поддержке браузерами.

От генератора строк к введённому значению

Классический метод attr() работал во всех крупных браузерах с примерно 2015 года, но у него была лишь одна функция — генерировать строку для свойства content, обычно в псевдоэлементе.

/* the version you already know */
blockquote::after {
  content: " — " attr(cite);
}

Это удобно для вывода цитаты или адреса ссылки, и ничего больше. Если поместить старый метод attr() внутрь свойства width, вся декларация будет отклонена, поскольку функция возвращает только строки, а свойство width не может использовать строки.

В стандарте CSS Values and Units Level 5 изменились правила: теперь вы указываете браузеру, какой тип значения содержит атрибут. Как только движок понимает, что речь идёт о длине, цвете или числе, результат может быть использован в любом свойстве, где допускается такой тип, что на практике означает почти все свойства.

/* the version this article is about */
.bar   { width: attr(data-fill %, 0%); }
.chip  { background-color: attr(data-brand type(<color>), #888); }
.dial  { rotate: attr(data-deg deg, 0deg); }
.card  { view-transition-name: attr(id type(<custom-ident>), none); }

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

• Это не способ исключить использование JavaScript в стилизации. Для записи style="--fill: 87%" непосредственно в HTML никогда не требовался скрипт. Новшество заключается в чем-то более узком: использование значения атрибута в стиле, ранее требовавшем скрипт, теперь уже не требует его.
• Это не перемещает логику приложения в CSS. Ваше приложение по-прежнему определяет, что задача выполнена на 87 процентов. Единственное изменение — кто считывает это число из элемента: ваш код или таблица стилей, которая всё равно должна была быть применена.

Структура функции

Грамматика этой конструкции помещается в одну строку.

attr( <attr-name> <attr-type>? , <fallback-value>? )

Используйте attr(data-fill %, 0%). Он состоит из трех частей: имени атрибута, который необходимо прочитать, типа, по которому он интерпретируется, и значения по умолчанию в случае, если поиск не дает пригодных данных.

Тип может быть указан тремя разными способами. Первый — type(), который оборачивает любой CSS-тип данных в угловые скобки.

/* 1. type() — any CSS data type */
color:  attr(data-brand type(<color>), crimson);
width:  attr(data-w type(<length>), 0px);
scale:  attr(data-s type(<number>), 1);

Второй способ — просто единица измерения, означающая «атрибут содержит простое число; к нему следует добавить эту единицу». Третий способ — raw-string, который также является значением по умолчанию при отсутствии указания типа и воспроизводит историческое поведение.

/* 2. unit shorthand — the attribute holds a bare number */
width:           attr(data-w px);      /* data-w="10"    → 10px  */
rotate:          attr(data-deg deg);   /* data-deg="45"  → 45deg */
animation-delay: attr(data-i s);       /* data-i="2"     → 2s    */
width:           attr(data-fill %);    /* data-fill="87" → 87%   *//* 3. raw-string — the default, and the old behaviour */
content: attr(data-name raw-string, "stranger");
content: attr(data-name);   /* identical */

Сокращение для единицы измерения предполагает число без единиц

attr(data-w px) означает «прочитать число из data-w и рассматривать его как пиксели». Следовательно, атрибут должен иметь вид data-w="10". Запись data-w="10px" не обрабатывается, поскольку единица измерения указывается в стилевом листе, а не в маркировке. Если вы хотите, чтобы HTML сам указывал единицу измерения (например, потому что редактор может ввести 2rem или 10px), используйте type(<length>) и сохраняйте полное значение.

Недействительный вариант обхода срабатывает раньше и по-другому

Запасной вариант обрабатывается вместе с остальной частью декларации ещё до того, как браузер начнет анализировать элемент. Если вы напишете attr(data-w px, banana), декларация будет недействительной на этапе парсинга и полностью проигнорируется: атрибут так и не будет прочитан, вместо него будет применяться любая более ранняя декларация того же свойства в правиле. Это совершенно отдельная проблема от отсутствия атрибута, которое обнаруживается лишь гораздо позже в процессе вычисления значения. Если вы будете разделять эти два случая в своем сознании, отладка станет гораздо проще.

Типы, которые можно задать

Внутри type() принимаются следующие типы, а также информация о том, что должно содержаться в атрибуте, и типичные места его использования.

• <length>: значения вроде "12px" или "2rem" для свойств width, padding или inset.

<percentage>: "87%" — для параметров width или translate.

<length-percentage>: один из двух предыдущих вариантов — для любых параметров, требующих указания размера.

<number>: "4.5" — для параметров opacity, scale или в качестве входных данных для функции calc().

<integer>: "3" — для параметров grid-column, z-index или order.

<color>: "#4fc3f7" или "tomato" — для параметров color и background-color.

<angle>: "45deg" или "0.25turn" — для параметров rotate или углов градиента.

<time>: "300ms" — значение для параметров animation-delay и transition-duration.

<resolution>: плотность вида "2dppx", используемая параметром image-resolution.

<custom-ident>: идентификатор вроде "card-3", удобный для присвоения имён таким параметрам, как view-transition-name или anchor-name.

<string>: CSS-строка в кавычках, обычно используемая параметром content.

<transform-function>: выражение вроде "rotate(20deg)", применяемое к свойству transform.

<image> и <url>: присутствуют в синтаксисе, но фактически не могут использоваться по причинам, описанным в разделе безопасности ниже.

*: принимает всё и в основном полезен для обнаружения функций.

Чтобы числа стали размерами, необходима функция calc()

<number> не имеет размерности. Значение 4.5 само по себе не может задать ширину, поэтому оно практически всегда находится внутри calc(). Самый удобный способ — сначала сохранить его в пользовательском свойстве, а затем выполнить там арифметические операции.

.stars {
  --r: attr(data-rate type(<number>), 0);
  width: calc(var(--r) * 20%);   /* 4.5 → 90% */
}

Промежуточный параметр --r — это не просто формальность. Он позволяет использовать значение в нескольких объявлениях, и поскольку пользовательские свойства наследуются, именно так значение доходит до потомков элементов; как вы увидите, это единственный способ обмена атрибутом с дочерними элементами. Если вы уже используете пользовательские свойства для передачи данных между скриптами и стилями, статья о пользовательских свойствах в режиме выполнения рассматривает другую сторону этого «моста».

Как происходит поиск: четыре возможных результата, а не два

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

• Атрибут отсутствует. Если указан запасной вариант, он используется. В противном случае результатом становится значение «guaranteed-invalid», и декларация считается недействительной в момент вычисления значения (IACVT).
• Атрибут существует, но пуст (data-x=""). При использовании функции attr() с указанием типа пустая строка не интерпретируется как соответствующий тип, поэтому применяется запасной вариант. Однако при поиске без указания типа результат считается успешным и представляет собой пустую строку, в связи с чем запасной вариант игнорируется.
• Значение не может быть интерпретировано как указанный тип. Если имеется запасной вариант, он используется; в противном случае наступает ситуация IACVT.
• Значение может быть интерпретировано. Оно используется, и стиль обновляется сразу при изменении атрибута.

Что на самом деле означает «недействительно в момент вычисления значения»

Во время парсинга обнаруживается стандартная ошибка синтаксиса. Браузер игнорирует эту декларацию, и вступает в силу более ранняя декларация того же свойства в том же правиле. Проблема IACVT возникает гораздо позже, после того как каскад уже выбрал подходящую декларацию, поэтому нет ничего, на что можно было бы вернуться. Свойство ведет себя так, как будто оно установлено в значение unset: наследуемые свойства берут значение у родителя, а ненаследуемые возвращаются к своему начальному значению.

.bar {
  width: 50%;                  /* cascade drops this: the next one parsed fine */
  width: attr(data-fill %);    /* attribute missing → IACVT → width: auto */
}
/* result: auto. NOT 50%. */

Вот почему наличие запасного варианта — это не вопрос предпочтений. Без него ошибка в написании имени атрибута приводит к использованию значений auto, 0 или наследованного цвета, при этом в консоли не появляется никаких сообщений.

Почему функция attr() без указания типа не может задать цвет

Значение по умолчанию raw-string заслуживает особого внимания. Предположим, что правило устанавливает значение background-color из атрибута без указания типа, и вы тестируете его на элементах, которые отличаются только этим атрибутом. Элемент без атрибута, как и ожидается, получает значение по умолчанию. Каждый элемент, имеющий этот атрибут, отображается прозрачным, включая тот, который содержит совершенно корректное название цвета.

Причина заключается в том, что функция attr() без указания типа заменяет значение атрибута на его буквальный текст в виде строки CSS, а не на обработанное значение CSS. Атрибут background-color не принимает строки, поэтому замена проваливается на этапе вычисления значения. Режим обратного взаимодействия не помогает: он предназначен только для случаев отсутствия атрибута или ошибки парсинга при соблюдении указанного типа, а в данном правиле ничего не было указано. Поиск успешно вернул строку, но на следующем этапе возникла ошибка из-за необходимости применения цвета, при этом не существует механизма для её исправления.

/* data-c="red" — and the element still renders transparent */
.swatch { background-color: attr(data-c, gold); }

Вывод прост: когда целевое свойство не является content, обязательно укажите тип.

Шаблоны замены скриптов

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

Ширина из атрибута data

В маркировке указано простое число.

<div class="bar" data-fill="87"></div>

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

.bar {
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #4fc3f7, #2dd4bf);
  width: attr(data-fill %, 0%);
}

Цвет, выбранный в CMS

.chip { background-color: attr(data-brand type(<color>), #888); }

Цвет бренда, выбранный редактором контента, является данными, а не элементом дизайна. С помощью функции attr() его можно напрямую задать в шаблоне стилей, без необходимости добавления встроенных стилей. Поскольку проверка формата <color> происходит в браузере, ошибка редактора приводит лишь к использованию серой замены вместо некорректного CSS.

Анимации с задержками для элементов списка

Эффект постепенного появления элементов обычно реализуется путем задания встроенного стиля внутри цикла отрисовки. Однако индекс уже является частью маркировки и не требует преобразования в свойство стиля.

<li data-i="0">Inbox</li>
<li data-i="1">Drafts</li>
<li data-i="2">Sent</li>

Каждый элемент считывает свой собственный индекс в виде числа, а функция calc() преобразует его в значение задержки.

li {
  --i: attr(data-i type(<number>), 0);
  animation: fade-in .45s both;
  animation-delay: calc(var(--i) * .09s);
}

Если атрибут уже содержит полную продолжительность, сокращение в виде единицы s позволяет считывать её напрямую.

/* or, if the attribute already holds a duration */
li { animation-delay: attr(data-delay s, 0s); }

Передача индекса через --i имеет дополнительное преимущество: шаг тайминга становится единой CSS-константой. Изменив .09s в одном месте, все списки с задержкой на сайте автоматически примут новый ритм.

Уникальное значение view-transition-name для каждой карточки

Эта схема позволяет реализовать то, что раньше было невозможно. Каждый элемент, участвующий в переходе между видами, должен иметь своё уникальное значение view-transition-name; ранее это означало необходимость создания отдельного правила для каждой карточки или присвоения имён из скрипта. Теперь одно правило управляет всеми карточками.

.card {
  view-transition-name: attr(id type(<custom-ident>), none);
  view-transition-class: card;
}

Обратите внимание, что здесь используется атрибут id, а не атрибут data-*. Функция attr() может считывать любой атрибут элемента, включая id, href, title, colspan или lang. Пространство имен data-* предназначено для хранения пользовательских данных страницы в HTML. Сочетание этого имени с view-transition-class позволяет стилизовать анимации всех карточек с помощью одного селектора, несмотря на то, что у каждой карточки есть уникальное имя.

Полезным способом проверки этих правил является временное удаление базового кода, основанного на скриптах, и проверка того, остается ли стилизация; если да, значит, работает функция attr().

Псевдоэлементы: случай без решения

У каждого из остальных преимуществ, описанных в этом руководстве, есть альтернатива: вы всегда можете задать пользовательское свойство непосредственно в элементе. Псевдоэлементы отличаются. element.style направлен на сам элемент, а ::before или ::after не являются узлами DOM, поэтому к ним невозможно привязать стили непосредственно. Ранее рассматривались варианты с пользовательским свойством, унаследованным от хост-элемента (что всё равно требует настройки стилей для самого хоста), или с генерируемым таблицей стилей. В отличие от этого, атрибут хост-элемента может быть прочитан непосредственно из псевдоэлементов.

Вот метрика, у которой единственным данным является один атрибут.

<div class="meter" data-pct="72"></div>

Этикетка использует классическую функцию строк attr() в своем content, которая работает во всех браузерах.

.meter::before {
  content: attr(data-pct) "% complete";
}

Стрелка использует специальный формат для задания своей ширины на основе того же атрибута.

.meter::after {
  content: "";
  display: block;
  height: 10px;
  width: attr(data-pct %, 0%);
  background: linear-gradient(90deg, #fbbf24, #f472b6);
}

Одно атрибут используется для двух псевдоэлементов, и ни один из них не требует дополнительного дочернего элемента. Бейджи, кольца прогресса, текст подсказок, порядковые префиксы, суффиксы единиц измерения и метки данных графика — все они соответствуют этой схеме: псевдоэлемент, который нуждается в числе, уже присутствующем у хост-элемента. Раньше, до появления функции attr(), это число приходилось вводить дважды — один раз как атрибут для текста, а другой раз как пользовательское свойство для геометрии, причем эти значения могли отличаться. Теперь его достаточно ввести один раз.

Функция attr() считывает только элемент, который форматируется

Эта функция считывает атрибуты элемента, к которому применяется правило. Она не проверяет родителей или братьев-сестер элемента, и аналога функции closest() не существует. Из-за использования резервного варианта ошибка происходит бесшумно, поэтому практически каждый делает её хотя бы один раз.

Рассмотрим раздел, в котором задаётся цвет акцента для его содержимого.

<section class="theme" data-accent="#4fc3f7">
  <h2>Title</h2>
</section>

Чтение этого атрибута у заголовка не приносит никакой пользы, поскольку у заголовка он отсутствует.

/* WRONG — this reads the h2, which has no data-accent */
.theme h2 { color: attr(data-accent type(<color>), #888); }
/* every heading is #888, forever, with no error */

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

/* RIGHT — read it once on the element that has it, then inherit */
.theme    { --accent: attr(data-accent type(<color>), #888); }
.theme h2 { color: var(--accent); }
.theme a  { border-bottom: 2px solid var(--accent); }

Наследование обеспечивает распространение этого значения. Кроме того, теперь любой поддерево может переопределить цвет акцента с помощью обычного объявления --accent, чего никогда не смогла бы обеспечить прямая методика attr().

Почему URL запрещены

Каждое значение, генерируемое методом attr(), помечается как attr()-tainted, и такое загрязнённое значение никогда не может быть использовано для формирования URL, независимо от пути. Оба этих объявления не оказывают никакого воздействия:

span[data-icon] { background-image: url(attr(data-icon)); }
span[data-icon] { background: image-set(attr(data-icon)); }

Загрязнение передаётся вместе с значением. Его перенаправление через пользовательское свойство, обёртка в функции src() или image(), либо вложение в другие функции любой глубины оставляет это загрязнение на месте. В любом месте, куда оно попадает в контекст URL, декларация становится недействительной при вычислении значения.

Модель угроз объясняет это правило. Значения атрибутов часто находятся под влиянием пользователей: имена для отображения, уникальные идентификаторы CMS, заголовки комментариев. Если стильный лист может преобразовать такое значение в сетевой запрос, любой, кто может вносить изменения в это поле, сможет заставить браузер каждого посетителя загрузить адрес по своему выбору вместе с тем, что браузер обычно прикрепляет к таким запросам. Решение этой проблемы в спецификации позволило производителям браузеров договориться о включении этой функции. Объявление WebKit на Interop 2026 ясно указывает на это: поскольку вопросы безопасности были решены в спецификации, все движки заявили о готовности включить эту возможность и сделать это совместимо.

Имейте в виду ограничения такой защиты. Любой контент, находящийся в атрибуте, доступен для чтения любым скриптом на странице, виден в режиме просмотра исходного кода и передается в теле HTML. Запрет на URL закрывает один путь утечки данных; он не делает атрибуты приватными. Никогда не храните в них секретную информацию.

Постепенное обнаружение поддержки и реализации

Безопасный подход заключается в использовании простого базового формата, понятного всем браузерам, с добавлением версии в формате строк для движков, которые её поддерживают. Начните с базового формата, в данном случае реализованного с помощью встроенной пользовательской свойства.

.bar {
  width: var(--fill, 0%);          /* baseline, everyone */
}

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

@supports (width: attr(x %)) {
  .bar {
    width: attr(data-fill %, 0%);  /* modern browsers take over */
  }
}

Тот же тест доступен во время выполнения, если ваш код требует разветвления логики.

// the same answer at runtime, if you need to branch in code
if (CSS.supports("width", "attr(x %)")) {
  // typed attr() is available
}

Тестирование с использованием реальной свойности

Будьте осторожны с фрагментами для обнаружения, использующими имена свойств-заменители, такие как @supports (x: attr(x type(*))), которые встречались в справочной документации. Свойства CSS с именем x не существует, и каждый браузер возвращает значение false при запросе на поддержку свойства, которого он не знает, поэтому тест проваливается даже в браузерах, где данная функция работает. Используйте существующее свойство. Запрос @supports (width: attr(x %)) является надежным: width — это реальное свойство, а attr(x %) может быть обработано только движками, реализующими сокращение для единиц измерения. Стоит проверить текущую справку MDN по функции attr(), поскольку примеры в документации действительно могут исправляться.

Использование каскадирования вместо @supports

Более краткий вариант исключает блок @supports и позволяет каскадированию принять решение.

.bar {
  width: var(--fill, 0%);        /* everyone */
  width: attr(data-fill %, 0%);  /* supporting browsers override */
}

Браузер, который не может распарсить элемент attr() внутри атрибута width, игнорирует такое объявление во время парсинга, поэтому применяется объявление из предыдущей строки. Такое поведение обусловлено способом, которым механизм каскадирования обрабатывает недействительные объявления. Тем не менее формат @supports явно указывает намерение автора и требует лишь нескольких дополнительных строк, поэтому его следует использовать, если вы хотите, чтобы поведение было понятно будущим читателям; при этом необходимо проверить более краткий формат в браузере, не поддерживающем его, прежде чем полагаться на него.

В обоих вариантах необходимо сохранить запасной вариант прямо внутри самого элемента attr(). В поддерживающем браузере отсутствие атрибута не приводит к использованию объявления var(), расположенного выше; объявление attr() уже победило в процессе каскадирования, поэтому значение атрибута width становится auto.

Поддержка браузерами на момент написания

Поддержка быстро меняется, поэтому рассматривайте эти данные как моментальную снимку и подтверждайте их на сайте Can I use перед тем, как полагаться на них. По состоянию на август 2026 года примерно 70 процентов пользователей в мире использовали браузер с функцией attr():

• Chrome 133 и новее: поддерживается; первым внедрил эту функцию (см. объявление Chrome for Developers).
• Edge 133 и новее: поддерживается, следуя схеме выпусков Chromium.
• Firefox 155 и новее: поддерживается; присутствует, но по умолчанию отключен в версиях с 152 по 154.
• Samsung Internet 29 и новее: поддерживается.
• Safari на десктопе: ещё не выпущен; доступен только в режиме Technology Preview.
• Safari на iOS: ещё не выпущен, и поскольку все браузеры iOS используют WebKit, это касается всех браузеров iOS.

Специальная функция attr(), принимающая только строку, внутри content — это отдельный случай. Она была широко доступна с самого начала уже десять лет, ещё со очень ранних версий всех основных движков. Если вам нужно лишь content: attr(data-label), вы можете использовать её без каких-либо из вышеупомянутых мер предосторожности.

Interop 2026 включает функцию attr() в список своих ключевых направлений. Interop — это ежегодное сотрудничество, в рамках которого Apple, Google, Microsoft и Mozilla совместно с Igalia и Bocoup выбирают функции, отсутствующие или не работающие в хотя бы одном движке, и берут на себя обязательство улучшить их в течение года. Прогресс отслеживается на публичной панели управления на основе совместных тестов веб-платформы. Это самый явный публичный сигнал того, что разработка поддержки Safari ведется, но это лишь обязательство, а не дата выпуска. Ожидайте резервное решение на оставшуюся часть 2026 года. Чтобы узнать более подробно о методах безопасной разработки и внедрения нового CSS, ознакомьтесь с безопасным внедрением современного CSS.

Выбор между attr() и JavaScript

Ни один из инструментов не является лучшим во всех случаях. Приведенное ниже разделение служит практическим руководством.

Преферируйте attr(), когда:

• В маркировке уже содержится значение. Вывод его в скрипт лишь для того, чтобы снова установить его на том же элементе, ничего не дает.
• Оно должно находиться прямо в первом фрейме. Атрибут существует сразу после того, как парсер создает элемент, в то время как скрипт выполняется позже и может привести к видимой корректировке.
• Псевдоэлементу нужно значение. Встроенные стили, заданные через element.style, не могут воздействовать на ::before или ::after.
• У вас действует строгая политика безопасности контента. Встроенные стили требуют настройки unsafe-inline или использования временного идентификатора; атрибуты data не требуют ничего подобного.

Элементы добавляются динамически. Новые вставленные узлы берут свои стили из уже существующих правил; не требуется повторной обработки, и нет необходимости в использовании MutationObserver для отслеживания структуры дерева.

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

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

Используйте JavaScript в следующих случаях:

• Значение не имеет причин существовать в DOM. Результаты измерений от ResizeObserver или обработчика прокрутки не следует сначала преобразовывать в атрибуты.
• Он обновляет каждый кадр анимации. Вызов el.style.setProperty('--x', v) более прямой и позволяет избежать записи атрибута.
• Полезная нагрузка велика, вложена или конфиденциальна. Любой контент в атрибуте является публично видимым строковым значением.
• Вам сегодня нужен Safari, и значение имеет значение. Индикатор прогресса, застрявший на нуле в одном браузере, — это дефект, а не гибкий вариант обхода.

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

Чек-лист рисков

• Всегда предусматривайте вариант обхода. Отсутствие или невозможность парсинга значения без такого варианта приводит к IACVT и свойству unset, а не к предыдущей декларации.
• Пустой атрибут — это не отсутствующий атрибут. Если тип не указан, data-x="" возвращает пустую строку, и механизм запасного значения никогда не срабатывает.
• Отсутствие указания типа означает использование литерального текста. Выражение background-color: attr(data-c, gold) при значении data-c="red" ничего не отображает; необходимо указать тип.
• Нет функций url() и image-set(). Такая ситуация создается намеренно и сохраняется даже при наличии пользовательских свойств.
• Читается только совпавший элемент. Для прямых предков значение следует сохранять в пользовательском свойстве, чтобы оно наследовалось.
• Для сокращений единиц измерения требуются простые числа. Используйте data-w="10", а не data-w="10px".
• Недействительное значение запасного значения приводит к сбою при парсинге, что является более ранним и отличным по характеру сбоем, чем отсутствие атрибута.
• <number> сам по себе не может задавать размеры чего-либо. Храните его и умножайте в функции calc().
• Атрибуты являются публичными. Не храните в них конфиденциальную информацию.
• Протестируйте функционал с реальным свойством, например, @supports (width: attr(x %)).
• На момент написания Safari ещё не включил его, поэтому сохраняйте базовую версию для всего важного.

Заключение

Функция attr() представляет собой небольшое изменение синтаксиса, которое оказывает значительное влияние на архитектуру: значения, уже присутствующие в HTML, больше не требуют использования скриптов для применения стилей. Эта функция способствует повышению точности. Необходимо указывать тип, всегда задавать альтернативный вариант, читать атрибут с элемента, на котором он расположен, и передавать его через пользовательские свойства, принимая при этом, что URL постоянно недоступны. До выхода обновлений в Safari каждое критически важное использование должно сопровождаться базовым решением, что позволяет начать использование данной модели уже сегодня; по мере распространения поддержки автоматически будет применяться соответствующий стиль. Если вам нужны точные правила парсинга, официальное определение содержится в проекте CSS Values and Units Level 5.