ベンダー固有の疑似要素とクラスを単一の CSS ルールに結合できないのはなぜですか?

CSS でのベンダー固有の疑似要素とクラスの混合

CSS では、多くの場合、ベンダー固有の疑似要素とクラスを使用して、ブラウザの互換性を強化します。ただし、同様のプロパティを共有しているにもかかわらず、これらを 1 つのルール セットに結合することはできません。

Why Not?

CSS2.1 では、セレクターは、ユーザーエージェントは宣言ブロックを適用します。セレクターにベンダー名を接頭辞すると、一部のブラウザーで認識されない文字が発生します。したがって、ユーザー エージェントは有効性を維持するためにこれらのルールを削除する必要があります。

具体的には:

• ベンダーのブラウザは互いのプレフィックスを理解できません。
• カンマ区切りのセレクターベンダー プレフィックスを含むブラウザには、ブラウザごとに認識できないセレクターが少なくとも 1 つあるため、ルール全体が無視されます。

スタイルへの影響

たとえば、プレースホルダー テキストをスタイル設定する場合、この制限により、ベンダーごとに個別のルールが必要となるため、複数の冗長ルールを記述する必要があります。 prefix:

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;
}

結論

この制限を理解することで、有効で一貫性のある CSS スタイルを作成できます。ベンダー プレフィックスはブラウザの互換性のために必要な場合がありますが、ブラウザ固有の解析ルールのため、単一のルール セットにベンダー プレフィックスを混在させることは依然として不可能です。

以上がベンダー固有の疑似要素とクラスを単一の CSS ルールに結合できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。