1. ホーム
  2. css

なぜ、ベンダー固有の疑似要素/クラスを1つのルールセットにまとめることができないのですか?

2023-10-14 19:26:34

疑問点

CSSでは placeholder のテキストをスタイルすることが可能です。

これらはすべて同じ基本的なプロパティ(つまり、テキストのスタイルと色の宣言)を共有しています。

しかし、ブラウザのベンダーに関係なく同じスタイルを適用したいのは必然ですが、これらを一緒にカンマ区切りのセレクタに結合することはできないようです (同じスタイルを共有する 2 つのセレクタを使用する他の CSS の部分と同じように)。

例として、私は以下の 4 つのセレクタを使用してプレースホルダーのスタイリングをターゲットにすることがよくあります。

  • input:-moz-placeholder
  • input::-moz-placeholder
  • input:-ms-input-placeholder
  • input::-webkit-input-placeholder

(ただし :-moz-placeholder は非推奨とされています の代わりに ::-moz-placeholder これは FireFox 19 のリリースに伴って発生したもので、現時点ではより良いブラウザサポートのために両方が必要とされています)。

イライラさせられるのは、それぞれの(同じ)スタイルを宣言して与えることで、CSS 内で多くの繰り返しが発生することです。

だから、プレースホルダーのテキストが右寄せでイタリックになるようにするには、結局のところ

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

私が本当にやりたいことは、このようにコンマで区切られた一つのルールセットとしてそれらを組み合わせることです。

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

しかし、何度か試してみたのですが、うまくいきません。 私が理解していないCSSの基本的な部分があるのではないかと心配になります。

なぜこのようなことが起こるのか、どなたか教えていただけないでしょうか。

どのように解決するのですか?

CSS2.1 状態 :

セレクタ( セレクタ のセクションも参照) は、最初の左中括弧 ({) までのすべてで構成されます。セレクタは常に宣言ブロックと一緒に置かれます。ユーザエージェントがセレクタを解析できない場合(つまり、有効な CSS 2.1 ではない場合)、セレクタは必ず を無視します。 セレクタ及び次の宣言ブロック(もしあれば)を無視しなければならない。

CSS2.1 は CSS3 よりも前のものなので、"it is not valid CSS 2.1" はユーザーエージェントが完全に CSS2.1 に準拠しており、CSS3 が理論上存在しないという前提の下に書かれていることに注意してください。実際には、仕様に "it is not valid CSS" やそのような趣旨のことが書かれている場合、それは "it is not understood by the user agent" という意味にとらえるべきでしょう。私の この関連する質問 に対する私の回答を参照してください。

すなわち、あるベンダーのブラウザは他のベンダーのプレフィックスを理解しないので、疑似クラスや疑似要素のセレクタにそれらの認識できないプレフィックスを含むルールはすべて削除しなければならないのです。 1

に関するいくつかの洞察として なぜ このようなルールが設定された理由については この回答 .


1 WebKit はこの規則を部分的に無視することで有名です。セレクタに認識できない接頭辞付きの疑似要素(この場合は ::-moz-placeholder ). とはいえ :-moz-placeholder の擬似クラスがあると、いずれにせよ壊れることになります。