jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Constructor de funcion CSS if()

Cree condicionales CSS if() usando condiciones style(), media() y supports() para valores responsivos sin consultas @media.

Cargando herramienta...

Qué es Constructor de funcion CSS if()?

La funcion CSS if() permite escribir valores condicionales directamente dentro de una declaracion de propiedad. En lugar de envolver un valor dentro de @media, @container o @supports, usa if() en linea: width: if(style(--variant: large): 300px else 150px). Admite tres tipos de condicion: style() para verificar el valor de una propiedad personalizada CSS, media() para probar caracteristicas de medios como min-width o prefers-color-scheme, y supports() para detectar si el navegador admite una caracteristica CSS especifica. Chrome 137 admite if(style()) y Chrome 142 agrega if(media()) e if(supports()).

Respuesta rápida

La funcion CSS if() permite escribir valores condicionales en linea dentro de una declaracion de propiedad. Use if(style()) para ramificar segun una propiedad personalizada CSS, if(media()) para una caracteristica de medios como el ancho del viewport, o if(supports()) para la deteccion de soporte del navegador.

Last updated: 2026-05-30

Limitaciones

  • La funcion if() solo esta disponible en Chrome 137+ (style()) y Chrome 142+ (media(), supports()). Firefox y Safari aun no admiten CSS if() en ninguna version estable a mayo de 2026.
  • if() evalua una sola condicion para un solo valor: no puede reemplazar las at-rules @media o @container para bloques de reglas complejos con multiples cambios de declaracion.
  • if(style()) solo funciona en propiedades personalizadas establecidas o registradas explicitamente. Las propiedades personalizadas heredadas de un ancestro sin valor explicito en el elemento objetivo se tratan como no coincidentes.

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

Cómo usar esta herramienta

  1. Elija el tipo de condicion: style() para verificar valores de propiedades personalizadas CSS, media() para caracteristicas de medios de viewport o preferencias del usuario, o supports() para deteccion de caracteristicas.
  2. Ingrese la expresion de condicion y el valor a usar cuando la condicion sea verdadera.
  3. Opcionalmente, agregue un valor else que se aplique cuando la condicion sea falsa.
  4. Copie la declaracion if() generada y coloquela directamente en el valor de su propiedad CSS.

Para qué puedes usarla

  • Establecer un ancho diferente segun el valor de una propiedad personalizada CSS sin una consulta @container envolviendo toda la regla.
  • Aplicar un valor de esquema de color condicionalmente basado en prefers-color-scheme dentro de una sola declaracion de propiedad.
  • Proporcionar un valor de fallback cuando el navegador no admite una caracteristica CSS especifica usando supports().

Casos de uso

Ejemplos prácticos

Ejemplo

Ancho de componente segun variable de variante

Un componente de tarjeta usa style(--variant: featured) para establecer un ancho de 400px en tarjetas destacadas y 300px en tarjetas estandar: width: if(style(--variant: featured): 400px else 300px). No se necesita regla @container.

Ejemplo

Tamano de fuente responsivo con media() en linea

Establezca el tamano de fuente condicionalmente segun el ancho del viewport dentro de una sola declaracion: font-size: if(media(min-width: 768px): 1.25rem else 1rem). Evita escribir bloques @media separados para valores responsivos simples.

Errores comunes

  • Usar if(media()) para disenos con multiples condiciones complejas: if() esta disenado para valores condicionales unicos, no como reemplazo de todas las media queries.
  • Olvidar que la rama else es opcional: omitirla cuando la condicion es falsa resulta en que la propiedad vuelva a su valor inicial o a una declaracion anterior.
  • Aplicar if(style()) a una propiedad personalizada que no esta establecida en el elemento o sus ancestros: style() solo evalua propiedades personalizadas registradas o establecidas explicitamente.

Verificación

  1. Abra Chrome DevTools e inspeccione el elemento con la declaracion if(). Verifique que el valor calculado cambie cuando la variable de condicion o la caracteristica de medios cambie.
  2. Pruebe la pagina en un navegador no compatible (Firefox o Safari) para confirmar que el valor else o la declaracion de fallback se aplique correctamente sin romper el diseno.

FAQ

Preguntas sobre Constructor de funcion CSS if()

Cual es la diferencia entre if(style()) y las consultas @container style()?

@container style() envuelve un bloque de reglas completo y aplica todas las declaraciones dentro cuando la condicion es verdadera. La funcion if(style()) aplica un solo valor condicional en linea dentro de una declaracion de propiedad. Use @container style() cuando multiples propiedades dependan de la misma condicion, e if(style()) cuando solo un valor necesite cambiar.

Que version de Chrome admite cada tipo de condicion if()?

Chrome 137 admite if(style()) para consultar valores de propiedades personalizadas CSS. Chrome 142 agrega if(media()) para consultas de caracteristicas de medios e if(supports()) para deteccion de caracteristicas. Firefox y Safari aun no implementan if() en ninguna version estable.

Puede if(style()) verificar la ausencia de una propiedad personalizada?

No. La condicion style() verifica el valor calculado de una propiedad personalizada y puede probar un valor especifico (style(--variant: large)) o simplemente verificar que la propiedad esta establecida (style(--variant)). No puede probar la ausencia de una propiedad.

En que se diferencia if(media()) de una @media at-rule regular?

if(media()) evalua la condicion de medios en linea dentro de una sola declaracion de propiedad, manteniendo el valor condicional junto con su fallback. Una @media at-rule duplica todo el conjunto de reglas. Para un solo cambio de valor, if(media()) es mas conciso.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también