A regra supports
A regra @supports define o estilo para elementos com base
nas funcionalidades suportadas pelo navegador.
É possível criar condições nesta regra usando
operadores lógicos not,
and, or.
Sintaxe
@supports condição {
}
Exemplo
Vamos definir uma condição de que se seu navegador suportar
a propriedade display com o valor flex,
então somente o parágrafo com
o texto correspondente será exibido, e a cor da sua fonte
será azul claro:
<p class="yes">Seu navegador suporta display: flex.</p>
<p class="no">Seu navegador não suporta display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
Veja também
-
a regra
@import,
que importa um arquivo CSS -
a regra
@media,
que define o estilo para um tipo de mídia -
a regra
!important,
que define a prioridade do estilo
