web-dev-qa-db-ja.com

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

IE7とIE8は擬似要素の二重コロン表記をサポートしていないため(例:::afterまたは::first-letter)、および最新のブラウザはシングルコロン表記をサポートしているため(例::after)後方互換性のために、シングルコロン表記のみを使用し、IE8の市場シェアが無視できるレベルまで低下した場合、コードベースで戻って検索/置換する必要がありますか?または、両方を含める必要があります:

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

IE8ユーザー(親愛なる貧しい人々)を気にするなら、doubleだけを使うのはばかげているように思えます。

106
jinglesthula

not両方をコンマと組み合わせて使用​​します。 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コロン表記法を使用できます。

69

From CSS3 Selectors REC

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

UAには下位互換性が必要であるため、CSS2.1にすでに存在する擬似要素に対して(1つの)コロン表記を使用しても安全だと思われます。

61
FelipeAls

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

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

はい、古い標準との互換性を維持したいです。それに直面しましょう、それは私たちが扱ってきた手です。しかし、これは、廃止された標準を支持して現在の標準を無視することにより、開発で怠zyになる言い訳があるという意味ではありません。

目標は、できるだけ多くのレガシー標準をサポートしながら、現在の標準への準拠を維持することです。

疑似要素がCSS2で:とCSS3で::を使用する場合、どちらか一方を使用しないでください。 bothを使用する必要があります。

元の質問に完全に答えるために、以下は最も適切な CSSの最新の実装をサポートする方法(バージョン3)であり、バージョン2のレガシーサポートを保持しています。

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

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

2
zpr

ブラウザの統計によると、その価値はIE 8.0は過去1年間で米国で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の古いバージョンのサポートを停止し、Pseudo Elementsで::の使用を開始するのは最悪の考えではありません。

1
DR01D

両方の表記法を含める方が確かに安全ですが、長い間単一の表記法を落とすブラウザはないので、1つの表記法だけで十分です(有効なCSS2です)。

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

0
mddw