attr()

Примітка: Функція attr() може буті використана з будь-якою властивісттю CSS, але підтримка для властивостей інших ніж content є експериментальною, і підтримка для параметру type-or-unit обмежена.

Функція attr() в CSS використовується для повернення значення атрибуту вибраного елементу і використання його в таблиці стилів. Вона може бути використана на псевдоелементах, і в цьому випадку повертається значення атрибута для використання в якості тексту псевдоелемента.

/* Просте застосування */
attr(data-count);
attr(title);

/* З параметром type */
attr(src url);
attr(data-count number);
attr(data-width px);

/* З параметром  fallback */
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");

Синтаксис

Значення

attribute-name
Це ім'я атрибута елемента HTML, на який функція посилається у CSS.
<type-or-unit> This is an experimental API that should not be used in production code.
Це ключове слово, що представляє або тип значення атрибута, або його одиницю, оскільки в HTML деякі атрибути мають неявні одиниці. Якщо використання <type-or-unit> як значення для даного атрибуту недійсне, вираз з attr() також буде недійсним. Якщо пропущено, за замовчуванням використовується string. Список дійсних значень:
Ключове слово Асоційований тип Коментар Значення за замовчуванням
string <string> Значення атрибута трактується як CSS <string>. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи. Пустий рядок.
color  This is an experimental API that should not be used in production code. <color> Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS <string>.
Провідні і кінцеві прогалини будуть прибрані.
currentColor
url  This is an experimental API that should not be used in production code. <url> Значення атрибута аналізується як CSS рядок що використовується всередині CSS функції url().
Відносна URL-адреса вирішується відносно оригінального документа, а не щодо таблиці стилів.
Провідні і кінцеві прогалини будуть прибрані.
The url about:invalid that points to a non-existent document with a generic error condition.
integer  This is an experimental API that should not be used in production code. <integer> Значення атрибута аналізується як CSS <integer>. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані.
0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
number  This is an experimental API that should not be used in production code. <number> Значення атрибута аналізується як CSS <number>. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані.
0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
length  This is an experimental API that should not be used in production code. <length> Значення атрибута аналізується як CSS <length> вимір, що вміщує одиниці виміру (наприклад, 12.5em). Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини
Провідні і кінцеві прогалини будуть прибрані.
0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc  This is an experimental API that should not be used in production code. <length> Значення атрибута аналізується як CSS <number>, що не містить одиниць виміру (e.g. 12.5), і трактується як <length> з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини
Провідні і кінцеві прогалини будуть прибрані.
0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
angle  This is an experimental API that should not be used in production code. <angle> Значення атрибута аналізується як CSS <angle> вимір, із зазначеними одиницями віміру (наприклад, 30.5deg). Якщо воно не є дійсним значенням, тобто не є мірою кута або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані.
0deg, або, якщо 0deg не є дійсним значенням для властивості, мінімальним значенням властивості.
deg, grad, rad  This is an experimental API that should not be used in production code. <angle> Значення атрибута аналізується як CSS <number>, тобто без одиниць виміру (наприклад, 12.5), і трактується як  <angle> із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані.
0deg, або, якщо 0deg не є дійсним значенням для властивості, мінімальним значенням властивості.
time  This is an experimental API that should not be used in production code. <time> Значення атрибута аналізується як CSS <time> вимір, із зазначеними одиницями віміру (наприклад, 30.5ms). Якщо воно не є дійсним значенням, тобто не є значенням часу або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані.
0s, або, якщо 0s не є дійсним значенням для властивості, мінімальним значенням властивості.
s, ms  This is an experimental API that should not be used in production code. <time> Значення атрибута аналізується як CSS <number>, що не містить одиниць виміру (наприклад, 12.5), і трактується як <time> із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані..
0s, або, якщо 0s не є дійсним значенням для властивості, мінімальним значенням властивості.
frequency  This is an experimental API that should not be used in production code. <frequency> Значення атрибута аналізується як CSS <frequency> вимір, із зазначеними одиницями віміру (наприклад, 30.5kHz). Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням. 0Hz, або, якщо 0Hz не є дійсним значенням для властивості, мінімальним значенням властивості.
Hz, kHz  This is an experimental API that should not be used in production code. <frequency> Значення атрибута аналізується як CSS <number>, тобто без одиниць виміру (наприклад, 12.5), і трактується як <frequency> із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Провідні і кінцеві прогалини будуть прибрані.
0Hz, або, якщо 0Hz не є дійсним значенням для властивості, мінімальним значенням властивості.
%  This is an experimental API that should not be used in production code. <percentage> Значення атрибута аналізується як CSS <number>, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як <percentage>. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.
Провідні і кінцеві прогалини будуть прибрані.
0%, або, якщо 0% не є дійсним значенням для властивості, мінімальним значенням властивості.
<fallback>  This is an experimental API that should not be used in production code.
Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення <fallback> повинно мати тип, визначений <type-or-unit>. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного <type-or-unit>.

Формальний синтаксис

attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )

where
<type-or-unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | Q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | Hz | kHz | %

Приклади

Властивість content

HTML

<p data-foo="hello">world</p>

CSS

[data-foo]::before {
  content: attr(data-foo) " ";
}

Результат

<color> значення

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

HTML

<div class="background" data-background="lime">background expect to be red if your browser does not support adavanced usage of attr()</div>

CSS

.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

Результат

Специфікації

Специфікація Статус Коментар
CSS Values and Units Module Level 4
The definition of 'attr()' in that specification.
Editor's Draft Без змін.
CSS Values and Units Module Level 3
The definition of 'attr()' in that specification.
Candidate Recommendation

Додано два не обов'язкові параметри;
може використовуватися зі всіма властивостями;
може повертати інші значення, крім <string>.

Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.
CSS Level 2 (Revision 1)
The definition of 'attr()' in that specification.
Recommendation Обмежено властивісттю content;
завжди повертає <string>.

Сумісність браузерів

BCD tables only load in the browser

Також перегляньте