La regla-at @supports css

La regla-at @supports nos permite detectar si el navegador del usuario soporta o no las nuevas funcionalidades de CSS.

¿Como funciona?

En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) solo si el navegador soporta display: flex. De lo contrario las ignora por completo.

/* si el navegador soporta display: flex */
@supports (display: flex) {
/* entonces aplica estas reglas: */
      .elemento {
          display: flex;
          /* y las demás reglas */
      }
  }

Algunas palabras clave

¡OJO! Es importante dejar un espacio en blanco delante y detrás de las palabras clave.

La palabra clave not

En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) solo si el navegador NO soporta display: flex.

/* si el navegador NO soporta display: flex */
@supports not (display: flex) {
/* entonces aplica estas reglas: */
      .elemento {
          display: table;
          /* y las demás reglas */
      }
  }

Podemos verificar múltiples características utilizando las palabras clave and y/o or

La palabra clave or

En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) si el navegador cumple al menos una de las condiciones entre paréntesis, o sea si el navegador soporta display: -webkit-flex o display: -moz-flex o display: flex.

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
                  .elemento {
                      display: -webkit-flex;
                      display: -moz-flex;
                      display: flex;
                      /*aquí van las reglas */
      }
  }

La palabra clave and

En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) solo si el navegador soporta tanto la propiedad column-count como la propiedad break-before.

@supports (column-count : 3) and (break-before: right) {
        /*aquí van las reglas */
  }

Utilizando varias palabras clave

Podemos concatenar múltiples condiciones utilizando varias palabras clave. La sintaxis utilizada en este caso se parece mucho con la de otros lenguajes de programación.

@supports not (...) and ((...) or (...)) { /* ... */ }
@supports (...) or (...) (not (...)) { /* ... */ }

El soporte en los navegadores

El soporte en los navegadores para la regla-at @supports es muy bueno.