jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de CSS attr() tipado

Genere expresiones attr() tipadas con conversion de tipos para estilos CSS basados en atributos de datos.

Cargando herramienta...

Qué es Generador de CSS attr() tipado?

La funcion CSS attr() tipada (Chrome 133+) lee un valor de atributo HTML y lo usa en cualquier propiedad CSS, con conversion de tipo explicita. A diferencia de la attr() tradicional que solo funciona en la propiedad content de pseudoelementos ::before y ::after y siempre devuelve una cadena, la version tipada acepta un parametro de tipo: attr(data-value type(<tipo>), <fallback>). Los tipos compatibles incluyen string, number, px, rem, em, percentage, color, deg, s, ms, url y mas. Esto permite estilos impulsados por atributos de datos directamente sin interpolacion JavaScript.

Respuesta rápida

Use CSS attr(data-* type(<tipo>), <fallback>) tipada para leer valores de atributos HTML en cualquier propiedad CSS con conversion de tipo. Solo Chrome 133+. Admite tipos number, px, rem, em, percentage, color, deg, s, ms, url. Proporcione siempre un valor de fallback.

Last updated: 2026-05-30

Limitaciones

  • Attr() tipada requiere Chrome 133+ o Edge 133+. Safari y Firefox aun no la admiten a mayo de 2026. La funcion es efectivamente solo para Chromium.
  • El valor del atributo debe coincidir exactamente con el formato de tipo esperado. Un tipo type(px) que espera "300" falla con "300px", "300 px" o cadenas no numericas. No hay saneamiento integrado.
  • Las fallas de conversion de tipo y los errores de analisis se comportan de manera diferente: una falta de coincidencia de tipo activa el valor de fallback, pero un argumento de tipo completamente invalido es un error de analisis CSS que invalida toda la declaracion.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija un atributo HTML para leer: tipicamente un atributo data-* como data-size, data-color o data-speed en el elemento objetivo.
  2. Seleccione la propiedad CSS que recibira el valor del atributo: cualquier propiedad CSS que acepte el tipo elegido.
  3. Elija el tipo para la funcion attr() que coincida con su propiedad CSS y el formato de valor esperado.
  4. Establezca un valor de fallback para cuando el atributo falte, este vacio o el valor no pueda convertirse al tipo especificado.

Para qué puedes usarla

  • Construir una barra de progreso impulsada por datos donde el ancho se establece mediante un atributo data-percent usando attr(data-percent type(%), 0%) en lugar de un estilo en linea.
  • Crear un sistema de animacion configurable donde los atributos HTML data-duration y data-delay controlen el tiempo de la animacion via attr(data-duration type(s), 300ms).
  • Disenar un sistema de color de componentes donde data-accent lea un color hex del HTML y lo aplique al fondo, borde o color del texto a traves de attr(data-accent type(color), #333).

Casos de uso

Ejemplos prácticos

Ejemplo

Ancho de barra de progreso impulsado por datos

Un componente de barra de progreso usa un atributo data-value en el elemento. Use width: attr(data-value type(%), 0%) en CSS para establecer el ancho directamente desde el atributo HTML. El valor del atributo data-value="75" lleva la barra al 75% de ancho sin estilos en linea ni JavaScript.

Ejemplo

Tiempo de animacion configurable

Un componente de notificacion necesita una duracion de visualizacion variable establecida por instancia en el HTML. Use animation-duration: attr(data-duration type(s), 3s) para leer data-duration="5" y obtener una duracion de 5 segundos.

Errores comunes

  • Usar attr() tipada sin un fallback: si el atributo falta o el valor no puede convertirse al tipo especificado, la declaracion se vuelve invalida y la propiedad vuelve a su valor inicial. Proporcione siempre un fallback sensato como segundo argumento.
  • Esperar que attr() tipada funcione en navegadores que no la admiten: se requiere Chrome 133+. Los navegadores antiguos ignoran toda la declaracion cuando encuentran la sintaxis attr() tipada.
  • Mezclar unidades y valores incorrectamente para el tipo: attr(data-width type(px)) espera que el valor del atributo sea un numero simple ("300"), no una cadena con unidad incluida ("300px"). El tipo especifica la unidad.

Verificación

  1. Abra Chrome DevTools, inspeccione un elemento con la declaracion attr() tipada y verifique que el estilo calculado muestre el valor resuelto esperado derivado del atributo HTML, no el fallback.
  2. Cambie el valor del atributo data-* usando el panel Elements de DevTools y confirme que el estilo renderizado se actualice en tiempo real sin recargar la pagina ni intervencion JavaScript.

FAQ

Preguntas sobre Generador de CSS attr() tipado

Cual es la diferencia entre attr() tipada y la attr() antigua?

La attr() antigua solo funciona en la propiedad content en pseudoelementos ::before y ::after. Siempre devuelve un valor de cadena. La attr() tipada funciona en cualquier propiedad CSS que acepte el tipo objetivo, usa conversion de tipo adecuada con el parametro type() y admite un valor de fallback.

Que navegadores admiten attr() tipada en 2026?

Attr() tipada es compatible con Chrome 133+, Edge 133+ y Opera 119+. Safari y Firefox aun no incluyen attr() tipada a mayo de 2026. Use como mejora progresiva declarando un valor de fallback primero y luego anulando con la version attr().

Puedo usar attr() tipada en cualquier atributo HTML o solo en atributos data-*?

Attr() tipada funciona en cualquier atributo HTML, no solo en data-*. Puede leer atributos estandar como href, src, alt, width, height o atributos data-* personalizados. Sin embargo, usar atributos data-* es la practica mas limpia para hooks de estilo.

Attr() tipada se reevalua cuando el atributo cambia?

Si. Attr() tipada es una funcion CSS en vivo: cuando el valor del atributo cambia en el DOM (mediante setAttribute o un framework), el navegador reevalua la declaracion CSS y actualiza el estilo renderizado. Esto significa que puede cambiar los valores de atributos data-* dinamicamente y el CSS responde automaticamente.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también