Condicionales if() en CSS

Seguro que alguna vez has pensado lo bien que te vendría tener la posiblidad de hacer if() directamente en CSS, pero como sabemos, esto no es posible.

Pero eso va a cambiar.

Se ha aceptado una propuesta de incluir la capacidad de hacer if() en linea en CSS.

Por ejemplo, imagina que tienes estas 3 medidas definidas como variables:

:root {
	--xl: media(width > 1600px);
	--l: media (width > 1200px);
	--m: media (width > 800px);
}

Luego podrías usarlas para definir por ejemplo el padding de un elemento, en una sola línea:

padding: if(
	var(--xl) ? var(--size-3) :
	var(--l) or var(--m) ? var(--size-2) :
	var(--size-1)
);

Otro ejemplo, tal y como se usa en JavaScript el operador ternario, podríamos usarlo en CSS:

animation: if(media(prefers-reduced-motion) ? 10s : 1s) rainbow infinite;

¿Son los navegadores compatibles con esta función de if() en CSS?

La respuesta es NO.

Esto aún es una propuesta, que bien es cierto que esta aceptada. Pero de aquí a que se implemente es posible que pasen 2 o 3 años.

Así que vamos a tener que tener un poco de paciencia.

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!