Home html What is falback in layout?

What is falback in layout?




From English Word Fallback can be translated as Backup . That is, in other words, you are trying to leave the backup option to display a particular element in case of problems with the display of styles, JavaScript or jQuery. As far as I understand, in the layout questions, this method (Fallback Techniques ) is very relative to the issues of cross-browser compatibility.

Banal example of how everyone is now drawing rounded edges at the elements:

# RoundBox {
 -Webkit-Border-Radius: 5px; / * Safari * /
 -Moz-Border-Radius: 5px; / * Firefox * /
 -O-Border-Radius: 5px; / * Opera * /
 Border-Radius: 5px;

If the user’s browser does not support CSS3, it will see a rectangle that has all the necessary functionality. That is, the basic view of the element will appear – this is Fallback (backup ) insurance.

If in the previous example it was, roughly speaking, Fallback is standard built in CSS, then about the same you can set manually.

This will look like a style table, if you wish to progress from the lack of jQuery support, the “global breakdown” of the entire layout (for example, disabling the menu made on jQuery).

/ * is a class that works with jQuery * /
#Menu Li.Current & GT; a {
  Background: # F7F7F7;
/ * This in the case of CSS Fallback * /
#Menu Li: Hover & GT; UL.CHILD {
  Display: Block;
#Menu Li: Hover & GT; UL.GRANDCHILD {
  Display: Block;

Well, another visual example of the backup safety net:

. GradientBackGround {
 Background-Color: # 1A82F7; / * Basic color * /
 Background-image: URL ('Fallback-gradient.png');
/ * Fallback background, if the CSS3 * /
/ * Further crossbruster CSS3 gradient * /
     Background-image: -WebKit-gradient (Linear, 0% 0%, 0% 100%, from (# 2F2727), To (# 1A82F7));
     Background-image: -WebKit-linear-gradient (TOP, # 2F2727, # 1A82F7);
     Background-image: -moz-linear-gradient (top, # 2F2727, # 1A82F7);
     Background-image: -ms-linear-gradient (TOP, # 2F2727, # 1A82F7);
     Background-image: -o-linear-gradient (TOP, # 2F2727, # 1A82F7);

Answer 1, Authority 100%

Reserve ” – really suitable translation :). Also, this approach is called Graceful Degradation . I will give another example that I really liked this topic.

& lt; audio controls & gt;
  & lt; source src = "witchitalineman.ogg" Type = "Audio / Ogg" & gt;
  & lt; Source SRC = "Witchitalineman.mp3" Type = "Audio / MPEG" & gt;
  & lt; object type = "application / x-shockwave-flash" data = "player.swf? SoundFile = Witchitalineman.mp3" & gt;
    & lt; param name = "movie" value = "player.swf? SoundFile = Witchitalineman.mp3" & gt;
    & lt; a href = "witchitalineman.mp3" & gt; download the song & lt; / a & gt;
  & lt; / Object & gt;
& lt; / Audio & gt;

We are trying to add a musical song to the page. Here we have a four level of degradation:

1) The browser supports HTML5AUDIO and OGG format.

2) The browser supports HTML5AUDIO, but does not know how OGG. In this case, let him mp3.

3) The browser does not support HTML5AUDIO. We use flash in the old manner.

4) the browser can not at all, then we leave him just a link.

To the same topic: Progressive Enhancement – in some sense the opposite approach. In this case, we, on the contrary, we use something very simple as the base, and then complicate if the browser can. Let’s set the translucent background:

. block {
  Background: # 000;
  Background: RGBA (0,0,0 ,.75);
  1. We ask just black, which, for sure, will work in all browsers.
  2. If the browser is able to RGBA, then the previous line it will throw and make a translucent black.

When to use how to use – depends on the case, the requirements of cross-browser and, of course, properties / technologies that are subject to checks.

Examples from publishing books A Book Apart .

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions