web-dev-qa-db-ja.com

ベンダー固有の疑似要素/クラスを1つのルールセットに結合できないのはなぜですか？

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

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

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

ただし、これをかなりの頻度で試しても、うまくいくようには見えません。 CSSには理解できない根本的な部分があるのではないかと心配になります。

なぜこれが起こるのか誰かに光を当てることはできますか？

csscss-selectorspseudo-elementpseudo-class
74
johnkavanagh

CSS2.1 states ：

セレクター（ selectors のセクションも参照）は、最初の左中かっこ（{）まで（ただし含まない）のすべてで構成されます。セレクターは常に宣言ブロックと一緒に使用されます。ユーザーエージェントがセレクターを解析できない場合（つまり、有効なCSS 2.1ではない場合）は、セレクターと次の宣言ブロック（存在する場合）も ignore にする必要があります。

CSS2.1はCSS3よりも古いため、「有効なCSS 2.1ではありません」は、ユーザーエージェントがCSS2.1に完全に準拠し、理論上はCSS3が存在しないという前提の下で記述されています。実際には、仕様が「それは有効なCSSではない」またはその効果に対して何かを述べているところはどこでも、「ユーザーエージェントによって理解されていない」ことを意味すると解釈されるべきです。より詳細な説明については、 この関連質問 に対する私の回答を参照してください。

つまり、あるベンダーのブラウザは他のベンダーの接頭辞を理解しないため、疑似クラスおよび疑似要素セレクターにこれらの認識されない接頭辞を含むルールを削除する必要があります。1

なぜそのようなルールが導入されたのかについての洞察については、 この答え を参照してください。

1WebKitはこのルールを部分的に無視することで悪名高いことに注意してください：セレクターが認識できない接頭辞付きの疑似要素（この場合は::-moz-placeholder）を持つルールの解析に問題はありません。とはいえ、結合されたルールの:-moz-placeholder疑似クラスは、とにかくそれを壊します。

71
BoltClock

仕様によると、ユーザーエージェントがセレクターの一部を認識しない場合、セレクター全体とそのブロックを無視する必要があります。

http://www.w3.org/TR/css3-syntax/#rule-sets

セレクター（セレクターモジュール[SELECT]を参照）は、最初の左中かっこ（{）まで（ただし、含まない）のすべてで構成されます。セレクターは常に{}ブロックと一緒に使用されます。ユーザーエージェントがセレクターを解析できない場合（つまり、有効なCSS3ではない場合）、{}ブロックも無視する必要があります。

14
Alessandro Vendruscolo