Detect Pseudo-Element Animation Support

By  on  

A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations.  Lea Verou recently posted another detection snippet driven by CSS animations:  detecting pseudo-element animation support.  Here's how she did it!

The CSS

The test case can use any pseudo-element; in this case we'll use :before:

/**
 * Animation on pseudo-elements test
 */
@keyframes color { from,to { color: rgb(0, 255, 0); } }

.testElement:before {
	content: '(...testing animation support...)';
	color: rgb(255, 0, 0);
	animation: color 1s infinite;
	-webkit-animation: color 1s infinite;
}

A simple color animation is assigned to the pseudo-element and a spot-check of generated content will tell you if animation is supported (green) or not (red).  At the time of this post, only Firefox and Chrome support animation of psuedo-elements.

JavaScript Detection

Thanks to a tip from Ahmed El Gabri, I can present a method to detect pseudo-element animation:

var color = window.getComputedStyle(
	document.querySelector('.testElement'), ':before'
).getPropertyValue('color')

if(color == 'rgb(0, 255, 0)') {
	// Supported! :)
}

The same principal applies; if the color is green, the animation worked. A JavaScript method of feature detection makes everything better!

Unfortunately there doesn't appear to be a JavaScript method for testing generated content properties, so a spot check appears to be all we can rely on at this point.  Hopefully someone clever out there can figure out an efficient way to get the test result! Having a reliable method for detecting pseudo-element animation is excellent; another tool to add to the arsenal!

Track.js Error Reporting

Recent Features

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

Discussion

  1. Actually, Chrome 26 added support for animating psuedo-elements, which was released to stable this week!

  2. I don’t know if this helps but I think you can check generated content properties, try this

    window.getComputedStyle(document.querySelector('.testElement'),':before').getPropertyValue('color'); 
    

    I read about it here http://adactio.com/journal/5429/

  3. Works like a champ in Chrome too!

    Maybe David needs an update ;)

  4. Updated my Chrome and I see green — yay!

  5. Didn’t IE (up to 10) not support the second argument in getComputedStyle() until recently? Did they fix it? I recall somebody reported it and they said it was by design (!).

  6. I have installed chrome online, but still it does not supporting Pseudo-Element. However, my Mozilla is showing green text …

  7. Rob Riggs

    What if I want to change the content property of the psuedo class, by keyframe? Any takers? Thanks!

  8. Greg Whitworth

    This works on IE internally (screenshot: http://imgur.com/9xc43rf). So in the next version of IE this will work :)

  9. Thanks for the tricks! I just wrote a isolate javascript file, if anyone’s interested.

    Tested on IE9, Chrome, QQ Mobile Browser.
    https://gist.github.com/chuyik/80af1383d215d4dff6fe

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!