@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 aplicar una serie de estilos sólo si el navegador del usuario soporta una propiedad y valor en concreto. De esta forma podemos aplicar propiedades que se van incorporando progresivamente en los navegadores y tener un fallback(alternativa) para aquellos navegadores que no la soporten.

La sintaxis de esta regla es: @supports [not] (condiciones) donde las condiciones irán anidadas por los operadores not, 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;
    }
}

Veamos un ejemplo con una de las propiedades que están en experimental:

Ejemplo propiedad experimental.

interpolate-size: allow-keywords; nos permite que sea capaz en este caso hacer una transición de 0.5segundos entre una altura de 160px a una altura "auto" al hacer hover.  Esto por ejemplo, no está soportado a día de hoy en firefox teniendo que solucionarlo poniendo una altura de 300px para que no se note ese "trompicón" entre una altura y otra.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="2.supports.css">
</head>
<body>
    <main>
        <article>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Mario_Series_Logo.svg/1200px-Mario_Series_Logo.svg.png">
            <h1>Super Mario</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum nihil provident deserunt. Qui sint asperiores id voluptatum magni dolorem eius sunt tempora nulla dolor. Quo nisi ex laboriosam enim quam.</p>
        </article>
    </main>
</body>
</html>

<< @import @layer >>