Baseline поможет вам понять, какие функции совместимы с современными браузерными движками и безопасны для использования уже сегодня. Но как использовать Baseline в своих проектах? На этой странице представлены материалы, которые помогут вам решить, как использовать Baseline, а также некоторые соображения, которые следует учитывать при этом.

Узнайте, как работает Baseline

Baseline обеспечивает ясность сообщений, используя три пороговых значения. Эти пороговые значения отражают уровень совместимости в основных браузерах: Chrome для Android и настольных компьютеров, Firefox для Android и настольных компьютеров, Safari для macOS и iOS, а также Edge. Эти метки и символы позволяют быстро оценить, насколько хорошо реализованы веб-функции в современных браузерных движках:

Ограниченная доступность функций — это те, которые не реализованы в основном наборе браузеров. Использование этих функций потребует определённого планирования, возможно, с учётом полифиллов и прогрессивных улучшений.
Новые функции — это функции, которые недавно были реализованы в базовом наборе браузеров. Если вы видите функцию «Новые функции», можно ожидать, что со временем она будет поддерживаться более широко во всех браузерах.
Широко доступные функции — это те, которые совместимы с основным набором браузера не менее 30 месяцев. Если функции имеют статус Baseline Widely, можно ожидать, что они хорошо поддерживаются основным набором браузера.

Прежде чем использовать базовый уровень в своём проекте, необходимо решить, какой базовый уровень использовать. Базовый уровень — это либо изменяющийся уровень, который со временем будет дополняться новыми совместимыми функциями, либо фиксированный уровень, представляющий собой актуальный набор совместимых функций на текущий год. Узнайте из этого руководства, как выбрать базовый уровень на основе данных.

Подробнее

Добавьте базовую линию в свой проект

Отслеживание совместимых функций браузеров само по себе может быть непростой задачей, но использование Baseline в вашем проекте, а также инструментов, которые помогут вам в этом, поможет сократить объём работы. Browserslist содержит несколько встроенных запросов, которые максимально упрощают использование Baseline в вашем проекте.

Добавьте Baseline в свои инструменты линтинга и упаковки кода с помощью специальных запросов Baseline, которые теперь встроены в Browserslist.
Подробнее
Узнайте, как интегрировать Baseline в веб-проект с использованием Webpack, Babel и PostCSS, с помощью этой лабораторной работы.
Подробнее

Посмотрите демонстрации Baseline

Если вы ищете вдохновение, которое поможет вам понять, как использовать Baseline в своих проектах — от интеграции инструментов до отдельных функций — ознакомьтесь с этими демонстрациями интеграции инструментов, которые помогут вам начать работу:

Узнайте, как использовать возможности базового CSS для создания типографики, которая реагирует на пользователя с учетом доступности и эргономики для разработчиков.
Подробнее
Узнайте, как создавать цветовые схемы с помощью базовых веб-функций, доступных в CSS.
Подробнее
Узнайте, как создавать шаблоны пользовательского интерфейса для модальных окон и подсказок с использованием веб-функций <dialog> и всплывающего окна.
Подробнее
Галереи изображений — распространённый шаблон пользовательского интерфейса в интернете. Узнайте, как создать такую ​​галерею с помощью функций Baseline.
Подробнее
В этом руководстве вы узнаете, как использовать запросы контейнера CSS для добавления адаптивной типографики и стилей на основе размеров контейнера.
Подробнее

Базовая линия и веб-пакет