Existe una regla CSS denominada @supports
que permite establecer fragmentos de código CSS condicionales, aplicando estilos CSS sólo cuando se cumplen ciertas condiciones y restricciones. Esto puede ser muy útil para aplicar unos estilos si el navegador soporta una característica, o aplicar un estilo diferente como fallback si no lo hace.
Formato | Descripción |
---|---|
@supports ( condición) |
Aplica los estilos si se cumple la condición. |
@supports not ( condición) |
Aplica los estilos si no se cumple la condición. |
@supports ( condición1) and ( condición2) |
Aplica los estilos si se cumplen las diferentes condiciones. |
@supports ( condición1) or ( condición2) |
Aplica los estilos si se cumple una de las dos condiciones. |
Un ejemplo de la regla @supports
podría ser la siguiente:
@supports (display: grid) {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
Observa que en este ejemplo, se definen unos estilos para la clase .content
que el navegador sólo aplicará en el caso de que tenga soporte para la propiedad display
con el valor grid
, es decir, que tenga soporte de Grid CSS. Podemos hacer esto mismo con cualquier otra propiedad CSS, y utilizar la regla @supports
para crear códigos condicionales.
Sin embargo, podemos crear también reglas compuestas un poco más complejas. Por ejemplo, combinemos una regla de negación con una normal:
@supports not (display: grid) and (display: flex) {
.content {
display: flex;
justify-content: center;
}
}
En este ejemplo creamos una clase .content
con contenido estructurado con flexbox, siempre en el caso de que el navegador no soporte Grid CSS pero si soporte Flex. Observa que hemos combinado tanto el not
que afecta sólo a la primera condición, como el and
que afecta a ambas y exige que se cumplan ambas.
Si quisieramos crear una doble condición con ambas negadas, deberíamos hacer similar a este ejemplo:
@supports (not (display: flex)) and (not (display: grid)) {
.box {
display: inline-block;
}
}
Esto podría ser interesante, pero recuerda no utilizarlo con propiedades muy antiguas. La regla @supports
fue implementada en navegadores alrededor del año 2019-2020, por lo que utilizarla para excluir navegadores muy antiguos no funcionará porque tampoco tendrán la regla @supports
implementada.
En lugar de establecer reglas negadas compuestas, es mejor utilizar un enfoque donde establezcas unos estilos generales, que se sobreescriben si el navegador tiene implementadas nuevas características, como explicaremos a continuación.
En el siguiente ejemplo verás un primer bloque de código fuera de reglas, que se aplicará en cualquier navegador, moderno o antiguo. Sin embargo, a continuación tenemos dos reglas @supports
que se ejecutarán en navegadores más actuales:
.content {
display: inline-block;
}
@supports (display: grid) {
.content {
display: grid;
grid-template-columns: 1fr;
justify-content: center;
}
}
@supports not (display: grid) and (display: flex) {
.content {
display: flex;
justify-content: center;
}
}
En el caso de tratarse de un navegador que implemente Grid CSS, establecerá los estilos indicados en el primer bloque con la regla @supports
. Luego, la siguiente regla @supports
se ejecutará sólo en el caso de que el navegador no soporte Grid CSS pero si Flexbox.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev