Совместимость с браузерами — Примеры

Пример 1 — Ветвление по имени браузера

Страница проверяет строку user agent, чтобы решить, поддерживается ли ленивая загрузка: в одном движке она ведёт себя неправильно, в другом отказывает полностью. Скажите, на какой вопрос на самом деле отвечает проверка, затем задайте движку вопрос, который вас интересует.

const isModern = /Chrome\/(\d+)/.test(navigator.userAgent);
if (isModern) {
  observeVisibility(images);
} else {
  loadAllImages(images);
}

Решение

if ("IntersectionObserver" in window) {
  observeVisibility(images);
} else {
  loadAllImages(images);
}

Строка user agent подделывается, замораживается вендорами ради совместимости и переписывается инструментами приватности, поэтому она отвечает на вопрос об идентичности, а не о возможностях, — и устаревает в тот момент, когда браузер меняет её смысл. Обнаружение возможности проверяет свойство, которым вы собираетесь воспользоваться, а это и есть важный вопрос, и оно продолжает работать, когда браузер переименовывают или пользователь подменяет строку; запасной путь — половина техники, ведь защищённая ветка суть улучшение, так что браузер без этого API всё равно загружает все изображения, а не не показывает ни одного. Защиту ставьте с самого начала, а не после первого сообщения об ошибке.

Пример 2 — Современное объявление, за которым ничего нет

Раскладка использует современное значение без запасного над ним, и старый движок отбрасывает объявление и рисует неоформленный блок. Скажите, как браузер обращается со значением, которое не может разобрать, затем напишите запасной вариант первым и улучшайте поверх него.

.card { grid-column: span 2; }

Решение

.card { width: 100%; }

@supports (display: grid) {
  .card { width: auto; grid-column: span 2; }
}

Браузер, который не может разобрать объявление, отбрасывает именно его и ничего больше — таблицу стилей он не останавливает, — поэтому современное значение просто не даёт эффекта, а не ломает страницу. Эта снисходительность и делает прогрессивное улучшение дешёвым: поставьте сначала значение, работающее везде, затем позвольте @supports добавить современное поведение, чтобы браузер, не понимающий ни одного из них, всё равно отрисовал что-то рабочее, — а альтернатива в виде полифилов всем и для всего заставляет каждого читателя платить байтами за случай, который есть у немногих; обычный компромисс здесь — современный вывод с небольшим legacy-бандлом, который отдаётся только там, где того требует матрица поддержки.