How to write css fallbacks for vh vw

Question

Can anyone explain how fallbacks work in CSS? I am trying to set it up for vh and vw and clearly I am not getting it...

Here is my attempted solution, which does not work. The height property is taken every time.

CSS:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */

Karlakarlan

Answer 1

Your Code (and why it doesn't work)

Looking at your original code, I have a couple of comments:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px;  /* The Fallback */

The prefixes, the -webkit- bit, only apply if there is a prefixed property by that name. Height doesn't have a prefixed property, so the browsers just ignore those declarations.

(Tip: You can check something like MDN to see what properties exist.)

Solution:

In this case, we can take advantage of the fact that, if browsers encounter a property or a value that they don't understand, they ignore it and move on. So, what you're looking for is something like:

height: 41px;
height: 5.2vh;

The browser sees height: 41px, as expected. It parses that, and knows what to do with it. Then, it sees height: 5.2vh. If the browser understands the vh unit, it will use that instead of 41px, just like color: blue; color: red; would end up being red. If it doesn't understand the vh unit, it will ignore it, and, because we defined the fallback first, the fact that the browser ignores the vh unit doesn't matter.

Make sense?

Erinn

Please remove the first part of your answer, or prefix it with "Your Code" as it looks at first glance like the first code snippet is the Accepted Answer. Which confused me as px "The Fallback" should be before vh, as you describe later on in your answer. – Maddi

I like your edit; as soon as I can figure out how to use it, or it gets reviewed by enough people, I'm fine with it. – Erinn

I only just realised after going through my profile stats that even though YOU liked the edit, it got totally rejected by other people as This edit does not make the post even a little bit easier to read, easier to find, more accurate or more accessible. Changes are either completely superfluous or actively harm readability. and his edit was intended to address the author of the post and makes no sense as an edit. It should have been written as a comment or an answer. Sigh, can't win can we :P Cheers for the vote of confidence tho. – Maddi

To the last editors: I agree that the fallback should come first, but I was quoting the original code. Cheers! – Erinn

Answer 2

Place your fall back above you other values. If the overriding values dont work on a browser, the first value is used.

 height: 41px;  /* The Fallback */
height: 5.2vh;

Floatfeed

Answer 3

The properties -moz-height, -webkit-height, -o-height, and -ms-height are not valid extension properties, they're not defined by any of the UA implementations.

You're getting height: 41px as the winning value because -webkit-height (in Chrome or Safari) isn't being recognised at all, but height: 41px is.

You'll want to use this:

height: 41px;    
height: 5.2vh;

...with this code, browsers will first recognise height: 41px, then if they recognise height: 52.vh that will be applied, otherwise they'll revert to the last "good" value: 41px.

Histo

Answer 4

You may consider height: 33.28px as 1vh = 4.8px. Otherwise the above answers are great.

Tenorite

viewport height, means its based on the viewport of your device, what if i got with my laptop of 1300 by 780 to the site .. 1 vh gets a whole different meaning than 1920 x 1080 vh... – Dysphonia