10

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?

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
Cremix_hellven
  • 895
  • 2
  • 7
  • 13

2 Answers2

17

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

Axel
  • 3,331
  • 11
  • 35
  • 58
  • 1
    What happens when a browser can support both? – Cremix_hellven Aug 19 '14 at 07:54
  • Then the browser will get both! I just gave this as an example and would not recommend using it in "wild life" because it would need 2 connections (in this is expensive) – Axel Aug 19 '14 at 07:57
  • 1
    @Cremix_hellven Just to note though that's only in the examples given here, not specific to the word "fallback", which is generally an alternative. In your example the `rem` declaration would be used, as it comes after the `px` one, so replaces it. – anotherdave Aug 19 '14 at 07:59
  • if it's still not 100% clear just tell us and we can clearify even more :) – Axel Aug 19 '14 at 08:00
  • @Cremix_hellven see the noscript example in my edited answer. – Axel Aug 19 '14 at 08:04
  • Thanks you very much. I think it's quiet clear. What I need now it's to understand more sass, so it's research time!!! ;) If you know some guide where I can use to understand things like this code, please let me know. I'll start with [http://sass-lang.com/documentation/file.SASS_REFERENCE.html] – Cremix_hellven Aug 19 '14 at 08:24
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...

i100
  • 4,529
  • 1
  • 22
  • 20