JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<script src="http://dougneiner.s3.amazonaws.com/amplify/modernizr.custom.54348.js"></script>
<p class="c1">A Sample Heading</p>
<p class="c2">A Sample Heading</p>
<p><span class="pass">YES</span><span class="fail">NO</span></p>

CSS

.c2 { letter-spacing: -0.01em; }
.pass {color: green; }
.fail { color: red; }
.pass, .fail { display: none; }
.subpxspacing .pass,
.no-subpxspacing .fail { display: block }

JavaScript

Modernizr.addTest( "subpxspacing", function () {
    var div = document.createElement( "div" ),
        span = document.createElement( "span" ),
        offsetSpan = document.createElement("span"),
        body = document.body,
        faked = false,
        width, pass;
   
    if ( !body ) {
        faked = true;
        body = document.createElement('body');
        body.style.background = ""; // Avoid crashing in IE8 when background image is used
        document.documentElement.appendChild( body );
    };
    
    span.innerHTML = "AB";
    offsetSpan.innerHTML = "CD";
    
    span.style.fontSize = "30px";
    span.style.fontFamily = "Arial, sans-serif";
    
    div.appendChild( span );
    div.appendChild( offsetSpan );
    
    body.appendChild( div );
    
    width = offsetSpan.offsetLeft;
    
    span.style.letterSpacing = "-0.01em";
    
    pass = width !== offsetSpan.offsetLeft;
    
    if ( faked ) {
       document.documentElement.removeChild( body );            
    } else {
       body.removeChild( div );
    }

    return pass;
});