La función css attr( ) Explicación y guía de uso en el valor de cualquier propiedad 22.3.17

La función css attr( ) Explicación y guía de uso en el valor de cualquier propiedad

Artículo publicado el 16 de Agosto de 2013. Actualizado el 20 de Junio de 2014

Las propiedades Css, dicho de forma general, pueden admitir tres tipos de valores:

1. Los especificados como válidos para cada propiedad.
2. Las "palabras clave" universales
3. Las funciones o expresiones Css

Los primeros los tienes recogidos en la definición de cada propiedad en la especificación correspondiente. Es obligado consultarlas para conocerlos y para estar al día en las novedades que los nuevos documentos o niveles introducen.

Los segundos o "palabras clave" universales de Css son eso, palabras que cualquier propiedad css admite como valor.

Y como tercera opción la especificación define las funciones o expresiones Css. De ellas en el blog ya fueron explicadas dos:

• La expresión toggle(): alternar valores en Css
• Función calc( ): operaciones matemáticas con css.
• La función attr( ). Y sobre ésta va el artículo.

La función attr( ) como valor de la propiedad Css

Dice la especificación sobre la función attr( ):

La función attr( ) está permitida para usarse como componente del valor de las propiedades css declaradas a un elemento o pseudoelemento. Devuelve (al ser computada) el valor del atributo. Si se declara a un pseudoelemento devuelve el valor del atributo del pseudoelemento.

Sintaxis de la función attr( )

propiedad: attr( <attr-name> <tipo-de-unidad>? [ , <fallback> ]? );

La sintaxis como casi todo en Css ;-} es sencilla. Escribimos la propiedad, los dos puntos (:) la función y dentro de ella (entre los paréntesis) el nombre del atributo que elijamos.

Debido a que el valor devuelto por esta función es una cadena de texto (recuerda lo que ocurre con la propiedad content) si estamos en una propiedad en la que sus valores necesitan definirse con algún tipo de unidad (como rem, deg...) hay que indicarlo tras el nombre del atributo dejando un espacio en blanco entre ellos.

Opcionalmente podemos añadir tras el nombre del atributo (o después de la unidad si la hay) un fallback precedido de una coma por si falla el valor del atributo. Este "por si falla" puede estar formado por uno o múltiples valores separados por comas.

Un ejemplo, por favor

Vemos sus ventajas con un ejemplo. Supón una serie de inputs y sus labels en un html cualquiera para seleccionar colores. Las etiquetas o lables serían algo así:

<label for='red'></label> <label for='blue'></label> <label for='green'></label> ...

Si queremos que cada etiqueta tenga un fondo según el color indicado por su atributo 'for' en la actualidad (usando puro Css) deberemos crear una regla por cada etiqueta y declararlo.

En el momento que la función Css attr() sea soportada, lo tendremos tan fácil como declarar sólo una regla Css para que cada label tenga su propio fondo diferente a las demás:

label { background: attr(for); }

Eso es todo lo necesario. Dará lo mismo que sean dos labels que 500. Tomará el valor del atributo 'for' del elemento (en el html) y lo usará como el valor de la propiedad 'background' en el Css.

Y de forma opcional podemos declarar un "fallback" (otro valor soportado para el caso de que falle lo anterior) separado por una coma (,). En caso de no incluir este fallback la coma no se escribe.

No está permitido hacer muñecas rusas con la función attr(). Vamos, que dentro del paréntesis de una función attr() no puedes meter otra attr(). Pero en las propiedades que admiten valores múltiples (como box-shadow, background-size...) si se pueden utilizar varias funciones attr(). Una para cada valor.

Relaciones entre attr() y otras funciones Css

La función de css attr() puede usarse como parte de los argumentos de otras funciones Css como cal().

.mi-clase { width:calc(100% - attr(data-witth em) + 1px); }

También es posible utilizar otras funciones Css dentro del argumento de la función 'attr()'. Como la función Css 'toggle()' dentro del fallback

La versatilidad de esta función puede verse ampliada por unos detalles que hay que tener presente:

1. Html5 permite el uso de atributos de autor. Cualquier data-algo='' es válido.
2. Los atributos pueden ser creados y sus valores pueden modificados "al vuelo y en vivo" mediante cualquier lenguaje de programación (como js) y en función de cualquier evento.

Diferencias entre la función y el valor attr()

• El valor attr() sólo se puede declarar en la propiedad 'content' que en puridad sólo puede ser declarada en los pseudoelementos.
• La función attr() puede ser declarada como valor de cualquier propiedad.
• El valor attr() en la propiedad 'content' no es computada. Esto es, Css lo trata como una cadena de texto.
• La función attr() devuelve un valor (tiene que ser uno de los válidos/permitidos para esa propiedad) y en caso de que dicho valor necesite de una unidad hay que añadirla en el argumento de la función separado por un espacio en blanco: font-size: attr(data-size rem);

Demo en vivo

En el tiempo que me ha llevado la redacción del artículo y su publicación, que no pasaba de borrador por distintos motivos, Fabrice Weinberg publicó esta demo en codepen.

Disfruta e imagina las posibilidades de la función attr() en tus creaciones.

See the Pen CSS attr() polyfill by Fabrice Weinberg (@FWeinb) on CodePen.

Adenda algo loca

Al principio mencionaba las distintas funciones css. Así que tenemos disponibles tres: calc(), toggle() y attr()

Por otra parte, hay otro documento relativo a las variables css, en su día ya apareció por el blog.

Así que si tenemos funciones css y tenemos variables css nada impide jugar, cuando realmente esté disponible, con todo junto.

Lo que si podemos hacer hoy por hoy es buscar escenarios y combinaciones para usos potenciales. En este proceso, y por las limitaciones que algún elemento tiene me surgió una duda: ¿es posible conjugarlas? Y lo pregunté.

Otra posibilidad de uso sería junto a la "nueva" función CSS color()

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso