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

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;

Answer 2

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.

Answer 3

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?