Usando attr() con tipos

Chrome incorpora la notación de tipo para la función attr que permite interpretar el valor de un atributo con un tipo concreto cuando se lee para utilizarlo en propiedades CSS. Esto hace posible usar atributos HTML como valores para casi cualquier propiedad CSS, no solo en el contenido de pseudoelementos.

Ejemplo práctico: <style> div { color: attr(data-color type(<color>)); } </style> <div data-color=red>Soy rojo</div> En este caso el valor del atributo data-color se parsea como un color y se aplica directamente a la propiedad color del elemento.

La función type toma como argumento un tipo de dato que indica cómo debe interpretarse la cadena del atributo. Los tipos disponibles son básicamente los mismos que se usan en la propiedad syntax de una regla @property, salvo <url> por motivos de seguridad. Algunos ejemplos de tipos son <angle>, <color>, <image>, <integer>, <length>, <length-percentage>, <number>, <percentage>, <resolution>, <string>, <time> y <transform-function>.

La ventaja principal es enorme: se eliminan muchos hacks actuales que consisten en inyectar estilos inline o transformar atributos en variables CSS para poder reutilizarlos. Con attr con tipado se logra un código más limpio, predecible y mantenible. Por ahora Chrome ya ha implementado la función, pero su soporte generalizado en otros navegadores llevará tiempo, por lo que conviene comprobar compatibilidad antes de usarlo en producción.

Si buscas aplicar este tipo de técnicas en proyectos reales, en Q2BSTUDIO desarrollamos soluciones que integran buenas prácticas de front end y arquitectura a medida. Podemos ayudarte a crear interfaces y aplicaciones robustas y escalables, por ejemplo si necesitas desarrollo de aplicaciones a medida con estilos y componentes optimizados para rendimiento.

Además de desarrollo de software a medida y aplicaciones a medida, en Q2BSTUDIO somos especialistas en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas y agentes IA. Si quieres potenciar tus interfaces con modelos inteligentes o proteger tu despliegue en la nube, consulta nuestros servicios de inteligencia artificial para empresas y nuestras soluciones de seguridad.

Palabras clave relevantes que aplicamos en nuestros proyectos: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Si deseas una auditoría, integración de IA o una mejora de tu experiencia de usuario aprovechando nuevas capacidades CSS como attr con tipos, en Q2BSTUDIO podemos asesorarte y ejecutar la solución completa.