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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

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!