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

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>.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
attr()Chrome Full support 2Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 9Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
<fallback>
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
<type-or-unit>
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

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