diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/uk/web/css/attr()/index.html | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/uk/web/css/attr()/index.html')
-rw-r--r-- | files/uk/web/css/attr()/index.html | 265 |
1 files changed, 0 insertions, 265 deletions
diff --git a/files/uk/web/css/attr()/index.html b/files/uk/web/css/attr()/index.html deleted file mode 100644 index 85afa37991..0000000000 --- a/files/uk/web/css/attr()/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -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;"><type-or-unit></code> {{Experimental_Inline}}</dt> - <dd>Це ключове слово, що представляє або тип значення атрибута, або його одиницю, оскільки в HTML деякі атрибути мають неявні одиниці. Якщо використання <type-or-unit> як значення для даного атрибуту недійсне, вираз з 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("<string>")}}</td> - <td>Значення атрибута трактується як CSS {{CSSxRef("<string>")}}. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи.</td> - <td>Пустий рядок.</td> - </tr> - <tr> - <td><code>color</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<color>")}}</td> - <td>Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS {{CSSxRef("<string>")}}.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>currentColor</code></td> - </tr> - <tr> - <td><code>url</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<url>")}}</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("<integer>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<integer>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю 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("<number>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю 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("<length>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<length>")}} вимір, що вміщує одиниці виміру (наприклад, <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("<length>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (e.g. <code>12.5</code>), і трактується як {{CSSxRef("<length>")}} з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю 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("<angle>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<angle>")}} вимір, із зазначеними одиницями віміру (наприклад, <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("<angle>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<angle>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю 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("<time>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<time>")}} вимір, із зазначеними одиницями віміру (наприклад, <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("<time>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<time>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю 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("<frequency>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<frequency>")}} вимір, із зазначеними одиницями віміру (наприклад, <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("<frequency>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, <code>12.5</code>), і трактується як {{CSSxRef("<frequency>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю 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("<percentage>")}}</td> - <td>Значення атрибута аналізується як CSS {{CSSxRef ("<number>")}}, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як {{CSSxRef ("<percentage>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.<br> - Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.<br> - Провідні і кінцеві прогалини будуть прибрані.</td> - <td><code>0%</code>, або, якщо <code>0%</code> не є дійсним значенням для властивості, мінімальним значенням властивості.</td> - </tr> - </tbody> - </table> - </dd> - <dt><code><fallback></code> {{Experimental_Inline}}</dt> - <dd>Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення <fallback> повинно мати тип, визначений <type-or-unit>. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного <type-or-unit>.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{CSSSyntax}} - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Властивість_content">Властивість content</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p data-foo="hello">world</p></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="<color>_значення"><color> значення</h3> - -<p>{{SeeCompatTable}}</p> - -<div id="color-value"> -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><div class="background" data-background="lime">background expect to be red if your browser does not support adavanced usage of attr()</div></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("<string>")}}.</p> - Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Обмежено властивісттю {{CSSxRef("content")}};<br> - завжди повертає {{CSSxRef("<string>")}}.</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> |