@Supports Selector ()

La capacité de la règle @supports à vérifier le support des sélecteurs est étonnamment robuste! Bien que souvent utilisé pour tester property: value , la fonction selector() étend ses capacités pour évaluer le support du sélecteur. Cela se fait en plaçant simplement le sélecteur dans les parenthèses:

 @Supports Selector (: nth-child (1 of .foo)) {
  / * Styles appliqués si le sélecteur est pris en charge * /
}

Le sélecteur :nth-child(n of .foo) , un "argument de la liste des sélecteurs" compatible avec :nth-child Family Selecteurs, en sert un bon exemple. Actuellement, seul Safari prend en charge ce sélecteur spécifique.

Considérez un scénario où vous devez coiffer une liste avec des séparateurs et des rayures zébrées. Idéalement, vous utiliseriez un sélecteur comme celui-ci pour réaliser le rayage du zèbre tout en ignorant les séparateurs:

 li: nième-enfant (impair de .list-item) {
  Contexte: LightGoldenRodyellow;
}

Cependant, en raison de la prise en charge limitée du navigateur, vous pouvez utiliser @supports pour appliquer conditionnellement ce style:

 @Supports Selector (: nth-child (1 of .foo)) {
  li {
    rembourrage: 0,25EM;
  }
  li: nième-enfant (impair de .list-item) {
    Contexte: LightGoldenRodyellow;
  }
  li.separator {
    Style de liste: aucun;
    marge: 0,25em 0;
  }
}
@Supports pas sélecteur (: nth-child (1 de .foo)) {
  li.separator {
    hauteur: 1px;
    Style de liste: aucun;
    Border-top: 1px en pointillé violet;
    marge: 0,25em 0;
  }
}

Cela fournit un style de secours pour les navigateurs manquant de support pour le sélecteur avancé. Une syntaxe améliorée, potentiellement à l'aide @when et @else , pourrait simplifier ceci:

 / * Syntaxe future hypothétique * /
@when supports (sélecteur (: nth-child (1 de .foo))) {
  / * Styles pour soutenir les navigateurs * /
} @autre {
  / * Styles de secours * /
}

Une API JavaScript existe également pour tester le support du sélecteur:

 CSS.Supports ("Selector (: Nth-Child (1 of .foo))")

Cette méthode renvoie true dans Safari et false dans Chrome (au moment de la rédaction).

Bien que la règle @supports soit puissante, le nombre de sélecteurs CSS avec un support inter-navigateur incohérent et le nombre de cas d'utilisation nécessitant @supports pour ces sélecteurs, est relativement faible. De nombreux sélecteurs précédemment problématiques, tels que ::marker et sélecteurs d'attribut insensibles à la casse, bénéficient désormais d'un large soutien. Des sélecteurs comme :fullscreen ou :-webkit-full-screen peut offrir des applications intéressantes et utiles en raison de leur manque de soutien unique dans iOS Safari.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!