ベンダー固有のプレースホルダー セレクターを単一の CSS ルールに結合できないのはなぜですか?

ベンダー固有セレクターの組み合わせの謎を解明

CSS の領域内で、複数のブラウザーにまたがるプレースホルダー テキストのスタイル設定という難題に遭遇します。最適なクロスブラウザーのサポートを実現するために、ベンダー固有の疑似クラスと疑似要素の組み合わせが使用されます。しかし、そこには困惑する問題が存在します。他の CSS シナリオで慣例的に行われているように、これらを 1 つのルール セットにマージすることがなぜ実現できないのでしょうか?

CSS2.1 仕様を深く掘り下げると、その答えが明らかになります。最初の左中括弧 ({) に至るまでのすべてのものとしてセレクターを定義することが必須です。ユーザー エージェントは、解読できないセレクターに遭遇した場合、セレクターとその後の宣言ブロックの両方を無視する必要があります。

これは、特定のプレフィックスを持つブラウザーが他のベンダー固有のプレフィックスを持つセレクターを理解できない可能性があることを意味します。これにより、セレクター内のこれらの認識されないプレフィックスに言及するルールが除外されます。したがって、

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

のように、これらのルールを単一のカンマ区切りのルール セットに結合しようとしても無駄であることがわかります。ユーザー エージェントは認識されたセレクターにのみスタイルを適用するため、ブラウザー間でスタイルが不一致になります。

この複雑なルールには目的があります。これにより、ブラウザーは認識された CSS 構文に準拠し、完全に理解したルールのみを実装することが保証されます。これを強制することで、ベンダー固有の差異による潜在的な不一致やレンダリング エラーが回避されます。

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