A pesar de que la función attr() existe desde versiones tempranas de CSS, recientemente se ha amplificado sus capacidades, pudiendo utilizarse en cualquier propiedad CSS y no sólo en content como ocurría antiguamente.
La función attr()
La función attr() se utiliza para obtener el valor de un atributo HTML que hemos seleccionado con CSS. Sin embargo, la sintaxis de esta función se ha visto ligeramente ampliada, y ahora tenemos más posibilidades:
| Sintaxis | Descripción |
|---|---|
attr(name) | Obtiene el valor del atributo name del elemento HTML seleccionado. |
attr(name datatype) | Idem al anterior, pero establece el valor con el tipo de dato datatype. |
attr(name datatype unit) | Idem al anterior, pero utilizando la unidad unit en el tipo de dato datatype. |
attr(name datatype, fallback) | Idem al anterior, pero además establece un valor por defecto fallback. |
Veamos un ejemplo de cada una de las modalidades, para entender sus posibilidades.
Generar contenido
La forma más clásica de uso de la función attr() es utilizarla mediante la propiedad content, usándolo en combinación de los pseudoelementos ::after y ::before:
<h1 data-author="ManzDev">LenguajeCSS.com</h1>
<style>
h1::after {
content: " (Escrito por " attr(data-author) ")";
font-family: "Victor Mono", monospace;
font-size: 1.25rem;
color: #444;
}
</style>
Como se puede ver, desde CSS le indicamos que añada un texto después del <h1> (::after), aunque en el HTML no figure. Ese contenido se basa en el texto escrito en la propiedad content y el valor del atributo indicado mediante attr().
Convertir a tipo de dato
En la nueva implementación de la función attr(), se añade la posibilidad de establecer el tipo de dato del valor, de modo que podamos utilizarlo en ciertas situaciones.
Mediante la función type() podemos indicar el tipo de dato deseado, envuelto entre los carácteres < y >. La sintaxis es la siguiente:
<h2 data-color="indigo">Hello!</h2>
<h2 data-color="deeppink">Hello!</h2>
<style>
h2 {
color: white;
background: attr(data-color type(<color>));
}
</style>
Además, tras la función type() puedes añadir un nuevo parámetro para indicar un valor como fallback, y en el caso de que el elemento HTML no tenga el atributo indicado, tendrá ese valor por defecto.
Añadir unidades si no existen
También de forma opcional, es posible indicar la unidad en lugar del type(). En ese caso, se espera que el valor del atributo no tenga una unidad establecida.
Veamos estos tres ejemplos:
<div data-size="100">Hello!</div> <!-- 100px -->
<div data-size="50em">Hello!</div> <!-- 200px -->
<div>Hello!</div> <!-- 200px -->
<style>
div {
--size: attr(data-size px, 200px);
width: var(--size);
height: var(--size);
color: white;
background: indigo;
}
</style>
Observa que la forma en la que aplica el atributo en los tres <div> es la siguiente:
- 1️⃣ No se indica unidad en el atributo, así que se añade:
100px - 2️⃣ Se indica unidad en el atributo, se descarta el valor y se usa fallback:
200px - 3️⃣ No existe atributo, se usa el valor del fallback:
200px
Ten en cuenta que, aún con las nuevas funcionalidades de la función attr(), existen ciertas restricciones por seguridad o rendimiento. Por ejemplo, no es posible utilizar directamente attr() para obtener una URL y añadirla en una propiedad como background-image u obtener tokens o información sensible de usuario.
Los valores obtenidos con
attr()son marcados por el navegador como tainted values (valores contaminados, inseguros). Esto significa que no pueden utilizarse para acceder a otra URL, ni guardar información en variables para reutilizarlas, así como hacer referencias a si mismas (pueden generar bucles).
