Поддержка старых браузеров: fallbacks, полифиллы, caniuse.com

🤔 Зачем нужна поддержка старых браузеров?

Представьте: вы написали идеальный CSS-код с grid и flexbox, но в IE11 ваш сайт выглядит как хаотичный набор блоков. 🔥 Старые браузеры — реальность, особенно в корпоративных проектах или регионах с низкой цифровизацией.

Ваши главные враги:
- IE11 (официально «мёртв», но ещё жив в некоторых компаниях)
- Старые версии Safari (например, на macOS 10.12)
- Мобильные браузеры на Android 5-7

🛡️ Стратегии поддержки

1. Fallbacks — «запасные варианты»

Когда браузер не понимает новое свойство, он его игнорирует. Решение: сначала пишем универсальный код, потом — современный.

/* Для старых браузеров (flexbox fallback) */
.container {
  display: -webkit-box;     /* iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;     /* IE10 */
  display: flex;
}

/* Для современных браузеров */
@supports (gap: 1rem) {
  .container {
    gap: 1rem;
  }
}

💡 Совет: Проверяйте порядок свойств! Браузеры применяют последнее поддерживаемое значение.

2. Полифиллы (Polyfills) — «волшебные заплатки»

Если функциональность вообще не существует в старом браузере (например, IntersectionObserver), используем полифиллы — JavaScript-код, который эмулирует новое поведение.

Пример подключения полифилла для CSS Grid в IE11:

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-grid-polyfill/1.0.0/css-polyfill.min.js"></script>

⚠️ Минусы:
- Увеличивают размер страницы.
- Могут замедлять загрузку.

3. Can I Use — ваш главный инструмент

caniuse.com — база данных поддержки CSS/JS-свойств браузерами.

Как использовать:
1. Вводите свойство (например, gap для flexbox).
2. Смотрите, какие браузеры требуют fallbacks или полифиллов.
3. Проверяйте глобальную статистику использования (+ в правом верхнем углу).

Пример Can I Use для CSS Grid Где красное — проблемы

🧪 Практика: Реальные примеры

Случай 1: Поддержка CSS Custom Properties (переменных)

Старые браузеры не понимают var(). Решение: дублируем значения.

:root {
  --primary-color: #3498db;
}

.button {
  color: #3498db;           /* Fallback */
  color: var(--primary-color); /* Современные браузеры */
}

Случай 2: Псевдокласс `:focus-visible`

Не работает в Safari до 15.4. Альтернатива — :focus.

button:focus {
  outline: 2px solid blue;  /* Fallback */
}

button:focus-visible {
  outline: 2px solid blue;  /* Современные браузеры */
}

🎯 Итоговая стратегия

Определите целевую аудиторию (анализ статистики браузеров).
Пишите код с fallbacks для критически важных функций.
Добавляйте полифиллы только при необходимости.
Тестируйте в старых браузерах (например, через BrowserStack).

🚀 Философия: Не стремитесь к 100% идентичности! Главное — чтобы сайт работал и был функциональным.

🔥 Бонус: Автоматизация

Используйте PostCSS с плагинами вроде autoprefixer, чтобы не писать вендорные префиксы вручную.

// Пример настройки в PostCSS
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['> 0.5%', 'last 2 versions']
    })
  ]
}

Теперь браузерные префиксы добавляются автоматически. ✅

📚 Дополнительные ресурсы

Современный CSS для старых браузеров — разборы от Данилы Бежина.
Feature Queries Manager — расширение для проверки @supports.