Поддержка старых браузеров — часть 2: CSS
Есть два способа предоставить запасные варианты для функций CSS:
- Резервные варианты свойств
- Запросы функций
Другие статьи из этой серии
Резервные варианты свойств
Если браузер не распознает свойство или соответствующее ему значение, браузер полностью проигнорирует это свойство.
Когда это происходит, браузер использует (или возвращается) к предыдущему найденному значению.
Это самый простой способ обеспечить запасной вариант.
Вот пример:
.layout {
display: block;
display: grid;
}
В этом примере браузеры, поддерживающие CSS Grid, будут использовать display: grid. Браузер не поддерживает CSS Grid. display: block.
Не указывать значения по умолчанию
Если элемент, который вы используете, по умолчанию display: blockвы можете опустить display: block декларация. Это означает, что вы можете поддерживать CSS Grid с помощью одной строки кода:
.layout {
display: grid;
}
Браузеры, поддерживающие CSS Grid, смогут читать другие свойства CSS, такие как grid-template-columns. Браузеры, которые не поддерживают CSS Grid, не могут.
Это означает, что вы можете писать дополнительные свойства CSS Grid, не беспокоясь о резервных значениях.
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
Запросы функций
Запросы функций или @supportsсообщает вам, поддерживается ли браузером свойство CSS или его соответствующее значение.
Вы можете думать о функциональных запросах CSS, например if/else операторы в JavaScript. Это выглядит так:
@supports (property: value) {
/* Code when property or value is supported*/
}
@supports not (property: value) {
/* Code when property or value is not supported */
}
@supports полезно, если вы хотите, чтобы браузеры читали CSS, только если они поддерживают определенное свойство.
Для примера с CSS Grid, который у нас был выше, вы можете сделать это:
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
padding-left: 1em;
padding-right: 1em;
}
}
В этом примере padding-left а также padding-right будет читаться только браузерами, которые поддерживают оба @supports и CSS-сетка.
У Джен Симмонс есть лучший пример @supports на работе. Она использует запросы функций, чтобы определить, поддерживают ли браузеры такое свойство, как -webkit-initial-letter.
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
p::first-letter {
-webkit-initial-letter: 4;
initial-letter: 4;
color: #FE742F;
font-weight: bold;
margin-right: 0.5em;
}
}
Слева: Safari 9 и более поздних версий. Справа: другие
Пример Джен подводит нас к вопросу: должны ли сайты выглядеть одинаково в разных браузерах? Мы рассмотрим это позже. Но сначала подробнее о функциональных запросах.
Поддержка функциональных запросов
Запросы функций получили отличная поддержка. Все текущие (основные) браузеры поддерживают запросы функций.
Все основные браузеры поддерживают запросы функций
Что делать, если функция поддерживается, но запросы функций не
Раньше это была сложная часть. Джен Симмонс и другие эксперты предупреждали нас о такой возможности. Вы можете прочитать, как с этим справиться в этой статье.
Вот мое мнение: я больше не поддерживаю IE 11, поэтому я использую запросы функций так, как я упоминал выше.
Одновременное использование резервных свойств и запросов функций
Взгляните на следующий код. Какие значения заполнения будут применяться браузерами?
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
padding-left: 1em;
padding-right: 1em;
}
}
.layout {
padding-left: 2em;
padding-right: 2em;
}
Ответ: Все браузеры будут применяться 2em левой и правой обивки.
Почему?
Это происходит потому, что padding-left: 2em а также padding-right: 2em были объявлены позже в файле CSS. Свойства, которые были объявлены позже, переопределяют свойства, которые были объявлены ранее.
Если ты хочешь padding-left: 2em а также padding-right: 2em чтобы применить только к браузерам, которые не поддерживают CSS Grid, вы можете изменить порядок свойств.
.layout {
padding-left: 2em;
padding-right: 2em;
}
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
padding-left: 1em;
padding-right: 1em;
}
}
Примечание. Всегда рекомендуется сначала объявлять резервный код в CSS из-за его каскадного характера.
Это также означает, что если вы используете оба @supports а также @supports notвы должны объявить @supports not первый. Это делает ваш код согласованным.
/* Always write "@supports not" first if you use it */
@supports not (display: grid) {
.layout {
padding-left: 2em;
padding-right: 2em;
}
}
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
padding-left: 1em;
padding-right: 1em;
}
}
Теперь давайте поговорим о том, должны ли сайты выглядеть одинаково в разных браузерах.
Должны ли сайты выглядеть одинаково в разных браузерах?
Некоторые люди считают, что сайты должны выглядеть одинаково в разных браузерах. Они считают, что брендинг важен, и подчеркивают, что сайты должны выглядеть последовательно, чтобы сохранить бренд.
Другие говорят нет. Они считают, что должны принять дух прогрессивного совершенствования. Они могут дать пользователям с лучшими браузерами больше любви.
Обе точки зрения верны, но они исходят из разных точек зрения.
Самая важная точка зрения исходит от пользователей. Способен ли ваш сайт предоставить пользователям то, за чем они пришли?
Если да, вам не нужно быть слишком строгим в отношении последовательности. Идите вперед и делайте лучше с лучшими браузерами, еще лучше!
Подведение итогов
Чтобы обеспечить поддержку функций CSS, вы можете использовать:
- Резервные варианты свойств
- Запросы функций
Когда вы пишете CSS, убедитесь, что вы сначала объявляете резервный код перед другим набором кода для браузеров с лучшей поддержкой.
Спасибо за чтение. Эта статья изначально была размещена на мой блог. Подписаться на моя рассылка если вы хотите больше статей, которые помогут вам стать лучшим разработчиком внешнего интерфейса.
