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 */ 

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?

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;