3
Что такое fallback в верстке?
1
  • Очевидно имеется в виду css, похоже на то что это просто механизм который перекрывает предыдущие стили.
    – Smash
    20 окт 2012 в 12:42

2 ответа 2

10

С английского слово fallback можно перевести как резервный. То есть иначе говоря, вы пытаетесь оставить резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой javascript или jquery. Насколько я понимаю, в вопросах верстки этот метод (fallback techniques) очень родственен вопросам кросс-браузерной совместимости.

Банальный пример того, как все сейчас рисуют скругленные края у элементов:

#roundbox {   
  -webkit-border-radius: 5px;  /* Safari */  
  -moz-border-radius: 5px;    /* Firefox */  
  -o-border-radius: 5px;     /* Opera */  
  border-radius: 5px;  
}

В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.

Если в предыдущем примере это был, грубо говоря, fallback стандартно встроенный в CSS, то примерно то же самое вы можете задавать вручную.

Вот так будет выглядеть таблица стилей при желании подстраховаться от отсутствия поддержки JQuery, влекущего "глобальную поломку" всей верстки (например, отключение меню, сделанного на JQuery).

/* Это класс который работает с jQuery */  
#menu li.current > a {  
    background: #f7f7f7;  
    }  
/* Этот в случае CSS fallback */  
#menu li:hover > ul.child {  
    display: block;  
    }  
#menu li:hover > ul.grandchild {  
    display: block;  
    }

Ну и еще один наглядный пример резервной подстраховки:

.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);  
        }
3
  • внезапного отключения JQuery а при чем здесь jQuery o.O, который еще и стили внезапно ломает?
    – Smash
    20 окт 2012 в 12:46
  • 1
    да немножко неудачно выразился, имелось ввиду что если jquery не работает, то, например, может не отображаться целое меню - и сайт теряет всю функциональность. подробнее css-plus.com/2010/06/…
    – slipshod
    20 окт 2012 в 12:48
  • Забавное меню, отключил вообще javascript и в принципе прекрасно работает!
    – Smash
    20 окт 2012 в 12:56
2

"Резерв" - действительно годный перевод :). Так же этот подход называется graceful degradation. Приведу еще один пример, который мне очень понравился на эту тему.

<audio controls>
    <source src="witchitalineman.ogg" type="audio/ogg">
    <source src="witchitalineman.mp3" type="audio/mpeg">
    <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3">
        <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> 
        <a href="witchitalineman.mp3">Download the song</a>
    </object>
</audio>

Мы пытаемся добавить музыкальныю песню на страницу. Тут у нас аж четыре уровня деградации:

1) Браузер поддерживает HTML5audio и формат ogg.

2) Браузер поддерживает HTML5audio, но не умеет ogg. В таком случае отдаем ему mp3.

3) Браузер не поддерживает HTML5audio. Используем флэш по старинке.

4) Браузер вообще ничего не может, тогда оставляем ему просто ссылку.

К этой же теме: progressive enhancement - в каком-то смысле обратный к первому подход. В данном случае мы наоборот используем что-то очень простое как базу, а потом усложняем, если браузер может. Наприм зададим полупрозрачный фон:

.block {
    background: #000;
    background: rgba(0,0,0, .75);
}
  1. Задаем просто черный, который, наверняка, отработает во всех браузерах.
  2. Если браузер умеет rgba, то предыдущую строчку он бросит и сделает полупрозрачный черный.

Когда каким подходом пользоваться - зависит от случая, требований кроссбраузерности и, конечно же, свойства/технологии, которое подлежит проверки.

Примеры из книг издательства a book apart.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.