Should I use single or double colon notation for pseudo-elements?
CssInternet Explorer-8Css SelectorsInternet Explorer-7Pseudo ElementCss Problem Overview
Since IE7 and IE8 don't support the double-colon notation for pseudo-elements (e.g. ::after or ::first-letter), and since modern browsers support the single-colon notation (e.g. :after) for backwards compatibility, should I use solely the single-colon notation and when IE8's market share drops to a negligible level go back and find/replace in my code base? Or should I include both:
.foo:after,
.foo::after { /*styles*/ }
Using double alone seems silly if I care about IE8 users (the poor dears).
Css Solutions
Solution 1 - Css
Do not use both combined with a comma. A CSS 2.1 compliant (not CSS3 capable) user agent will ignore the whole rule:
> When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well. > >CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.
http://www.w3.org/TR/CSS2/syndata.html#rule-sets
You could however use
.foo:after { /*styles*/ }
.foo::after { /*styles*/ }
On the other hand this is more verbose than necessary; for now, you can stick with the one-colon notation.
Solution 2 - Css
From CSS3 Selectors REC:
> This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).
This compatibility is not allowed for the new pseudo-elements introduced in this specification.
It seems you're safe using (only) one-colon notation for pseudo-elements that already existed in CSS2.1 as UAs must be backward compatible.
Solution 3 - Css
I absolutely disagree with @mddw and @FelipeAls, in regards to considering the use of one colon "safe".
This "I'll use it even though it's deprecated" mentality is exactly why browser-based technologies are so slow at advancing and progressing forward.
YES, we want to maintain compatibility with old standards. Let's face it, it's the hand we've been dealt. BUT, this does not mean you have an excuse to be lazy in your development, by ignoring current standards in favor of deprecated ones.
Out goal should be to maintain compliance with current standards, while supporting as much of the legacy standard as possible.
If pseudo-elements use : in CSS2 and :: in CSS3, we should not be using one or the other; we should be using both.
To fully answer the original question asked, the following is the most appropriate method of supporting the most current implementation of CSS (version 3), while retaining legacy support for version 2.
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
Solution 4 - Css
However, it's become increasingly popular to use polyfills for both new javascript and CSS, so you might just want to stick with using the newer double-colon (::) syntax, and maintain a polyfill for older browsers, so long as that is necessary.
Solution 5 - Css
For what it's worth according to Browser Stats IE 8.0 has dropped to less than 1% in the USA over the past year.
In December 2015 IE 8.0 had 2.92% of the market. In December 2016 IE 8.0 had .77% of the market.
At that rate of decline it wouldn't be the worst idea to stop supporting old versions of IE and start using :: for Pseudo Elements.
Solution 6 - Css
Including both notations is certainly safer, but I can't see any browser dropping the single notation for a long time, so only a single one'll be fine (it's valid CSS2.)
Personnaly I only use the single colon notation, mostly by habit.