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

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

{{CSSSyntax}}

Приклади

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

HTML

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

CSS

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

Результат

{{EmbedLiveSample("content_property", "100%", 50)}}

<color> значення

{{SeeCompatTable}}

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);
}

Результат

{{EmbedLiveSample("color-value", "100%", 50)}}

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

Специфікація Статус Коментар
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}} {{Spec2("CSS4 Values")}} Без змін.
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}} {{Spec2("CSS3 Values")}}

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

Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}} {{Spec2("CSS2.1")}} Обмежено властивісттю {{CSSxRef("content")}};
завжди повертає {{CSSxRef("<string>")}}.

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

{{Compat("css.types.attr")}}

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