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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

  • By
    Scroll IFRAMEs on iOS

    For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari.  For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...

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!