La règle @supports

La règle @supports définit le style des éléments en tenant compte des fonctionnalités prises en charge par le navigateur. Dans cette règle, il est possible de créer des conditions à l'aide des opérateurs logiques not, and, or.

Syntaxe

css@supports condition {
  
}

Exemple

Définissons une condition : si votre navigateur prend en charge la propriété display avec la valeur flex, alors seul le paragraphe avec le texte correspondant s'affichera, et la couleur de sa police sera bleu clair :

html<p class="yes">Votre navigateur prend en charge display: flex.</p>
<p class="no">Votre navigateur ne prend pas en charge display: flex.</p>

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

Результат:

Voir aussi