Fallback for CSS Attributes Without Unit

Fallback for CSS attributes without unit

I don't see a doctype declaration in your HTML, so I can only assume your test page is being rendered in quirks mode.

1. Why would it fallback to px? Is pixel always a preferred unit? Is there any rule defined in W3C working draft or recommendation?

   It will only fall back to px in quirks mode (and I believe only for certain properties). And yes, px is the preferred fallback unit. This harks back to the legacy HTML width and height attributes which accepted pixel lengths as unitless numbers.

2. Is there a rule which makes it mandatory for a UA to fallback to a preferred unit?

   No, hence the inconsistent behavior you observe. In standards mode, though, a UA needs to ignore length values without units; the unit is not optional, as mentioned in Microsoft Connect which you quote.

   In CSS2.1, all non-zero length values must have units.

3. Given the above example, which of the following is a correct behavior:

   • Internet Explorer: In Quirks mode (IE6,5,4..) width and border-width used to fallback to px. Since IE7 (till present, IE10RP) it ignores the whole rule if unit is missing. Therefore both rules were ignored.
   • Firefox 13: In the above example width fallback to px, but border-width was ignored.
   • Chrome 19, Opera 12, Safari 5.1.2: Both width and border-width fallback to px.

   Again, based on the assumption that your page is in quirks mode, I can only say that while the specifications make a mention of quirky behavior, the specific details of such quirky behavior aren't defined in the specifications (for both obvious and not-so-obvious reasons).

   I'm guessing Microsoft changed the quirks-mode behavior in IE7+ to reflect standards behavior for unitless values, as quirks mode exists in all browsers (except IE < 6) and is triggered with the same improper doctype or lack of a doctype. The behavior in standards mode has not changed, though, as far as I'm aware.

How to write css fallbacks for vh vw

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?

What is a fallback?

Fallback Example

Lets say you want to work with mediaqueries but not every browser can handle it.

<link rel="stylesheet" media="all" href="fallback.css" />
<link rel="stylesheet" media="screen and (min-width: 900px)" href="advanced.css" />

So in this case every browser that cannot handle media queries falls back to "fallback.css" at least. Those that support media queries will load fallback.css AND advanced.css if the media query matches the specification of the device (keyword: progressive enhancement)!

The same applies to the actual question where font-size: ($sizeValue * 10) + px; is the fallback for those browsers that don't support font-size: $sizeValue + rem;. Or in short: browsers that don't support the rem-unit on CSS values fallback to the CSS value with the px-unit.

From this context the fallback should deliver a minimum state - so to say...

Some Common Fallback Examples

• When you declare CSS body{ font-family: super-fancy-font, Arial, sans-serif } then those that don't have the font "super-fancy-font" installed will fall back to "Arial" but again only if Arial is installed and otherwise you tell the browser to take the standard font without serifes.
• If you use the <noscript>-tag this normally is a fallback for
  browsers that don't support javascript. In this example browsers that
  support javascript will not load the content wrapped by <noscript>.

Fallback Example | "The Barbecue Mode" (just for the fun)

Let's assume you want to make a barbecue and you love to see the whole audience beeing happy! You remember those nice spare ribs from last barbecue that you really liked and put them on your list.

But wait; you remember that some of your wives good friends (from the yoga course) are vegeterians and jepp that's a no brainer you must not dissappoint your wives buddies so let's have a fallback for those that don't like meat and put mozarella sticks on your list.

Suddenly you remember those buddhist monks you invited last sunday when you asked them to come expecting them to say "NO" but nonetheless they agreed. So let's have another fallback for those that eat vegan and put a lot of nice vegetables and fruits on your list.

By now you have an ideal barbecue setup:

1. Everybody can have delicious vegetables and fruits.
2. Anybody who is able to eat cheese can have it.
3. And those who want to eat meat they can have it also.

So every group has its appropriate fallback and will have the best possible experience!

wikipedia.org

Fallback is a contingency option to be taken if the preferred choice is unavailable. [...]

wiktionary.org

[...] an alternative which can be used if something goes wrong with the main plan [...]

CSS variable with fallback value of itself

Generally CSS can't do if/then/else, but when using i.e. var one can, kind of.

Using var() you can define a fallback value when the given
variable is not yet defined

The second (optional) argument, the declaration-value, has some limits though.

The production matches any sequence of one or more
tokens. So, as long as the sequence does not contain
, , unmatched <)-token>, <]-token>,
or <}-token>, or top-level tokens or
tokens with a value of "!" ,it represents the entirety of what a valid
declaration can have as its value.

Src:

• MDN CSS Var
• MDN Using CSS variables

This won't work

:root{   --myOld: lime;  --myVar: var(--myNew, --myOld) }
div {  color: var(--myVar)}

<div>Hey there</div>

selector {
  prop: 20px; /* for browser without support for variables */
  prop: var(--my_var, 20px); /* for browser with support for variables */
}

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}