Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

CSS SÍ tiene condicionales y deberías estar usándolas

CSS sí tiene condicionales y al no usarlas te estas perdiendo cosas como detectar si el navegador es moderno para usar lo último de CSS o si es antiguo para darle soporte.

CSS sí tiene condicionales y deberías estar usándolas

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.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal