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

css@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:

html<p class="yes">Seu navegador suporta display: flex.</p>
<p class="no">Seu navegador não suporta display: flex.</p>

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

Результат:

Veja também