What is a fallback?

Question

I'm not native English speaker and I want to be sure I know what "fallback" means. I've checked that it can refer to a "Plan 'B'". More specifically, I've read this sentence from a file "For using REM and a fallback".

// Mixin: Font Size
//
// For using REM and a fallback
//
// usage:
// @include font-size(1.2);
//
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

I also want to know what "fallback" means in this context. "Fallback" is it one of the two options? Are they using Fallback Pattern?

Answer 1

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 [...]

Answer 2

REM is CSS unit for font-sizes (I guess by your source) and fallback (in Sass or LESS) gets rem working in all browsers...