0Pricing
Frontend Academy · Урок

Совместимость браузеров и caniuse.com

Проверяйте поддержку возможностей в разных браузерах на caniuse.com, изучайте префиксы разработчиков и при необходимости используйте полифиллы или запасные варианты.

«Совместимость браузеров и caniuse.com» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Почему важна совместимость?

Разные браузеры поддерживают веб-стандарты с разной скоростью. Свойство CSS или API JavaScript, доступное в Chrome 130, может отсутствовать в старой версии Safari или Firefox. Тестирование и планирование совместимости предотвращают проблемы для пользователей.

caniuse.com — справочник по совместимости

Откройте caniuse.com и введите любое свойство CSS, API JavaScript или атрибут HTML. Вы увидите таблицу поддержки с цветовой маркировкой для всех основных браузеров и их последних версий, а также статистику использования и сведения о частичной поддержке.

Чтение таблицы caniuse

Зелёный цвет означает поддержку. Жёлтый — частичную поддержку. Красный — отсутствие поддержки. Серый — неизвестный статус. Проверьте процент глобального использования в верхней части страницы: если функция доступна более чем 97% пользователей, обычно её можно использовать без резервного варианта.

browser-compat-data и MDN

Страницы MDN Web Docs содержат таблицу совместимости браузеров в нижней части каждой страницы со справочником по API. В ней используются те же данные, что и на caniuse, и сами разработчики браузеров часто обновляют их.

Инициатива Baseline

Инициатива Baseline (web.dev/baseline) отмечает функции как недавно доступные или широко доступные на основе их поддержки в Chrome, Edge, Firefox и Safari. Широко доступную функцию безопасно использовать без полифиллов.

Полифиллы

Полифилл — это код JavaScript, реализующий новый API в старых браузерах. Популярные источники: polyfill.io (поставляет только необходимые полифиллы), core-js (набор полифиллов для JavaScript) и помощники Babel.

// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>

@supports — Запросы возможностей в CSS

@supports позволяет писать CSS, применяемый только при поддержке свойства. Это обеспечивает запасные варианты CSS — подобно тому, как медиазапросы задают адаптивные переопределения.

/* Fallback for all browsers */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* Enhancement for browsers that support grid */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Префиксы производителей (устаревший подход)

Для старых возможностей CSS требовались префиксы производителей: -webkit-, -moz-, -ms-. Сейчас они в основном устарели — современные браузеры используют стандартные свойства без префиксов. Autoprefixer (плагин PostCSS) автоматически добавляет их, если это всё ещё необходимо.

Транспиляция с помощью Babel

Babel компилирует современный JavaScript (ES2022+) в ES5, который могут выполнять старые браузеры. Vite и webpack подключают Babel с помощью плагинов. Настройте целевые браузеры в browserslist в package.json.

// package.json
"browserslist": [
  "last 2 versions",
  "not dead",
  "> 0.5%"
]

Тестирование в реальных браузерах

Эмуляция устройств в DevTools не заменяет тестирование в реальных браузерах. Для полноценной проверки совместимости между браузерами используйте BrowserStack, Sauce Labs или сам браузер Safari (требуется macOS или iOS).

Ландшафт постоянно обновляемых браузеров

Chrome, Edge, Firefox и Safari обновляются автоматически. Доля устаревших браузеров уменьшается с каждым годом. Для большинства потребительских продуктов поддержка двух последних основных версий каждого браузера охватывает более 95% пользователей.

Быстрая проверка

Что означает зелёная ячейка в таблице поддержки на caniuse.com?

Итоги: совместимость браузеров

Проверяйте caniuse.com перед использованием новых API. Читайте таблицы совместимости на MDN. Задавайте разумный набор целевых браузеров с помощью browserslist. Используйте @supports для запросов возможностей CSS. Добавляйте полифиллы только для необходимого. Транспилируйте современный JS с помощью Babel. Проверяйте критически важные функции в реальных браузерах.

Часто задаваемые вопросы

Урок «Совместимость браузеров и caniuse.com» бесплатный?

Да — полный текст урока «Совместимость браузеров и caniuse.com» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Совместимость браузеров и caniuse.com»?

Проверяйте поддержку возможностей в разных браузерах на caniuse.com, изучайте префиксы разработчиков и при необходимости используйте полифиллы или запасные варианты. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Совместимость браузеров и caniuse.com»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Chrome DevTools: Elements, Console, Network
  2. VSCode: расширения, Emmet и сочетания клавиш
  3. Настройка Prettier и ESLint
  4. Совместимость браузеров и caniuse.com
← Назад к Frontend Academy