Pourquoi ne puis-je pas combiner des pseudo-éléments et des classes spécifiques au fournisseur en CSS à l'aide de sélecteurs séparés par des virgules ?

Pourquoi les pseudo-éléments et classes spécifiques au fournisseur ne peuvent pas être combinés

Malgré la commodité d'utiliser des sélecteurs séparés par des virgules pour appliquer les mêmes styles à plusieurs éléments, cette approche ne peut pas être appliqué aux pseudo-éléments et classes spécifiques au fournisseur. Cette incohérence découle d'une règle fondamentale décrite dans CSS2.1.

Spécification CSS2.1

La spécification CSS2.1 stipule que tout sélecteur qui ne peut pas être analysé par l'agent utilisateur doit être ignoré ainsi avec son bloc de déclaration correspondant. Cela s'applique aux préfixes de fournisseurs non reconnus dans les sélecteurs de pseudo-classe et de pseudo-éléments.

Analyse du navigateur

Étant donné que différents navigateurs utilisent des préfixes différents, certains agents utilisateurs ne pourront pas analyser les pseudo-éléments et les classes. avec des préfixes non reconnus. Par conséquent, ces navigateurs doivent supprimer toutes les règles contenant ces préfixes non reconnus, ce qui entraîne la nécessité de déclarations répétitives.

Exemple

Considérez l'extrait de code suivant, qui vise à styliser le texte d'espace réservé en utilisant des éléments spécifiques au fournisseur. sélecteurs :

input:-moz-placeholder {
  font-style: italic;
  text-align: right;
}
input::-moz-placeholder {
  font-style: italic;
  text-align: right;
}
input:-ms-input-placeholder {
  font-style: italic;
  text-align: right;
}
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

Une tentative de combiner ces règles à l'aide de virgules entraînerait dans :

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

Cependant, cet ensemble de règles combinées échouera car :

• Les navigateurs utilisant Webkit (par exemple, Safari) ne peuvent pas analyser les préfixes :-moz-*.
• Les navigateurs utilisant gecko (par exemple, Firefox) ne peuvent pas analyser :-ms- et :-webkit- préfixes.
• Les navigateurs utilisant Edge (par exemple, Internet Explorer) ne peuvent pas analyser les préfixes :-webkit- et :-moz-.

Conclusion

En raison des limitations d'analyse du navigateur, il n'est pas possible de combiner pseudo-éléments et classes spécifiques au fournisseur dans un seul sélecteur séparé par des virgules. Cela conduit à la nécessité de déclarations répétitives lors du style des éléments dans différents navigateurs.

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!