Вчера было про Baseline Newly, а сегодня пройдемся по Baseline Widely available

➡️Constructable stylesheets Возможность создавать CSS-стили прямо в JS как объекты и подключать их в shadow DOM. Зачем: даёт гибкую модульность, уменьшает дублирование кода и улучшает загрузку. Удобно для дизайн-систем и веб-компонентов.

➡️font-synthesis-small-caps, font-synthesis-style, font-synthesis-weight Позволяют запретить браузеру синтезировать недостающие варианты шрифтов (капитель, наклон, жирность). Зачем: дизайнеры получают контроль над типографикой, нет «кривых» автоподстановок. Иногда чуть медленнее, зато визуально чище.

➡️Import maps Позволяют браузеру понимать алиасы и пути модулей без сборщиков. Зачем: меньше бандл-степов, короче цепочка загрузки → быстрее старт приложения.

➡️Media query range syntax Новый компактный синтаксис для диапазонов в медиазапросах: @media (width > 600px). Зачем: проще читать и поддерживать адаптивный дизайн, меньше ошибок и CSS-кода.

➡️Notifications from service workers and installed apps Позволяет PWA показывать уведомления даже при закрытом браузере. Зачем: улучшает ретеншен и UX без сторонних пуш-SDK. Энергопотребление минимальное. Если ваш сайт поддерживает ПВА (это такие сайты на рабочем столе), то теперь через них можно пушить что-то со звуком, например. Только не переусердствуйте ))

➡️Offscreen canvas Позволяет рисовать на канвасе в воркерах, не блокируя основной поток. Зачем: серьёзный прирост перформанса для графики, игр, визуализаций и видеофильтров.

➡️Origin private file system Изолированная файловая система в браузере, доступная только данному сайту. Зачем: безопасное хранение пользовательских данных и кэшей офлайн-приложений без потерь скорости.

➡️outline Свойство CSS теперь стало совместимым в Baseline — корректно работает во всех актуальных браузерах. Зачем: стабильная отрисовка контуров для фокуса и доступности, без хака ради кроссбраузерности.

➡️pdfViewerEnabled Флаг для проверки поддержки встроенного PDF-просмотра. Зачем: помогает адаптировать UX без лишних редиректов или полифилов.

➡️Push messages Возможность получать и обрабатывать push-уведомления через сервис-воркеры. Зачем: нативные уведомления без сторонних библиотек → меньше кода, меньше задержек.

➡️requestAnimationFrame() in workers Позволяет вызывать requestAnimationFrame внутри web workers. Зачем: освобождает основной поток от тяжёлых анимаций и вычислений → плавный UI.

➡️****Resource size API для получения точного размера загруженного ресурса. Зачем: даёт оптимизировать кэш, контроль перформанса и отладку загрузки медиа.

➡️Screen orientation Стандартизированный доступ к данным об ориентации экрана и блокировка ориентации. Зачем: полезно для игр, видео, AR/VR. Удобнее адаптивный UI.

В этом посте были ссылки, но мы их удалили по правилам Сетки