Pseudo Element Feature Detection

This particular unit test checks for the presence of ::-ms-clear support in the browser. The same approach, if I'm not mistaken, should be sufficient for any other pseudo-element.

by dougneiner

HTML

<p>This particular unit test checks for the presence of ::-ms-clear support in the browser. The same approach, if I'm not mistaken, should be sufficient for any other pseudo-element.</p>

JavaScript

// Store our results in supported variable
var supported = (function () {
    
    // Because we're professionals, amirite?
    "use strict";
    
    // Get an input element, initial height, and reserve d for height difference
    var e = document.body.appendChild(document.createElement("div")), 
        h = e.offsetHeight, d;
    
    // Could add some randomness to really seal things up
    e.className = "msClear";
    
    // Avoid syntax errors
    try {
        document.styleSheets[0].addRule(".msClear:before", "content:'';display: block; height: 100px");
    } catch (o) {  }
    
    // If the pseudo-element exists, our height should be much larger
    d = e.offsetHeight > h;
    
    // Clean up
    document.body.removeChild(e);
    
    // Return our results
    return d;

}());

// If it's true, we have support!
alert( supported );