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;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.
¿Que te parece la propuesta de if() en CSS?
Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!
