I’m going to be giving some talks this summer regarding pseudo elements and all the neat things you can do with them. One of the cool things about them is that the browser support is actually pretty good – much better than some CSS3 stuff. And in fact, you can replicate some CSS3 stuff with them (like multiple backgrounds, kinda)
I wanted to make a browser compatibility chart so it’s very clear exactly what kind of support you’ll get if you use the pseudo elements :before and :after. My research was mostly based on this quick demo page. I viewed that page in browsers I can run myself, ran it through BrowserShots, and last case scenario, looked up documentation on older browsers.
|
3.5 and up |
Supported Bonus: Firefox 4 can transition them |
|---|---|---|
| 3.0 and down |
Partial Support Does not support positioning or floating on the elements. |
|
|
Tested: 4 and up Apparently: 1.3 and up |
Supported |
|
All versions | Supported |
|
6 (docs) and up | Supported |
|
9 and up | Supported |
| 8 |
Partial Support z-index not respected, must use a doctype, must declare a :hover state if you use :hover:after/:hover:before |
|
| 7 and down | Unsupported |
Support Levels
Let’s take three different sources of data. The percentages listed are calculated (June 2011) from the last month of visitors by adding up the percentage of visitors from each version of each browser where pseudo elements are supported.
| W3Schools Browser Usage Data | 91.9% |
| CSS-Tricks (via my Google Analytics) | 97% | StatCounter | 84.8% |
Needs updating…
If anyone has access to older browsers and can do testing, that’d be awesome.
- I only have proof of Safari 4+ working, but saw documentation of 1.3+ supporting them.
- I only have proof of Opera 7+ working, but saw documentation of 6 supporting them. Might go back even further.
- Any other quirks not yet mentioned…
Thanks for sharing. I really like this feature of CSS and have used it in what I think is a very cool way to make very semantic code.
I wanted to have a comma separate list with a period at the end of the list. Lists in HTML should be formatted into ul or ol with li children. I accomplished both with the :after psuedo-class
ul li:after { content: “, “; display: inline; padding-right: 5px; }
ul li:last-child:after { content: “.”; }
You can see it in action here:
http://u.milesplit.com/meets/78374
What’s the difference between :before / :after and ::before / ::after?
I don’t know where the heck I got the double colon from, but it still works fine on my sites. I already changed my code to the standard :before and :after, but I’m curious as to why it didn’t blow up in my face before.
Good question.
Double-colon is the official way to do it. It’s to distinguish pseudo elements from pseudo selectors. Like when you are adding something to the page that isn’t already there, or selecting something that isn’t a “real” html element.
The problem is that IE 8 (I think) just ignores double colon selectors, so you gotta use single for that to work. And all browsers ALSO support single colons, so might as well just use single.
Before CSS 3, single colons were used for both pseudo elements and pseudo selectors. CSS 3 differentiates between the two with the use of double and single colons. Double colons are to be used on pseudo elements, where single colons are to be used on pseudo selectors.
Louis Lazaris has a great article about use of double and single colons. http://www.impressivewebs.com/before-after-css3/
If you read the comments on that article, Stephen posted a nice example of the difference between pseudo elements, and pseudo selectors also.
I’ve been looking into pseudo elements a lot more lately and this chart is a great find!
You guys may be interested in this jQuery plug-in by Luke Lutman that is supposed to “support” :before and :after in IE.
I havnt tested it out but so I can’t vouch for it but maybe this will patch up use in IE 7.
IE7 is really the only thing that holds me back from using pseudo elements in commercial sites.
Im curious if anyone has any suggestions for graceful degradation for pseudo elements in IE 7?
Ha! So I had it right with the double colons, I’ll change it back then. Thanks for the comments guys.
I don’t understand why the double colon format even exists. Why do we *need* to distinguish between pseudo-elements and pseudo-selectors?
Just thought I’d mention that pseudo elements in WebKit don’t support CSS transitions, while they do in Firefox 4. I haven’t really checked this since January, though, so maybe things have changed.
Beat me to it!
Still no support for this in WebKit. I hope they implement soon, since it allows you to do some pretty neat stuff, like fading between multiple background images on a single element, etc.
Correct. It’s Firefox 4 only. Bugs have been filed for all other browsers though. I almost feel like it’s grievous enough to list “Partial Support”, but for now, I’ll list it as a bonus for Firefox 4.
Thanks. I’ve been going crazy wondering why CSS transitions didn’t work on Webkit browsers.
Also, is it still not possible to transition CSS gradients?
Other things weird – CSS rotated elements look jagged or aliased on the iPhone, but fine in Safari.
When applying text-shadow to text (obviously), fonts appear much thinner in Chrome 11.x for Mac.
You can transition background-position, which if it’s a gradient it’s a background-image, so you can at least move them around. I’m not sure if you can transition the colors used. Make a reduced test case!
Just curious… why do we need testing for such old browsers? Is anyone really using Safari 1.0?
Probably not, but I really like to get in the habit of being VERY SPECIFIC about what browser support for things is. When you write a blog post or speak about something and just go around saying “works in modern browsers”, that doesn’t serve us very well.
Yeah, Opera can do gradients now, but only linear, and only since very specifically 11.10, and only with a vendor prefix. That’s a lot of insider knowledge kinda stuff that web designers should be aware of and keeping up to date on.
It makes for a more timeless resource as well. Next time you need to know the browser support on pseudo elements, where ya gonna go? =)
I’m glad that there’s great support for these pseudo elements, as I already use them in my sites for some great effects.
One way I use them is as an image rollover.
I have several images of the same size that are wrapped in anchor tags. Then i target the anchor tag with:
a:hover:after
The every image has a rollover of a transparent image with some text.
Not that it needs to be said, but “F*** you IE7!” Keepin’ me from using these :(
Great round-up! Does anyone know if there’s a way to see the content generated by the pseudo elements in firebug/developer tools etc? I got caught out the other day by an issue with someone else’s code and couldn’t figure out where some content was coming from. It turned out to be a pseudo element.
With developer tools (webkit) if you select the element that they are a part of, you can see and alter the CSS for them. But you can’t select the pseudo element directly. All the dev tools projects are aware of this kinda-bug.
Hmm, never noticed that IE7 doesn’t support them.
Fortunately, I’ve only ever used them for a relatively minor site but for the sake of giving IE7 users a decent looking site (I simply used before/after pseudo-elements to add top and bottom graphics to a couple of side panels), it looks like I’ll have to give them a nice back-up.
To be a little pedantic (because I get it wrong all the time, myself), I think, technically, : is a pseudo class, and :: is a pseudo element.
But yeah…who cares. haha. Bookmarked.
Yeah I mentioned that above a little bit. Basically I advocate using single colons because all browsers support that and some (IE 8) ONLY support that.
Firefox 4.0 in Windows and Linux has a bug with :before and :after, so as of now its only partially supported.
https://bugzilla.mozilla.org/show_bug.cgi?id=646053
A cool trick that I use :before and :after for is for facebook to tell me in more detail about when an update was posted…
abbr.timestamp:before { content: attr(title) ” [“; }
abbr.timestamp:after { content:”]”; }
WoW Chris, this chart came in handy. Just bookmarked it. Now sharing with friends. Great, Simply Great.
I was kinda surprised to find that Selectivizr doesn’t add functionality for :before and :after but have since read that this is due to DOM manipulation causing conflicts (http://bit.ly/i3liNQ)
Does anyone know of any solutions to using :before and :after in older browsers or are we sticking to progressive enhancement for the moment?
I’ve checked some old browsers, to check out the support for these pseudo elements.
Opera 3.0: No support (for any CSS, actually)
Opera 3.6: No support
Opera 5.02: Support for both :before and :after
Netscape 4.79: No support (it crashes)
Netscape 6.01: Partial support (p:before and p:after working, while div:before and div:after weren’t working – crashed after a while)
Netscape 7.01: Partial support (same as 6.01, but doesn’t crash)
SeaMonkey 1.0: Partial support (same as Netscape 7.01)
It’s amazing how Netscape 6.01 (released in 1998), Opera 5.02 (released in 2000) and SeaMonkey 1.0 (released in 2005) all supported this – even partially – while Internet Explorer 7 (released in 2006) didn’t.
CSS3 transitions on pseudo elements only seem to work in FF4 so far…
Here’s a quick demo animating button gloss on hover: http://j.mp/l70BVq
Curious if anyone had other (better?) resources for browser usage levels? Chris you mentioned in screencast #98 that you were going to update the link on this post.
As of the date of this comment, I updated the above article to list three sources.
http://www.quirksmode.org/css/contents.html#t15 here’s another useful chart showing support for these :: pseudo selectors.
How to make “:after” “:before” pseudo selector compatible with IE browser? In IE 8 its not working..
Hello Chris Coyier, i am in Trouble with IE 8, i am adding :before pseudo element to an anchor all Browser’s work perfectly but not in IE8, is any other great way to sort out this issue.
a:before{
content: ‘+’;
background:url(‘images/bg-hover.png’) repeat left top;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
}
ie 9: element need to have background, or content, not just ” .