疑似要素に単一または二重のコロン表記を使用する必要がありますか?


108

IE7とIE8は疑似要素(::afterまたは::first-letter)のダブルコロン表記をサポートしていないため、また、最近のブラウザー:afterは後方互換性のためにシングルコロン表記(たとえば)をサポートしているため、シングルコロン表記のみを使用する必要があります。 IE8の市場シェアがごくわずかなレベルまで下がって、コードベースを見つけて置き換えますか?または両方を含める必要があります:

.foo:after,
.foo::after { /*styles*/ }

IE8ユーザー(貧しい人々)のことを気にすると、doubleだけを使用するのはばかげているように見えます。

回答:


71

両方をコンマと組み合わせて使用しないでください。CSS 2.1準拠(CSS3対応ではない)のユーザーエージェントは、ルール全体を無視します。

ユーザーエージェントがセレクターを解析できない場合(つまり、有効なCSS 2.1ではない場合)、ユーザーエージェントはセレクターと次の宣言ブロック(存在する場合)も無視する必要があります。

CSS 2.1は、セレクターのコンマ(、)に特別な意味を与えます。ただし、CSSの将来の更新でコンマが他の意味を取得するかどうかは不明であるため、セレクターの残りの部分がCSS 2.1で適切に見える場合でも、セレクターのどこかにエラーがある場合はステートメント全体を無視する必要があります。

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

ただし、使用できます

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

一方、これは必要以上に冗長です。現時点では、1コロン表記を使用できます。


7
コンマと無視の情報を含めてくれてありがとう。それはおそらく私(そしておそらく他の人たち)がしばらく頭を悩ませていたでしょう。使用中のブラウザの99%がダブルコロン表記をサポートしている場合は、それを使用するように変更するのが最善のように見えます(シングルコロンサポートを削除してWebを壊す人はいないため、後でfind /その時点で古いコードを置き換える)。
jinglesthula 2012

2
これは前進する方法ではありません。人々が時代遅れの、壊れた、非推奨のブラウザに移動するのをやめると、ブラウザの進行は強制的に促進されます。
Gershom 2015年

2
@Gershom Maes:残念ながら、それはあなたが言うことではありません。開発者の大部分は同じことを望んでいると思いますが、それは起こりません。
BoltClock

私たちが夢見ることができる@Gershom Maes
James Cushing

1
重複したスタイルを維持することは問題になる可能性があることに注意することが重要だと思います。cHaoが以下に指摘するように、重複したコードは分岐するのが大好きです。ほとんどの開発者はおそらくそれを誓うために数回噛まれる必要があります:)
jinglesthula

62

CSS3セレクターRECから:

この::表記は、疑似クラスと疑似要素の区別を確立するために、現在のドキュメントで導入されています。
既存のスタイルシートとの互換性のために、ユーザーエージェントは、CSSレベル1および2で導入された擬似要素の以前の1コロン表記(つまり、:first-line、:first-letter、:beforeおよび:after)も受け入れる必要があります。
この互換性は、この仕様で導入された新しい疑似要素では許可されていません

UAは下位互換性がある必要があるため、CSS2.1に既に存在する疑似要素には、(のみ)ワンコロン表記を使用しても安全であるようです。


1
記録としては、この回答も同様に正解としてマークできます。元の質問の原動力は具体的には前と後の疑似要素でしたが、それはいくつかの貴重な視点を提供します。追加していただきありがとうございます。
jinglesthula 2013年

どのようにしてその結論に達しましたか?私は反対の結論に達しました... 新しい疑似要素に単一のコロンが許可されない場合、習慣に入るのに二重のコロンを使い始めるべきではありませんか?
andrewtweber 2016年

元の質問(IE8)でdoubleを使用すると、@ andrewtweberはCSSを壊します。とはいえ、これを書いている時点では、ほとんどのサイトでIE8の使用率が低いため、重大な影響を与えずに2倍にすることができます。ブラウザベンダーは、永続的な単一の表記法をサポートすることに依存しているかもしれませんが、この時点でコーディングの習慣を切り替えることには何の問題もありません。
jinglesthula

OPの@andrewtweber +1ええ、IE8は2012年に考慮に入れられました。YMMVは2015年にも巨大なB2Bプロジェクトなどで使用されていますが、他のWebプロジェクトでは使用されていません。どちらの表記も、これらの既存の疑似に対して完全に有効です。CSSの縮小化は、1コロン表記を使用して1バイトを獲得します。常に一方の表記を使用し、もう一方の表記を禁止したい場合、それはあなたがチームで完全に自由に使用できる規則ですが、それは推奨事項ではありません。
FelipeAls 2016年

@jinglesthulaとFelipe、そうだね、日付に気づかなかった。ただし、この質問は検索結果の上位に表示されるため、回答を更新する必要があるかもしれません
andrewtweber 2016年

22

@mddwと@FelipeAlsには、1つのコロンを「安全」に使用することを検討することに関して、まったく反対します。

この「廃止予定にもかかわらず使用します」という考え方が、ブラウザベースのテクノロジーの進歩と前進が非常に遅い理由です。

はい、私たちは古い規格との互換性を維持したいと考えています。それに直面しよう、それは私たちが対処してきた手です。ただし、これは、現在の標準を無視して非推奨の標準を優先することにより、開発を遅延させる言い訳があることを意味するものではありません。

現在の標準への準拠を維持しながら、可能な限り多くのレガシー標準をサポートすることが目標です。

:CSS2と::CSS3 で疑似要素を使用する場合、どちらか一方を使用してはなりません。両方を使用する必要があります。

元の質問に完全に答えるために、バージョン2のレガシーサポートを維持しながら、CSS(バージョン3)の最新の実装をサポートする最も適切な方法は次のとおりです。

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

3
ブラウザのベンダは、ブラウザが「正しく」レンダリングすることを望んでいる更新されないコードの量が多いため、古い表記法を無期限にサポートし続けると考えるのはかなり安全だと思います。一方、スタイルのコピーを個別に維持すると、DRYの赤旗が発生すると思います。IE7の市場シェアが下がるまで、シングルコロン表記を使用するのは、怠惰なことよりも実用的だと思います。とはいえ、私は誰よりもウェブを前進させたいと思っています!
jinglesthula 2013年

9
私の答えに「まったく同意しない」場合、W3C RECommendationのmust という単語に完全に同意しないことになります。「アウトゴールは、レガシー規格のできるだけ多くをサポートしながら、現在の規格への準拠を維持することです。」は、RECのこの部分で対処されているものであり、UAが作成者に両方の表記法を使用するよう強制してはならないことを明確に述べていますこれらのUAがこれをどのように行う必要があるかを説明します。よろしければ、CSS WGメーリングリスト(または、このワーキンググループのTwitter @glazou共同議長)までお
気軽にご連絡ください

4
単一のコロンを「安全」として使用することに関してのみ、私はあなたの答え全体に同意しません。新しい疑似要素の互換性は許可されていません。将来の疑似要素はでのみ実装され::ます。あなたのアプローチによれば、個人は疑似要素の使用と:その::ための組み合わせを開始します。古い規格(当面はサポートされる可能性があります)に明示的に準拠することは本質的に悪い習慣であり、合理的に可能な限り回避する必要があります。あなたがその声明に同意しない場合、私たちは単に異なる見解を持っています。
ジョシュアバーンズ

4
互換性が目標である場合、明示的に互換性のある標準に準拠することは、本質的に悪い習慣ではありません。一方、両方を使用するとスタイルが重複します-しばらくコードを記述している人なら誰でも知っているように、重複したコードは単に分岐するのが大好きです。
cHao 2014

8
@JoshuaBurnsもし私の前任者が架空の将来の脅威から保護するためにコードのロードを複製していたなら、私はかなり「ねじ込まれた」と感じるでしょう。
Mark Amery、2015

2

ただし、新しいJavaScriptとCSSの両方にポリフィルを使用することがますます一般的になっているため、新しいダブルコロン(::)構文の使用に固執し、それが必要である限り、古いブラウザーのポリフィルを維持することもできます。


これは本質的に単なるメタ答えです。有用な情報は提供されません。回答が古くなっている場合は、回答に反対票を投じるか、コメントを付けて回答を示します。
TylerH 2016

2
なぜこのようなポリフィルもリンクしないので、さらにググリングすることなく使用できますか?
MightyPork 2016

4
ええ、最初の部分はメタかもしれませんが、2番目の部分は良い答えだと思います。私が作業している場所では、プリプロセッサやポリフィルを使用していません。そのため、受け入れられた答えは私にとってはうまくいきます。しかし、そのようなツールを使用しているショップや開発者にとっては、この答えの方がおそらく役立つでしょう。
jinglesthula 2016年

1

Browser Statsによると、この1年間に米国でIE 8.0が1%未満に低下しました。

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

2015年12月、IE 8.0は市場の2.92%でした。2016年12月、IE 8.0は市場の.77%でした。

その減少率では、IEの古いバージョンのサポートを停止して、疑似要素に::を使い始めるのは最悪の考えではありません。


これは祝うべきことです:)それはまだ状況に依存していることを指摘する価値もあります。Amazonの場合、ユーザーの0.5%は、サイトが壊れていると考えている100万人を超える顧客に相当します。あなたが10人のスタートアップのブログをしているなら、賭け金は異なるかもしれません。
jinglesthula 2017年

アマゾンのような組織については間違いなく真実です。しかし、その.77%は人口全体に均等に分散されていません。アップグレードできないのは、不釣り合いに年配の人やお金の少ない人です。純粋にビジネスの観点からは、これらはおそらく理想的なターゲット市場ではありません。したがって、ほとんどの企業にとって、.77%のグループは、その少数が示唆するよりも重要性が低くなっています。そして、その数は小さくなるだけです。
DR01D 2017年

良い点。アップグレードが困難な戦いとなるもう1つのグループは政府であり、ビジネスグループは特定のブラウザーバージョンでのみ機能するアプリに大きく依存しています(ただし、そのようになっているグループは時間とともに減少します)。あなたが誰もそのようなクライアントのためにコーディングする必要がないかもしれません:)
jinglesthula 2017年

0

両方の表記を含めることは確かに安全ですが、ブラウザが単一の表記を長時間ドロップすることはないので、単一の表記のみで問題ありません(それは有効なCSS2です)。

人格的に私は単一のコロン表記のみを使用し、ほとんどが習慣です。


1
他の答えが明らかにするように、これは少し複雑であり、いくつかの非自明なトラップがあります(たとえば、CSS 3疑似要素のシングルコロン表記のサポートは仕様の明示的な違反であるため、CSS作成者にとって賢明ではないようですこれらのセレクターに単一コロン表記を使用するには)。
マークアメリー2014
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.