Что такое fallback и почему это необходимо
С английского слово fallback можно перевести как резервный. То есть иначе говоря, вы пытаетесь оставить резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой jаvascript или jquery.
Банальный пример того, как все сейчас рисуют скругленные края у элементов:
В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.
Если в предыдущем примере это был, грубо говоря, fallback стандартно встроенный в CSS, то примерно то же самое вы можете задавать вручную.
Наглядный пример резервной подстраховки, если не работает градиент CSS3, то подхватится изображение.
Банальный пример того, как все сейчас рисуют скругленные края у элементов:
#roundbox {
-webkit-border-radius: 5px; /* Safari */
-moz-border-radius: 5px; /* Firefox */
-o-border-radius: 5px; /* Opera */
border-radius: 5px;
}
В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.
Если в предыдущем примере это был, грубо говоря, fallback стандартно встроенный в CSS, то примерно то же самое вы можете задавать вручную.
Наглядный пример резервной подстраховки, если не работает градиент CSS3, то подхватится изображение.
.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);
}
Статьи и советы
28.05.20, 09:00