Inicio > Blog > @supports: Qué es y por qué es tan maravilloso

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

@supports, regla (at-rule) de CSS

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 🙂

Suscribete a nuestra newsletter y podrás disfrutar de contenidos, promociones y descuentos exclusivos para suscriptores.
¿Te lo vas a perder?

Palabras relacionadas: ,

Artículos que podrían interesarte:

Comentarios

Aún no hay comentarios para "@supports: Qué es y por qué es tan maravilloso"

Deja tu comentario

He leído y acepto la política de privacidad de mowomo.com
Consiento que se publique mi comentario con los datos que he facilitado (a excepción del email)

¿Qué hacemos con tus datos?
En mowomo te solicitamos tu nombre y email (el email no lo publicamos) para identificarte entre el resto de personas que comentan en el blog.

  • Responsable de los datos: WHITE SCREEN IDEAS WORKSHOP SL.
  • Finalidad de los datos: Gestionar los comentarios y evitar el spam.
  • Legitimación: Aceptación expresa de la política de privacidad.
  • Almacenamiento de los datos: Base de datos alojada en Comvive Servidores S.L. (UE)
  • Duración: Hasta que lo solicites.
  • Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.