Question:
What is fallback in layout?
Answer:
From English, the word fallback can be translated as a backup . That is, in other words, you are trying to leave a fallback option for displaying this or that element in case of problems with displaying styles, javascript or jquery. As far as I understand, in terms of layout, this fallback techniques are very related to cross-browser compatibility issues.
A trivial example of how everyone is now drawing rounded edges on elements:
#roundbox {
-webkit-border-radius: 5px; /* Safari */
-moz-border-radius: 5px; /* Firefox */
-o-border-radius: 5px; /* Opera */
border-radius: 5px;
}
In case the user's browser does not support CSS3, he will see just a rectangle with all the necessary functionality. That is the basic form of the element is displayed – this is a fallback (backup) insurance.
If in the previous example it was, roughly speaking, the fallback standard built into CSS, then you can set approximately the same thing manually.
This is how the stylesheet will look like if you want to hedge against the lack of jQuery support, which entails a "global break" of the entire layout (for example, disabling a menu made in jQuery).
/* Это класс который работает с jQuery */
#menu li.current > a {
background: #f7f7f7;
}
/* Этот в случае CSS fallback */
#menu li:hover > ul.child {
display: block;
}
#menu li:hover > ul.grandchild {
display: block;
}
Well, one more illustrative example of a backup safety net:
.gradientbackground {
background-color: #1a82f7; /* базовый цвет */
background-image: url('fallback-gradient.png');
/* fallback фон, если не работает градиет CSS3 */
/* Дальше кроссбраузерный CSS3 градиент */
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);
}