diff options
Diffstat (limited to 'files/ru/web/css/attr()/index.html')
| -rw-r--r-- | files/ru/web/css/attr()/index.html | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html new file mode 100644 index 0000000000..dfcd64f78f --- /dev/null +++ b/files/ru/web/css/attr()/index.html @@ -0,0 +1,202 @@ +--- +title: attr +slug: Web/CSS/attr() +translation_of: Web/CSS/attr() +--- +<div>{{CSSRef}}</div> + +<h2 id="Описание">Описание</h2> + +<p>С помощью функции <a href="/en-US/docs/Web/CSS">CSS</a> <code>attr()</code> можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a>.</p> + +<p>Функцию <code>attr()</code> можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:js notranslate">/* Пример простого использования */ +attr(data-count); +attr(title); + +/* С типом */ +attr(src url); +attr(data-count number); +attr(data-width px); + +/* с фоллбэком */ +attr(data-count number, 0); +attr(src url, ''); +attr(data-width px, inherit); +attr(data-something, 'default'); +</pre> + +<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> + <div class="translate-form__result-text typo typo_text_l i-bem typo_js_inited">Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <code><type-or-unit></code> в качестве значения для данного атрибута недопустимо, выражение <code>attr()</code> также будет недопустимым. Если этот параметр опущен, по умолчанию используется <code>string</code> . Список допустимых значений:</div> + + <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>{{cssxref("<string>")}}</td> + <td>The attribute value is treated as a CSS {{cssxref("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.</td> + <td>An empty string</td> + </tr> + <tr> + <td><code>color</code> {{experimental_inline}}</td> + <td>{{cssxref("<color>")}}</td> + <td>The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.<br> + Leading and trailing spaces are stripped.</td> + <td><code>currentColor</code></td> + </tr> + <tr> + <td><code>url</code> {{experimental_inline}}</td> + <td>{{cssxref("<url>")}}</td> + <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br> + Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br> + Leading and trailing spaces are stripped.</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>{{cssxref("<integer>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>number</code> {{experimental_inline}}</td> + <td>{{cssxref("<number>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>length</code> {{experimental_inline}}</td> + <td>{{cssxref("<length>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br> + If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</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>{{cssxref("<length>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>angle</code> {{experimental_inline}}</td> + <td>{{cssxref("<angle>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td> + <td>{{cssxref("<angle>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>time</code> {{experimental_inline}}</td> + <td>{{cssxref("<time>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td> + <td>{{cssxref("<time>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>frequency</code> {{experimental_inline}}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td> + <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>%</code> {{experimental_inline}}</td> + <td>{{cssxref("<percentage>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><fallback></code> {{experimental_inline}}</dt> + <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code><fallback></code> value must be of the type defined by <code><type-or-unit></code>. If not set, CSS will use the default value defined for each <code><type-or-unit></code>.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: css notranslate">p::before { + content: attr(data-foo) " "; +} +</pre> + +<pre class="brush: html notranslate"><p data-foo="hello">world</p> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Examples", '100%', '80')}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#attr', 'attr()')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("css.types.attr")}}</p> |