☰

ベンダー固有の疑似要素/クラスを 1 つのルール セットに組み合わせることができないのはなぜですか? 質問する

tag-icon • tag-icon css css-selectors pseudo-element pseudo-class
ベンダー固有の疑似要素/クラスを 1 つのルール セットに組み合わせることができないのはなぜですか? 質問する

placeholderCSS では、ベンダー固有の疑似クラスと疑似要素の組み合わせを使用して、入力内のテキストにスタイルを設定できます(最適なクロスブラウザー カバレッジを実現するため)。

これらはすべて同じ基本プロパティ (テキストのスタイル設定や色の宣言など) を共有します。

しかし、ブラウザのベンダーに関係なく同じスタイルを適用したいのですが、これらをコンマ区切りのセレクターに組み合わせることはできないようです (2 つのセレクターで同じスタイルを共有する他の CSS の場合のように)。

たとえば、私は次の 4 つのセレクターを使用してプレースホルダーのスタイルをターゲットにする傾向があります。

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

（それでも:-moz-placeholder 廃止予定これに賛成したのは::-moz-placeholderFirefox 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;
}

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

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

しかし、何度か試してみたにもかかわらず、うまくいかないようです。CSS の基本的な部分を私が理解していないのではないかと心配になります。

なぜこのようなことが起こるのか、誰か説明できますか?

ベストアンサー1

CSS2.1州:

セレクタ（セレクター) は最初の左中括弧 ({) までのすべて (ただし、左中括弧は含まない) で構成されます。セレクタは常に宣言ブロックと一緒に使用されます。ユーザーエージェントがセレクタを解析できない場合 (つまり、CSS 2.1 として有効でない場合)、無視するセレクターとそれに続く宣言ブロック（存在する場合）も同様です。

CSS2.1 は CSS3 より前のものであるため、「有効な CSS 2.1 ではありません」という記述は、ユーザー エージェントが CSS2.1 に完全に準拠しており、CSS3 は理論上存在しないという前提で書かれています。実際には、仕様で「有効な CSS ではありません」またはそれに類するものが記述されている場合は、「ユーザー エージェントが理解できない」という意味に解釈する必要があります。この関連する質問より詳しい説明についてはこちらをご覧ください。

つまり、あるベンダーのブラウザは他のベンダーのプレフィックスを理解しないため、疑似クラスおよび疑似要素セレクターで認識されないプレフィックスを含むルールをすべて削除する必要があります。1

について少し知るにはなぜそのような規則が導入された。この答え。

1 WebKit はこのルールを部分的に無視することで有名です。認識されないプレフィックス付き疑似要素 (この場合は::-moz-placeholder) を持つセレクターを持つルールを解析しても、WebKit は問題なく動作します。ただし、:-moz-placeholder結合されたルール内の疑似クラスによって、いずれにせよルールが破綻します。

おすすめ記事