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
@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:
<p class="yes">Tu navegador admite display: flex.</p>
<p class="no">Tu navegador no admite display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
Ver también
-
la regla
@import,
que importa un archivo CSS -
la regla
@media,
que define el estilo para un tipo de medio -
la regla
!important,
que establece la prioridad del estilo
