Откройте для себя лишь некоторые функции, которые станут совместимыми в 2022 году.
Подошел к концу еще один год, и пришло время взглянуть на улучшения, внесенные браузерами в ходе нашей совместной работы над улучшением совместимости веб-платформы. О том, как все начиналось, вы можете узнать в нашем посте в марте этого года , как была запущена инициатива.
Общие оценки по итогам года демонстрируют значительное улучшение по всем двигателям.
В этом посте вы узнаете о прогрессе, достигнутом в 2022 году. Помимо этих основных функций, во всех движках было внесено множество мелких улучшений. Исправлены небольшие проблемы, которые могли привести к несогласованности между движками и сбить вас с толку во время разработки. Видеть большие возможности, доступные в кросс-браузере, безусловно, интересно, но иногда именно мелочи вызывают больше всего проблем, и приятно видеть, как много было улучшено.
Каскадные слои
Каскадные слои позволяют управлять каскадом, группируя селекторы в слои. Это такая функция, которая становится полезной только тогда, когда она поддерживается повсеместно. Все основные движки теперь поддерживают каскадные слои, и оценки во всех браузерах отражают совместимость этой функции, а для Firefox осталось пройти всего несколько тестов.
Элемент диалога
Элемент диалога позволяет создавать модальные и немодальные диалоги. Это распространенный шаблон в Интернете, и использование этого элемента обеспечивает удобство использования и доступность, которые в противном случае вам пришлось бы разрабатывать и тестировать при создании собственных компонентов. В статье Создание диалогового компонента Адам Аргайл объясняет, как на основе этого элемента создавать различные типы диалогов.
Подсетка
В начале 2022 года единственным браузером, поддерживающим значение subgrid для grid-template-rows и grid-template-columns был Firefox. В 2022 году Safari получит поддержку, а в Chrome эта функция находится в стадии разработки. Крайний срок совместимости, назначенный на конец года, будет пропущен, но он уже в пути.
Единицы видового экрана
Единицы просмотра — единственная функция, которая прошла 100% тестов во всех движках. Сюда входят концепции маленького и большого окна просмотра, которые учитывают изменение размера области просмотра на мобильных устройствах по мере появления и исчезновения элементов пользовательского интерфейса устройства. Вы можете узнать больше об этих единицах измерения в статье «Большие, малые и динамические единицы просмотра» .
Поддержка браузера
- 108
- 108
- 101
- 15,4
Цвет 4
Эта коллекция работы с цветом позволяет CSS не только определять цвета в гаммах более высокого разрешения (например, display p3, Rec2020), но также предоставляет новые функции цвета, каждая из которых имеет уникальные утилиты для работы с цветом. Новые цветовые пространства: lch() , oklch() , lab() , oklab() , display-p3 , rec2020 , a98-rgb , prophoto-rgb , xyz , xyz-d50 , xzy-d65 : попробуйте их на Канарских островах сегодня с помощью этот флаг включен . Эти изменения также применяются к градиентам, позволяя авторам указывать, какое цветовое пространство используют их градиенты . Тот же флаг также включает поддержку color-mix() , позволяющую смешивать два цвета в выбранном вами пространстве. Функция color-mix() также находится под флагом в Safari и Firefox. Больше цветов, лучшие цвета, лучшие градиенты и лучшие инструменты.
Взаимодействие 2023
Надеюсь, вы будете рады узнать, что мы не собираемся останавливаться на достигнутом в конце 2022 года, а Interop 2023 уже находится на начальной стадии планирования. В Новом году мы сможем объявить о выбранных функциях и с нетерпением ждем еще одного года, когда разработка для Интернета станет проще.
Изображение героя от Яна Шнайдера .