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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Styling CSS Print Page Breaks

    It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

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!