@supports

<< @import @layer >>

La regla @supports de CSS nos permite usar fragmentos de código sólo cuando se cumplen ciertas condiciones. Con esta funcionalidad podemos hacer que en el caso de no soportar el navegador una característica poder aplicar un css diferente.

La sintaxis de esta regla es: @supports [not] (condiciones) donde las condiciones irán anidadas por los operadores and y or. Veamos un ejemplo:

@supports not (display: grid) and (display: flex) {
    .content {
        display: flex;
        justify-content: center;
    }
}

Los estilos de la clase .content que hemos usado en el ejemplo anterior serán aplicados para aquellos navegadores que no soporten la propiedad display grid pero sí flex.

Lo correcto en estos casos sería tener un css genéricos, y usar esta regla para aquellos navegadores que sí soporten ciertas características.

.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;
    }
}

<< @import @layer >>