@supports: Qué es y por qué es tan maravilloso

Las at-rules son, como su nombre indica, reglas que dan órdenes al CSS de cómo comportarse, dando lugar a una multitud de posibilidades a la hora de maquetar nuestras webs. Hoy hablaré de @supports, que sin duda es una de mis favoritas, ya que permitirá adaptar el diseño de tu web con los atributos CSS más vanguardistas.

¿Qué hace @supports?

Básicamente la regla @supports indica al navegador que si el atributo y el valor indicado son soportados, lea los atributos que  contiene, ya que forma parte del subconjunto de las reglas anidadas, es decir, que pueden contener otras declaraciones en su interior.

Vamos con un ejemplo:

.p-ejemplo-supports {
    color: red;
}

@supports (display: contents) {

    .p-ejemplo-supports {
        color: green;
    }

}

Si ves este párrafo de color rojo, significa que tu navegador no soporta display: contents;. Si lo ves de color verde, significa que estás leyendo esto desde las últimas versiones de Chrome o Firefox (a día de hoy, 03/08/2018).

De esta forma, estoy indicándole al navegador que muestre el párrafo de color rojo, pero que si soporta display: contents; (un nuevo valor del atributo display del que hablaremos pronto) muestre el párrafo de color verde.

Sintaxis de @supports

En el ejemplo hemos utilizado la sintaxis básica de la regla @supports, pero también has de saber que se pueden utilizar condicionales, muy fáciles de usar si sabes inglés. Te lo voy a «traducir»:

• @supports (atributo: valor) {} – Si soportas este atributo y valor (a partir de aquí lo llamaremos n), interpreta el contenido de las llaves.
• @supports (n) and (n2) {} – Si soportas n, y además n2, (es decir, ambas) interpreta el contenido de las llaves.
• @supports (n) or (n2) {} – Si soportas n o n2 (con una de las dos sobra), interpreta el contenido de las llaves
• @supports not (n) {} – Si no soportas n, interpreta el contenido de las llaves
  

Y también se puedes mezclar estas conjunciones, como por ejemplo en:

@supports (display:flex) and (not (display:grid)) {}

//Si soportas flex y no soportas grid, interpreta el contenido de las llaves

Y esto de @supports… ¿para qué sirve?

Hay veces que es imposible realizar algo únicamente con CSS puro y tenemos que ayudarnos con otros lenguajes, como por ejemplo JavaScript, pero resulta que existe un nuevo atributo o valor de CSS que únicamente interpretan las últimas actualizaciones de los navegadores y hace justamente lo que queremos.

Gracias a esta at-rule, podemos maquetar la página web tal y como queremos (ya que por ejemplo, a mí me gusta tener siempre la última versión de los navegadores que utilizo) sin temer que las personas que entren con otros navegadores vean tu sitio mal.

Con esta regla, podemos crear una maquetación «de respaldo» para esos navegadores que no soporten dichas propiedades, y dentro de la regla @supports añadiremos las propiedades deseadas (o al revés).

¡Y eso sería todo! ¿Vas a empezar a utilizar esta regla en tu tema? Cuéntanos en los comentarios 🙂