From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/web/css/attr()/index.html | 265 +++++++++++++++++++++++++++++++++++++ 1 file changed, 265 insertions(+) create mode 100644 files/uk/web/css/attr()/index.html (limited to 'files/uk/web/css/attr()/index.html') diff --git a/files/uk/web/css/attr()/index.html b/files/uk/web/css/attr()/index.html new file mode 100644 index 0000000000..1a484489b4 --- /dev/null +++ b/files/uk/web/css/attr()/index.html @@ -0,0 +1,265 @@ +--- +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")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf