Pourquoi ne pouvons-nous pas combiner des sélecteurs d'espace réservé spécifiques au fournisseur dans une seule règle CSS ?

Dévoilement de l'énigme de la combinaison de sélecteurs spécifiques à un fournisseur

Dans le domaine du CSS, l'énigme du style du texte d'espace réservé dans plusieurs navigateurs se pose . Pour obtenir une prise en charge optimale entre navigateurs, une combinaison de pseudo-classes et de pseudo-éléments spécifiques au fournisseur est utilisée. Cependant, un dilemme embarrassant se pose : pourquoi n'est-il pas possible de les fusionner en un seul ensemble de règles, comme c'est l'habitude dans d'autres scénarios CSS ?

Plonger dans les profondeurs des spécifications CSS2.1 permet de découvrir la réponse. Il exige qu'un sélecteur soit défini comme tout ce qui mène à la première accolade gauche ({). Lorsqu'un agent utilisateur rencontre un sélecteur qu'il ne peut pas déchiffrer, il doit ignorer à la fois le sélecteur et le bloc de déclaration qui en résulte.

L'implication de ceci est que les navigateurs avec certains préfixes peuvent ne pas comprendre les sélecteurs avec d'autres préfixes spécifiques au fournisseur. , conduisant à l'exclusion des règles mentionnant ces préfixes non reconnus dans les sélecteurs. Par conséquent, les tentatives visant à combiner ces règles en un seul ensemble de règles séparées par des virgules, comme ceci :

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

se révéleront vaines. L'agent utilisateur n'appliquera les styles qu'au sélecteur reconnu, ce qui entraînera des styles incohérents entre les navigateurs.

Cette règle complexe a un but. Il garantit que les navigateurs adhèrent à la syntaxe CSS reconnue et implémentent uniquement les règles qu'ils comprennent parfaitement. En appliquant cela, toute incohérence potentielle ou erreur de rendu due à des écarts spécifiques au fournisseur est évitée.

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!