Generated content means pseudo elements added to the page via the ::before and ::after. The support for applying transitions or animations to these in the current browser landscape is not great. I think this is a huge bummer, so I’m just making this blog post my permanent home to track the progress on this.
Data in this table is from this test case.
|
3.6 and down | Unsupported |
|---|---|---|
| 4.0 and up | Supported | |
|
6.0.5 and down | Unsupported – bug report |
| 6.1 and up | Supported | |
|
25 and down | Unsupported |
| 26 and up | Supported – Fixed January 3, 2013 | |
|
12.16 and down | Unsupported – wasn’t able to get in here, but Divya Manian confirmed the report exists and is BTS number CORE-29141. |
| 15 and up |
Supported – post Blink conversion | |
|
9 and down | Unsupported |
| 10 and up | Supported – with one weird caveat noted here. |
On mobile, on Safari on iOS 6.1 and down they didn’t work, but they do on Safari on iOS 7.
Why does this matter?
Pseudo elements are really really useful. They help us in our struggle as designers to do fancy things while keeping our markup clean. The bonus design-y bits that pseudo elements are the most useful with are the same kind of design-y bits that transitions and animations are useful for. There is a lot of overlap there. At the time of this writing, the design of this site has animated pseudo elements in the footer. The row of boxes on the bottom have logos that slide in (or should slide in, if this was universally supported).
There is no reason that browsers shouldn’t support this. I understand all about prioritization, so I’m not whining or blaming browsers for not being there yet, but I’m hoping this article helps a bit in keeping it on the radar.
Completely agree, it’s what keeps me using Jquery (not that it’s a bad thing) would just much rather achieve some semantic sexiness with pure CSS.
Just for the record, jQuery doesn’t allow you to animate pseudo elements either.
Not even if you give it an ID and let the DOM be recalculated?
Pseudo elements are not in the DOM, and also cannot have ID’s.
Lol @John, we’ve all been there (I guess)
Ah well, I don’t work to that extent with pseudo elements. Can’t blame me for making what seems like a reasonable suggestion ;)
Heh, yeah sorry if I added any confusion to anyone. I was referring to adding elements with Jquery to keep HTML markup clean. (append, prepend) same deal as pseudo. Would just be nicer with CSS.
It only worked on Firefox for me, the animation one, which was LOVELY, damn. I may have a dumb question, but wouldn’t it be easier to achieve this using the canvas element?
Hey I know this problem. I fixed it with this solution:
Give the DIV some Transitions, put ::after or ::before in the DIV and this is it. But I hope they make it work in 2011.
That means the div will transition, but not specifically the pseudo elements (but they will go along for the ride with the div, you just can’t transition them specifically).
Agreed, It could give a lot of new posibilities. Especially the ‘content’ property together with the ‘@keyframes’, this could make a nice image slider. Displaying a new image every 10 seconds, making it slide left or right, Pure CSS image sliders.
I have been thinking of looking into this, as we’re busy with a complete overhaul on our site, and were hoping to use transitions with a sprite inside the pseudo elements!
What a bummer that it’s not (yet?) well supported!
Those pseudo elements are magical… I can’t wait for the day when IE7 support can be abandoned, and sprites and HTML can be neatened up with these little gems.
Thanks for the heads up, Chris – you’ve saved me hours of headache :)
I’m pretty sure we’re almost at the point where IE7 support can be abandoned. It’s browser share is only 1/2% higher than IE6.
Love the new site Layout!
Modern Architectures. wooHooOO!
Yep, can’t wait for this to be implemented, specifically because it will make transitioning between background images possible on a single element. Thanks Chris for flagging this up, hopefully the browser manufacturers will take note!
I’ve been waiting for the guys at chrome for a long time to fix this…
I normally use Chrome for day-to-day browsing, but having read this post I decided to pull up my Firefox (which I upgraded to version 6 yesterday) to see how the boxes near the footer are supposed to look like. That was all good fun, but I discovered that this website doesn’t pull up properly on my Firefox (maybe it’s only on version 6, I didn’t check the older versions). It seems to only affect the homepage and some post pages, but they either look completely black or only the header shows up when loaded, until I scroll down, and even then not everything shows up when I scroll back up. Very weird.
Only seems to happen when the viewport width is larger than 1024 pixels, at certain width/height combinations (my full-sized Firefox window must be one of those combinations). Maybe it has to do something with the animated reflowing of content, which I didn’t know about before – very cool, by the way.
Pretty cool effect on the boxes down the footer. I remember that effect was there in the previous design, I’m guessing you were using jQuery for that? Cause it used to nicely slide in even on chrome.
CSS3 with jQuery fallback :P
This is great as clean markup is diffidently needed and much loved by myself!
Cheers
I look at the table with browser support and versions and I’m sad.
That’s why it’s still safe to use jQuery for this kind of stuff.
The Canary/dev versions of Chrome (v. 15) don’t have support for transitions & animations on generated content either. So I guess it’s still some time before we will see this in Chrome.
I’m still convinced of the idea that today’s web developer is more of ‘the support every browser and try to make every website the same in every browser’ flow.
We need to move to the new style and add some CSS3 stuff to the new websites which the new browsers support. Don’t give the older browsers jQuery fallback, but let the browser fallback on the text without the shiny CSS3 effects.
This will motivate the user to start using the new browser(versions) right?
I read this on more CSS3 sites and the book i’m reading atm : “The book of CSS3”, and I totally agree to it. More people on this?
Grtzz
I have been a great fan of CSS3 ! but the thing that is hurting , is the stream of non compatible browsers ! I was upto the animations part on my blog but …
I guess , I have to wait