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!

Recent Features

  • By
    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...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

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!