attr()

attribute-name

Имя атрибута HTML-элемента, на который ссылается CSS.

<type-or-unit>

Ключевое слово, представляющее либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута неверно, выражение attr() также будет неверным. Если оно опущено, по умолчанию используется string. Список допустимых значений:

string

Значение атрибута обрабатывается как CSS-<string>. Оно НЕ перерабатывается, и, в частности, символы используются как есть, вместо того, чтобы CSS-экранирование преобразовывалось в другие символы.

Значение по умолчанию: пустая строка.

color

Значение атрибута анализируется как шестнадцатеричный код (3- или 6-значный) или ключевое слово. Оно должно быть допустимым значением CSS-<string>. Пробелы в начале и конце удаляются.

Значение по умолчанию: currentcolor.

url

Значение атрибута анализируется как строка, используемая внутри CSS-url() функции. Относительные URL-адреса разрешаются относительно исходного документа, а не относительно таблицы стилей. Пробелы в начале и конце удаляются.

Значение по умолчанию: URL about:invalid, указывающий на несуществующий документ с универсальным кодом ошибки.

integer

Значение атрибута анализируется как CSS-<integer>. Если оно недействительно, то есть не является целым числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0, или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

number

Значение атрибута анализируется как CSS-<number>. Если оно недействительно, то есть не является числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0, или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

length

Значение атрибута анализируется как размер CSS-<length>, включая единицу (например, 12.5em). Если оно недействительно, то есть не является размером или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Если заданная единица — относительная, attr() вычисляет её как абсолютную. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0, или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, или pc

Значение атрибута анализируется как CSS-<number> без единицы (например, 12.5) и интерпретируется как <length> с указанной единицей. Если оно недействительно, то есть не является числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Если заданная единица — относительная, attr() вычисляет её как абсолютную. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0, или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

angle

Значение атрибута анализируется как размер CSS-<angle>, включая единицу (например, 30.5deg). Если оно недействительно, то есть не является углом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0deg, или, если 0deg не является допустимым значением для свойства, минимальное значение свойства.

deg, grad, rad

Значение атрибута анализируется как CSS-<number> без единицы (например, 12.5) и интерпретируется как <angle> с указанной единицей. Если оно недействительно, то есть не является числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0deg, или, если 0deg не является допустимым значением для свойства, минимальное значение свойства.

time

Значение атрибута анализируется как размер CSS-<time>, включая единицу (например, 30.5ms). Если оно недействительно, то есть не является временной величиной или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0s, или, если 0s не является допустимым значением для свойства, минимальное значение свойства.

s, ms

Значение атрибута анализируется как CSS-<number> без единицы (например, 12.5) и интерпретируется как <time> с указанной единицей. Если оно недействительно, то есть не является числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0s, или, если 0s не является допустимым значением для свойства, минимальное значение свойства.

frequency

Значение атрибута анализируется как размер CSS-<frequency>, включая единицу (например, 30.5kHz). Если оно недействительно, то есть не является частотой или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию.

Значение по умолчанию: 0Hz, или, если 0Hz не является допустимым значением для свойства, минимальное значение свойства.

Hz, kHz

Значение атрибута анализируется как CSS-<number> без единицы (например, 12.5) и интерпретируется как <frequency> с указанной единицей. Если оно недействительно, то есть не является числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0Hz, или, если 0Hz не является допустимым значением для свойства, минимальное значение свойства.

%

Значение атрибута анализируется как CSS-<number> без единицы (например, 12.5) и интерпретируется как <percentage>. Если оно недействительно, то есть не является числом или выходит за допустимый диапазон для свойства CSS, используется значение по умолчанию. Если заданное значение используется как размер, attr() вычисляет его как абсолютный размер. Пробелы в начале и конце удаляются.

Значение по умолчанию: 0%, или, если 0% не является допустимым значением для свойства, минимальное значение свойства.

<fallback>

Значение, используемое, если соответствующий атрибут отсутствует или содержит недопустимое значение. Если не указано, CSS использует значение по умолчанию, определённое для каждого <type-or-unit>.

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<attr-name> = 
  [ <ident-token> '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  string            |
  <attr-unit>       

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function  

В этом примере мы добавляем значение атрибута data-foo data-* глобального атрибута к содержимому элемента <p>.

HTML

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

CSS

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

Результат

В этом примере мы задаём значение CSS background-color значению атрибута data-background data-* глобального атрибута, назначенного элементу <div>.

HTML

<div class="background" data-background="lime">
  background expected to be red if your browser does not support advanced usage
  of attr()
</div>

CSS

.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

Результат

В этом примере мы добавляем значение data-browser data-* глобального атрибута к элементу <p>. Если атрибут data-browser отсутствует у элемента <p>, мы добавляем значение по умолчанию "Неизвестно".

HTML

<p data-browser="Firefox">My favorite browser is:</p>
<p>Your favorite browser is:</p>

CSS

p::after {
  content: " " attr(data-browser, "Unknown");
  color: tomato;
}

Результат

• Селекторы атрибутов
• HTML data-* атрибуты
• SVG data-* атрибуты