Nota: los attr() La función se puede usar con cualquier propiedad CSS, pero es compatible con propiedades que no sean content es experimental y el soporte para el parámetro tipo o unidad es escaso.

los attr()CSSLa función se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilo. También se puede utilizar en pseudoelementos, en cuyo caso se devuelve el valor del atributo en el elemento de origen del pseudoelemento.

/* Simple usage */attr(data-count);attr(title);/* With type */attr(src url);attr(data-count number);attr(data-width px);/* With fallback */attr(data-count number, 0);attr(src url,"");attr(data-width px, inherit);attr(data-something,"default");

Sintaxis

Valores

attribute-name
Es el nombre de un atributo del elemento HTML al que se hace referencia en CSS.
Esta es una API experimental que no debe usarse en código de producción.
Es una palabra clave que representa el tipo de valor del atributo o su unidad, ya que en HTML algunos atributos tienen unidades implícitas. Si el uso de como un valor para el atributo dado no es válido, el attr() La expresión también será inválida. Si se omite, por defecto es string. La lista de valores válidos es:

Palabra clave Tipo asociado Comentario Valor por defecto
string El valor del atributo se trata como CSS . NO se analiza y, en particular, los caracteres se utilizan tal cual en lugar de que los escapes de CSS se conviertan en caracteres diferentes. Una cuerda vacía.
color Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como un hash (hash de 3 o 6 valores) o una palabra clave. Debe ser un CSS válido valor.
Los espacios iniciales y finales se eliminan.		 currentcolor
url Esta es una API experimental que no debe usarse en código de producción. () El valor del atributo se analiza como una cadena que se utiliza dentro de un CSS url() función.
Las URL relativas se resuelven en relación con el documento original, no con la hoja de estilo.
Los espacios iniciales y finales se eliminan.		 La url about:invalid que apunta a un documento inexistente con una condición de error genérica.
integer Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS . Si no es válido, no es un número entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0, o si 0 no es un valor válido para la propiedad, el valor mínimo de la propiedad.
number Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS . Si no es válido, no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0, o si 0 no es un valor válido para la propiedad, el valor mínimo de la propiedad.
length Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS dimensión, que incluye la unidad (p. ej. 12.5em). Si no es válido, esa no es una longitud o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Si la unidad dada es una longitud relativa, attr() lo calcula a una longitud absoluta.
Los espacios iniciales y finales se eliminan.		 0, o si 0 no es un valor válido para la propiedad, el valor mínimo de la propiedad.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, o pc Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS , eso es sin la unidad (p. ej. 12.5), e interpretado como un con la unidad especificada. Si no es válido, no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Si la unidad dada es una longitud relativa, attr() lo calcula a una longitud absoluta.
Los espacios iniciales y finales se eliminan.		 0, o si 0 no es un valor válido para la propiedad, el valor mínimo de la propiedad.
angle Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS dimensión, que incluye la unidad (p. ej. 30.5deg). Si no es válido, no es un ángulo o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0deg, o si 0deg no es un valor válido para la propiedad, el valor mínimo de la propiedad.
deg, grad, rad Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS , eso es sin la unidad (p. ej. 12.5), e interpretado como un con la unidad especificada. Si no es válido, no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0deg, o si 0deg no es un valor válido para la propiedad, el valor mínimo de la propiedad.
time Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS dimensión, que incluye la unidad (p. ej. 30.5ms). Si no es válido, ese no es un tiempo o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0s, o si 0s no es un valor válido para la propiedad, el valor mínimo de la propiedad.
s, ms Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS , eso es sin la unidad (p. ej. 12.5), e interpretado como un con la unidad especificada. Si no es válido, no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0s, o si 0s no es un valor válido para la propiedad, el valor mínimo de la propiedad.
frequency Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS dimensión, que incluye la unidad (p. ej. 30.5kHz). Si no es válido, esa no es una frecuencia o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado. 0Hz, o si 0Hz no es un valor válido para la propiedad, el valor mínimo de la propiedad.
Hz, kHz Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS , eso es sin la unidad (p. ej. 12.5), e interpretado como un con la unidad especificada. Si no es válido, no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Los espacios iniciales y finales se eliminan.		 0Hz, o si 0Hz no es un valor válido para la propiedad, el valor mínimo de la propiedad.
% Esta es una API experimental que no debe usarse en código de producción. El valor del atributo se analiza como CSS , eso es sin la unidad (p. ej. 12.5), e interpretado como un . Si no es válido, no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor predeterminado.
Si el valor dado se usa como longitud, attr() lo calcula a una longitud absoluta.
Los espacios iniciales y finales se eliminan.		 0%, o si 0% no es un valor válido para la propiedad, el valor mínimo de la propiedad.
Esta es una API experimental que no debe usarse en código de producción.
El valor que se utilizará si falta el atributo asociado o si contiene un valor no válido. Si no se establece, CSS utilizará el valor predeterminado definido para cada .

Sintaxis formal

attr(  ?[,  ]? )
where 
 = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | Q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | Hz | kHz | %

Ejemplos de

propiedad de contenido

HTML

<pdata-foo="hello">worldp>

CSS

[data-foo]::beforecontent:attr(data-foo)" ";

Resultado

tecnología experimental
Verifique cuidadosamente la tabla de compatibilidad del navegador antes de usarlo en producción.

HTML

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

CSS

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

Especificaciones

Especificación Estado Comentario
Módulo de valores y unidades CSS, nivel 4
La definición de ‘attr ()’ en esa especificación.		 Borrador del editor Lo cambié para que funcione como var(). Valores de propiedad que involucran attr() son válidos en el momento del análisis y la validación del valor del atributo se difiere al tiempo del valor calculado.
Módulo de valores y unidades CSS, nivel 3
La definición de ‘attr ()’ en esa especificación.		 Recomendación candidata

Se agregaron dos parámetros opcionales;
se puede utilizar en todas las propiedades;
puede devolver valores distintos a .

Estos cambios son experimentales y pueden descartarse durante la fase CR si la compatibilidad con el navegador es demasiado pequeña.
CSS Nivel 2 (Revisión 1)
La definición de ‘attr ()’ en esa especificación.		 Recomendación Limitado al content propiedad;
siempre devuelve un .

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
attr() 2 12 1 8 9 3.1 ≤37 18 4 10.1 3.1 1.0
fallback No No Sin ver error 1448248. No No Sin ver error 204275. No No No No No No
type-or-unit No No Sin ver insecto 435426. No No Sin ver error 204275. No No No No No No

Ver también