117

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).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
jinglesthula
  • 4,446
  • 4
  • 45
  • 79

6 Answers6

74

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
user123444555621
  • 148,182
  • 27
  • 114
  • 126
  • 7
    thanks for including the info on the comma and the ignore. That probably would have had me (and maybe others) scratching heads for a while. Looks like the best thing when 99% of browsers in use do support the double colon notation is to shift to using that and (because no one will drop single colon support and break the web, so there's not really even a point in later find/replace-ing old code at that point). – jinglesthula Apr 16 '12 at 22:59
  • 2
    This isn't the way forward. Browser progress will be forcibly expedited if people stop pandering to antediluvian, broken, and deprecated browsers. – Gershom Maes Nov 03 '15 at 18:51
  • 2
    @Gershom Maes: That's not for you to say, unfortunately. I think a large portion of developers hope for the same, but it's just not gonna happen. – BoltClock Feb 23 '16 at 06:20
  • 1
    I think it's important to note that maintaining duplicate styles can be problematic. As cHao notes below, duplicate code loves to diverge. Most developers probably have to be bitten by it a few times to swear it off :) – jinglesthula Oct 24 '16 at 20:14
64

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.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • 1
    For the record, this answer could equally well be marked as correct. It provides some valuable perspective, even though the impetus for the original question was specifically the before and after pseudo-elements. Thanks for adding it. – jinglesthula Nov 19 '13 at 22:48
  • How did you come to that conclusion? I came to the opposite conclusion... if single colons will **not be allowed** for new pseudo-elements, shouldn't you start using double colons to get in the habit? – andrewtweber Jan 04 '16 at 19:02
  • @andrewtweber in context of the original question (IE8) using double would break the CSS. That said, as of this writing most sites probably see IE8 usage at such a low level as to allow double without any significant fallout. Browser vendors may be relied upon to support the single notation in perpetuity, but nothing wrong with switching coding habits at this point. – jinglesthula Jan 04 '16 at 21:36
  • @andrewtweber +1 for OP Yep, IE8 was to be taken into account in 2012 and - YMMV - is still in 2015 in huge B2B projects and alike but not in other web projects. Both notations are perfectly valid for these existing pseudos. CSS minification will gain 1 byte by using one-colon notation. If you want to always use one notation and forbid the other, well that's a convention you're completely free to do so with your team but it's not a RECommendation. – FelipeAls Jan 05 '16 at 10:27
  • @jinglesthula and Felipe, you're right, I didn't notice the date. Maybe the answer should be updated though, since this question comes up high in search results – andrewtweber Jan 05 '16 at 15:56
  • @FelipeAls Wouldn't it be best to only use the double-colon notation for all pseudo-elements and let the CSS minifier reduce the syntax in an automated build task? [cssnano](http://cssnano.co/) lists this as one of it's features on the homepage: "Pseudo element double-colon syntax reduction". – Ronald Apr 21 '16 at 12:00
  • @Ronald That's a convention you can adopt but it isn't "better" (or worse). If you still support IE8 (my sincere thoughts and), you'd better use single-colon and make sure Autoprefixer replaces double-colon by single ones otherwise it's a matter of taste. I'm very accustomed to single-colon because even IE7 didn't exist when I begun professionally but that's just a personal habit. – FelipeAls Apr 21 '16 at 12:15
23

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. */
}
Joshua Burns
  • 8,268
  • 4
  • 48
  • 61
  • 3
    I think it is pretty safe to assume that browser vendors will continue to support the old notation indefinitely due to the amount of code that will realistically never be updated that they want their browser to render 'correctly'. On the other hand, maintaining separate copies of the styles raises the DRY red flag, I think. I think it's more pragmatic than lazy to use the single-colon notation until IE7 market-share drops off. That said, I want the web to move forward as much as anyone! – jinglesthula Nov 19 '13 at 22:52
  • 10
    If you "*absolutely disagree*" with my answer, then you're absolutely disagreeing with the word *must* in a W3C RECommendation. "*Out goal should be to maintain compliance with current standards, while supporting as much of the legacy standard as possible.*" is what is being addressed by this part of the REC and it explicitly states that UAs mustn't force authors to use both notations and explains how this must be done by these UAs. Feel free to contact CSS WG mailing-list if you're not OK with that (or on Twitter @glazou co-chairman of this Working Group) – FelipeAls Nov 21 '13 at 09:36
  • 4
    I don't disagree with your entire answer, only regarding the use of a single colon as "safe". **compatibility is not allowed for the new pseudo-elements** means any future pseudo-elements will only be implemented in `::`. According to your approach, individuals will then start to mix-and-match the use of `:` and `::` for pseudo-elements. Adhering explicitly to old standard (which for the time being may be supported,) is an inherently bad practice and should be avoided whenever reasonably possible. If you disagree with that statement, we simply hold different views. – Joshua Burns Nov 21 '13 at 18:11
  • 4
    Adhering to an *explicitly compatible* standard is inherently *not* a bad practice, if compatibility is a goal. On the other hand, using both leads to duplicate styles -- and as anyone who's coded for a while knows, duplicated code just loves to diverge. – cHao Feb 10 '14 at 12:50
  • 2
    If you really want to use both notations, you can throw all your rules with the old notation into a separate stylesheet reserved for IE8 and older with a conditional comment, since those are the only browsers/versions that are still relevant at the time of this writing that support the old notation without supporting the new one. From a pragmatic stance, it is utterly pointless to include both notations in the same stylesheet unless you're a wizard with PE or GD or whatever with CSS and can figure out a way to make the legacy pseudo-elements relevant even when CSS3 features are not supported. – BoltClock Apr 28 '14 at 12:47
  • @BoltClock that is a great suggestion, as most interfaces of any complexity end up with IE-specific stylesheets anyways. – Joshua Burns Apr 28 '14 at 14:49
  • -1. Yes, eventually we want developers to stop using the legacy selectors (since they break the otherwise-elegant system of using single colons for pseudo-classes and double colons for pseudo-elements). However, how soon that happens is *not affected at all* by whether developers right now use only the single colon syntax or use both. To support legacy documents, new browsers will need to support this syntax forever anyway - but once IE 8 finally dies, web developers can abandon the single-colon syntax forever. What advantage is gained from people using both syntaxes in the interim? – Mark Amery Aug 31 '14 at 15:55
  • @Mark Amery: Forward compatibility. Why wait until IE8 dies to implement the appropriate syntax? – Joshua Burns Sep 22 '14 at 15:55
  • @JoshuaBurns There is no forward compatibility issue, here, though. Browsers - and the CSS spec - will likely *never* be able to drop support for the old syntax, because there are documents out there that use it that are unmaintained and will never be updated. There is no reason to fear that some day the old syntax will cease to work. – Mark Amery Feb 03 '15 at 15:23
  • 1
    @Mark Amery, betting on something you have no control over or view into the future of is a foolish practice. As a programmer, you can do the minimum, the good enough; but that sort of programming ends up screwing anyone who inherits your projects in the future. – Joshua Burns Feb 11 '15 at 18:37
  • 8
    @JoshuaBurns If my predecessor had duplicated a load of code to protect against an imaginary future threat I would feel significantly more "screwed". – Mark Amery Feb 11 '15 at 18:40
  • I always prefer to keep the most recent notation as the last line. By doing so, you make sure that the latest standard is always used. In your code example, the "old" CSS 2.1 standard will always be used (as long as the browser supports it). – Bram Vanroy Jun 06 '16 at 08:22
2

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.

Kalle Richter
  • 8,008
  • 26
  • 77
  • 177
zpr
  • 2,886
  • 1
  • 18
  • 21
  • This is essentially just a meta answer; it doesn't provide any useful information. If an answer is outdated, downvote it and/or comment on it indicating such. – TylerH Aug 11 '16 at 13:38
  • 2
    why not also link such a polyfill, so we can use it without further googling? – MightyPork Sep 30 '16 at 12:07
  • 4
    eh, the first part may be meta, but I think the second part is a good answer. Where I work we don't use a preprocessor and/or polyfills, so the accepted answer works for me. But for any shop or dev that uses such tools, this answer is probably more useful. – jinglesthula Oct 07 '16 at 15:17
1

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.

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

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.

DR01D
  • 1,325
  • 15
  • 32
  • Which is something to celebrate :) It's also worth pointing out that it depends on the situation still. If you're Amazon, 0.5% of your users equals over a million customers who think your site is broken. If you're doing a blog for a 10 person startup, the stakes may be different. – jinglesthula Jan 26 '17 at 18:19
  • Definitely true about an organization like Amazon. But that .77% isn't evenly distributed across the entire population. It's disproportionately old folks or people with little money that can't upgrade. From a purely business standpoint those probably aren't ideal target markets. So to most companies the .77% group is even less significant than what that small number suggests. And that number will only get smaller. – DR01D Jan 26 '17 at 19:02
  • Good points. Another group where upgrading is an uphill battle is government and business groups rely heavily on apps that will only work with a certain browser version (though thankfully groups that are that way will diminish over time as well). May none of you ever have to code for such a client :) – jinglesthula Jan 27 '17 at 16:32
0

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.

mddw
  • 5,570
  • 1
  • 30
  • 32
  • 1
    As the other answers make clear, it's a bit more complicated than this and there are some non-obvious traps (e.g. supporting single-colon notation for CSS 3 pseudo-elements is an explicit violation of spec, so it seems wise for CSS authors not to use the single-colon notation for those selectors). – Mark Amery Aug 28 '14 at 14:05