Regla supports

La regla @supports define el estilo para elementos teniendo en cuenta las características compatibles con el navegador. En esta regla se pueden crear condiciones utilizando operadores lógicos not, and, or.

Sintaxis

css@supports condición {
  
}

Ejemplo

Establezcamos una condición: si tu navegador admite la propiedad display con el valor flex, entonces solo se mostrará el párrafo con el texto correspondiente, y el color de su fuente será azul claro:

html<p class="yes">Tu navegador admite display: flex.</p>
<p class="no">Tu navegador no admite display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Ver también