Una de las primeras cosas que aprendemos de CSS es que no es un lenguaje de programación: no tiene variables, funciones, ciclos, condicionales, etc. Pero a poco que vamos profundizando en él nos damos cuenta que eso no es tan cierto. Es decir, CSS no es un lenguaje de programación pero eso no quita que tenga esas características, aunque con su modo particular.
Sí existen condicionales en CSS, dee hecho, hay un modulo llamado CSS Conditional Rules (especificacion, editor draft) que contempla dos at-rules: @media y @supports
@media
Seguramente ya conoces las media queries, que son la base del responsive web design. Una media query es una expresion que puede constar de un tipo de medio y características del dispositivo. Por ejemplo:
screen and (orientation: portrait)
La anterior es una media query válida, consulta que el tipo de medio sea pantalla y esta pantalla esté en posición vertical (su ancho es menor que su alto). Para usar esta expresion se requiere la at-rule @media
@media screen and (orientation: portrait) {
/* Estilos que se ejecutarán si la media query es válida */
}
No es el objetivo de este artículo explicar todas las media queries y sus posibles combinaciones, lo importante es que sepas que esta es una condicional en CSS pues los estilos solo se aplicarán si la media query se cumple.
En el caso siguiente el color de fondo será rojo solo si la pantalla es de al menos 4 por 3 de proporcion (ancho, alto):
@media screen and (min-aspect-ratio: 4/3) {
body {
background: red
}
}
@supports
La at-rule @supports le pregunta al navegador si soporta la propiedad y valor indicados. Si el navegador responde que sí, se aplican los estilos. Es la forma de tener contentos a todos los que se quejan del soporte de los navegadores para nuevas características de CSS (flexbox, grid, variables, etc.)
Veamos un ejemplo:
.grid-container {
overflow: hidden;
}
.grid-item {
float: left;
}
@supports (display: flex) {
.grid-container {
display: flex;
}
.grid-item {
float: none
}
}
@supports (display: grid) {
.grid-container {
display: grid;
}
}
En el caso anterior, podemos dar soporte a navegadores tan antiguos como Internet Explorer usando floats sin renunciar a nuevas características como flexbox o grid. Recuerda siempre la cascada, lo que viene después sobreescribe a lo que estaba antes. Por eso el orden en que declaras los estilos es muy importante.
¿Y si el navegador tampoco soporta @supports? Pues no pasa nada porque tomará esa regla como inválida y el efecto sería el mismo.
Nuevamente, el objetivo de este artículo no es explicarte @supports a fondo. Ya lo haré en otro momento. Lo importante es que sepas que sí existen condicionales en CSS y que deberías estar usándolas.
Condicionales con variables CSS
En esta parte me robo el aporte de Roman Komarov que ha ideado un hack para tener condicionales usando variables CSS como booleans (0 y 1) y la funcion calc(). El hack se basa en que multiplicar un valor por cero devuelve cero. Tan sencillo como eso, pero tan poderoso a la vez.
Por ejemplo, en el siguiente caso, si .element tiene también la clase .is-big su tamaño de fuente será de 1.25em:
:root {
--is-big: 0
}
.is-big {
--is-big: 1
}
.element {
font-size: calc(1em + 0.25em * var(--is-big))
}
El artículo completo es complejo pero vale la pena revisarlo: http://kizu.ru/en/fun/conditions-for-css-variables
En EDteam tenemos un el mejor curso de CSS en español para que seas un experto en diseño web. ¡Es gratis!, no te lo pierdas. Y compártelo con todos tus conocidos.