なぜ、ベンダー固有の疑似要素/クラスを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;
}
私が本当にやりたいことは、このようにコンマで区切られた一つのルールセットとしてそれらを組み合わせることです。
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
の擬似クラスがあると、いずれにせよ壊れることになります。
関連
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル】CSSのクラスとidの共通命名規則
-
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する(コツ)
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"<URL>". css スタイルの失敗
-
[解決済み] 1つのルールで複数のクラスを持つ要素を対象とする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css