path: root/files/uk/web/css/attr()/index.html

---
title: attr()
slug: Web/CSS/attr()
tags:
  - CSS
  - CSS функція
  - Web
  - attr
  - Макет
translation_of: Web/CSS/attr()
---
<div>{{CSSRef}}</div>

<div></div>

<div></div>

<div class="blockIndicator note"><strong>Примітка:</strong> Функція <code>attr()</code> може буті використана з будь-якою властивісттю CSS, але підтримка для властивостей інших ніж {{CSSxRef("content")}} є експериментальною, і підтримка для параметру type-or-unit обмежена.</div>

<div></div>

<p>Функція <strong><code>attr()</code></strong> в <a href="/en-US/docs/Web/CSS">CSS</a> використовується для повернення значення атрибуту вибраного елементу і використання його в таблиці стилів. Вона може бути використана на псевдоелементах, і в цьому випадку повертається значення атрибута для використання в якості тексту псевдоелемента.</p>

<pre class="brush: css no-line-numbers notranslate">/* Просте застосування */
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");

</pre>

<h2 id="Синтаксис">Синтаксис</h2>

<h3 id="Значення">Значення</h3>

<dl>
 <dt><code>attribute-name</code></dt>
 <dd>Це ім'я атрибута елемента HTML, на який функція посилається у CSS.</dd>
 <dt><code style="white-space: nowrap;">&lt;type-or-unit&gt;</code> {{Experimental_Inline}}</dt>
 <dd>Це ключове слово, що представляє або тип значення атрибута, або його одиницю, оскільки в HTML деякі атрибути мають неявні одиниці. Якщо використання &lt;type-or-unit&gt; як значення для даного атрибуту недійсне, вираз з attr() також буде недійсним. Якщо пропущено, за замовчуванням використовується string. Список дійсних значень:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Ключове слово</th>
    <th scope="col">Асоційований тип</th>
    <th scope="col">Коментар</th>
    <th scope="col">Значення за замовчуванням</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>string</code></td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;string&gt;")}}</td>
    <td>Значення атрибута трактується як CSS {{CSSxRef("&lt;string&gt;")}}. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи.</td>
    <td>Пустий рядок.</td>
   </tr>
   <tr>
    <td><code>color</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;color&gt;")}}</td>
    <td>Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS {{CSSxRef("&lt;string&gt;")}}.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>currentColor</code></td>
   </tr>
   <tr>
    <td><code>url</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;url&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS рядок що використовується всередині CSS функції <code>url()</code>.<br>
     Відносна URL-адреса вирішується відносно оригінального документа, а не щодо таблиці стилів.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
   </tr>
   <tr>
    <td><code>integer</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;integer&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;integer&gt;")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>number</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;number&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>length</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;length&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;length&gt;")}} вимір, що вміщує одиниці виміру (наприклад, <code>12.5em</code>). Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;length&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, що не містить одиниць виміру (e.g. <code>12.5</code>), і трактується як {{CSSxRef("&lt;length&gt;")}} з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0</code>, або, якщо <code>0</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>angle</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;angle&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;angle&gt;")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5deg</code>). Якщо воно не є дійсним значенням, тобто не є мірою кута або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;angle&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як  {{CSSxRef("&lt;angle&gt;")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0deg</code>, або, якщо <code>0deg</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>time</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;time&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;time&gt;")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5ms</code>). Якщо воно не є дійсним значенням, тобто не є значенням часу або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>s</code>, <code>ms</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;time&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, що не містить одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("&lt;time&gt;")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані..</td>
    <td><code>0s</code>, або, якщо <code>0s</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>frequency</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;frequency&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;frequency&gt;")}} вимір, із зазначеними одиницями віміру (наприклад, <code>30.5kHz</code>). Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.</td>
    <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>Hz</code>, <code>kHz</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;frequency&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef("&lt;number&gt;")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("&lt;frequency&gt;")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0Hz</code>, або, якщо <code>0Hz</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
   <tr>
    <td><code>%</code> {{Experimental_Inline}}</td>
    <td style="white-space: nowrap;">{{CSSxRef("&lt;percentage&gt;")}}</td>
    <td>Значення атрибута аналізується як CSS {{CSSxRef ("&lt;number&gt;")}}, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як {{CSSxRef ("&lt;percentage&gt;")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br>
     Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.<br>
     Провідні і кінцеві прогалини будуть прибрані.</td>
    <td><code>0%</code>, або, якщо <code>0%</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>&lt;fallback&gt;</code> {{Experimental_Inline}}</dt>
 <dd>Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення &lt;fallback&gt; повинно мати тип, визначений &lt;type-or-unit&gt;. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного &lt;type-or-unit&gt;.</dd>
</dl>

<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>

<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>

<h2 id="Приклади">Приклади</h2>

<h3 id="Властивість_content">Властивість content</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css highlight[2] notranslate">[data-foo]::before {
  content: attr(data-foo) " ";
}</pre>

<h4 id="Результат">Результат</h4>

<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>

<h3 id="&lt;color>_значення">&lt;color&gt; значення</h3>

<p>{{SeeCompatTable}}</p>

<div id="color-value">
<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="background" data-background="lime"&gt;background expect to be red if your browser does not support adavanced usage of attr()&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<div class="hidden">
<pre class="brush: css notranslate">.background {
  height: 100vh;
}</pre>
</div>

<pre class="brush: css highlight[6] notranslate">.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}</pre>
</div>

<h4 id="Результат_2">Результат</h4>

<p>{{EmbedLiveSample("color-value", "100%", 50)}}</p>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
   <td>{{Spec2("CSS4 Values")}}</td>
   <td>Без змін.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td>
    <p>Додано два не обов'язкові параметри;<br>
     може використовуватися зі всіма властивостями;<br>
     може повертати інші значення, крім {{CSSxRef("&lt;string&gt;")}}.</p>
    Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Обмежено властивісттю {{CSSxRef("content")}};<br>
    завжди повертає {{CSSxRef("&lt;string&gt;")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_браузерів">Сумісність браузерів</h2>

<div class="hidden">Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо Ви хочете зробити свій внесок у дані перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам запит на отримання.</div>

<p>{{Compat("css.types.attr")}}</p>

<h2 id="Також_перегляньте">Також перегляньте</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></li>
 <li><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> attributes</a></li>
</ul>