I'm planning to make very responsive website. For this, I'm including external stylesheet currently.

But I want to include it for only those browsers which supports viewport units such as vw.

So, how could I detect for browser that it supports or not.

Please note: I don't want to include modernizer.

I'm planning to make very responsive website. For this, I'm including external stylesheet currently.

But I want to include it for only those browsers which supports viewport units such as vw.

So, how could I detect for browser that it supports or not.

Please note: I don't want to include modernizer.

• javascript
• css

• 5 "I don't want to include modernizer.": why not? Seems like the simplest way of detecting vw units. – Andy Commented Jun 25, 2015 at 10:22

2 Answers 2

In modern browsers you can use @supports in CSS to check support for various things, including viewport units.

Wrap any styles you wish in @supports much like @media queries:

@supports(height: 100vh) {
 .myClass { height: 100vh; }
}

This example tests to see if a browser supports units like vh or dvh or a non-existing type of madeup (i.e. a type that your browser does not know about):

#supportVH::after, #supportDVH:after, #supportMadeUp:after {
    content: "❌ NO";
  color: white;
  background-color: darkred;
    display: block;
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #ccc;
}

@supports(height: 100vh) {
    #supportVH::after {
        content: "✅ YES";
        background-color: lightgreen;
    }
}

@supports(height: 100dvh) {
    #supportDVH:after {
        content: "✅ YES";
        background-color: lightgreen;
    }
}

@supports(height: 100madeup) {
    #supportMadeUp:after {
        content: "✅ YES";
        background-color: lightgreen;
    }
}

<div id="supportVH">Does your browser support <code>vh</code>?</div>
<div id="supportDVH">Does your browser support <code>dvh</code>?</div>
<div id="supportMadeUp">Does your browser support <code>madeup</code>?</div>

In JavaScript you can use it the same way with CSS.supports():

const supportsDvh = CSS.supports('height: 100dvh');

This is the code that Modernizr uses:

  testStyles('#modernizr { width: 50vw; }', function(elem) {
    var width = parseInt(window.innerWidth / 2, 10);
    var pStyle = parseInt((window.getComputedStyle ?
                              getComputedStyle(elem, null) :
                              elem.currentStyle).width, 10);

    Modernizr.addTest('cssvwunit', pStyle == width);
  });

So you can do something similar. Just follow these steps:

1. Set an element with width in vw.
2. Check the puted width of the element to match the viewport's width.
3. If both are same, then your browser supports vw and vh!

Snippet ing soon...

$(function () {
  elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
  halfWidth = parseInt(window.innerWidth / 2, 10);
  $("#checkVw").html("Your browser" + ((elemWidth == halfWidth) ? "" : "does not ") + " support VW and VH");
});

#checkVw { width: 50vw; }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="checkVw"></div>

I checked with IE 7 and it screwed up! ;)