La regla-at @supports
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.