JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<p>How does your browser rank with <code>vh</code>/<code>vw</code> support?</p>
<ul>
    <li id="vh"><code>vh</code></li>
    <li id="vw"><code>vw</code></li>
</ul>

CSS

.pass { color: green }
.fail { color: red }

/* These won't show up in browsers that don't support pseudo elements, but the color will still show the support level */
.pass:after,
.fail:after {
    font-weight: bold;
    font-size: 0.75em;
}

.pass:after {
    content: " PASS";
}

.fail:after {
    content: " FAIL";
}


body { font-family: Helvetica, Arial, sans-serif }

JavaScript

var viewportUnitSupport = (function () {
    var supports = { vh: false, vw: false },
        div = document.createElement( 'div' );
    try {
        div.style.height = "50vh";
        supports.vh = ( div.style.height === "50vh" );
    } catch ( e ) {}
    try {
        div.style.width  = "50vw";
        supports.vw = ( div.style.width === "50vw" );
    } catch ( e ) {}
    return supports;
})();

for ( unit in viewportUnitSupport ) {
    document.getElementById( unit ).className = viewportUnitSupport[ unit ] ? "pass" : "fail";
}