Впервые все основные поставщики браузеров и другие заинтересованные стороны объединились, чтобы решить основные проблемы совместимости браузеров, выявленные веб-разработчиками. Interop 2022 улучшит опыт веб-разработки в 15 ключевых областях. В этой статье вы узнаете, как мы к этому пришли, на чем фокусируется проект, как будет измеряться успех и как можно отслеживать прогресс.
Все началось в 2019 году
Еще в 2019 году Mozilla, Google и другие начали серьезную работу по пониманию болевых точек разработчиков в форме опросов MDN Developer Needs Assessment и подробного отчета о совместимости браузеров . Эти отчеты предоставили нам подробную и полезную информацию для решения основных проблем разработчиков веб-платформы и привели к созданию Compat 2021 .
Среди прочего, Compat 2021 привел к созданию прочной основы для таких мощных функций, как CSS-сетка ( 12% использования и постоянно растет ) и CSS flexbox ( 77% использования ), включая свойство gap в flexbox, которое решает основную проблему для разработчики при внедрении новых методов компоновки.
Мы были рады достичь показателя более 90% по всем внедрениям в конце 2021 года!
Что такое Interop 2022?
Interop 2022 — это эталон, согласованный представителями трех основных реализаций браузеров и разработанный в процессе публичного номинирования и рассмотрения при участии сторонников Apple , Bocoup , Google, Igalia , Microsoft и Mozilla .
Тест фокусируется на 15 областях, которые разработчики считают особенно проблемными, когда они отсутствуют или возникают проблемы с совместимостью между браузерами. Все производители браузеров согласились сосредоточиться на этих областях, и все участники с нетерпением ждут начала работы над улучшением опыта разработки для Интернета.
15 направлений деятельности
Следующие функции будут в центре внимания Interop 2022. Они включают в себя 10 новых областей, а также 5 перенесенных из Compat 2021. Новые области внимания:
Каскадные слои
Каскадные слои дают веб-разработчикам больше контроля над каскадом. Они позволяют группировать селекторы по слоям, каждый из которых имеет свою специфику. Это означает, что вам не нужно тщательно упорядочивать селекторы или создавать узкоспециализированные селекторы для перезаписи базовых правил CSS.
Цветовые пространства и цветовые функции CSS
Чтобы использовать функции цвета в системе дизайна, вам в настоящее время нужно полагаться на Sass, PostCSS или calc() для значений HSL. Цветовые функции, встроенные в CSS, означают, что цвета могут обновляться динамически, а новые цветовые пространства снимают ограничение гаммы sRGB и ограничения восприятия HSL.
В CSS Color Level 5 определены две функции, которые обеспечивают более динамичное оформление тем на веб-платформе:
-
color-mix(): принимает два цвета и возвращает результат их смешивания в указанном цветовом пространстве на указанную величину. -
color-contrast(): выбирает из списка цветов цвет с наибольшим контрастом по отношению к указанному одному цвету.
Эти функции поддерживают расширенные цветовые пространства (LAB, LCH и P3) и в дополнение к HSL и sRGB по умолчанию используют единое цветовое пространство LCH.
Новые единицы видового экрана
Трудности, связанные с размером области просмотра, заметны как в отчете MDN Browser Compatibility Report 2020 , так и в новом опросе State of CSS 2021 . Значения и единицы CSS Уровень 4 добавляет новые единицы измерения для самых больших, самых маленьких и динамических размеров области просмотра: lv* , sv* и dv* . Эти модули упростят создание макетов, которые заполняют видимую область просмотра на мобильных устройствах, принимая во внимание адресную строку.
Кроме того, межвендорная команда, стоящая за Interop 2022, будет сотрудничать в исследовании и улучшении совместимости существующих функций измерения области просмотра, включая существующий модуль vh .
Прокрутка
Отчет о исследовании прокрутки за 2021 год подтверждает, что функции прокрутки и совместимость с прокруткой сложно реализовать и существует множество областей для улучшения. Мы сосредоточимся на привязке к прокрутке , поведении прокрутки и поведении при прокрутке , чтобы прокрутка была более последовательной и плавной на разных платформах.
Мы также изучаем новые предложения по функции привязки прокрутки .
Подсетка
Значение subgrid grid-template-columns иgrid grid-template-rows означает, что элемент сетки, к которому применен display: grid может наследовать определение дорожки из части родительской сетки, над которой он расположен.
Например, следующие три компонента карты имеют верхний и нижний колонтитулы, совмещенные с верхними и нижними колонтитулами соседних карточек, хотя каждая карточка имеет независимую сетку. Этот шаблон работает, поскольку каждая карточка представляет собой элемент, который занимает три строки родительской сетки, а затем использует подсетку для наследования этих строк в карточку.
Также включено
- CSS-сдерживание (свойство
contain) - Элемент
<dialog> - Элементы управления формой
- Типографика и кодировки: включая
font-variant-alternates,font-variant-position, блокicи текстовые кодировки CJK. - Web Compat, в котором основное внимание уделяется различиям между браузерами, которые вызывают проблемы совместимости сайтов, влияющие на конечных пользователей.
В следующих областях удалось добиться значительного прогресса в рамках проекта Compat 2021, но еще есть возможности для улучшения. Поэтому они были включены в Interop 2022, чтобы можно было решить оставшиеся проблемы.
- Соотношение сторон
- Флексбокс
- Сетка
- Липкое позиционирование
- Преобразует
Расследование
В дополнение к 15 основным направлениям Interop 2022 включает в себя три расследования. Это проблемные области, требующие улучшения, но в которых текущее состояние спецификаций или тестов еще недостаточно хорошее, чтобы можно было оценить прогресс, используя результаты тестов:
- Редактирование,
contenteditableиexecCommand - События указателя и мыши
- Измерение видового экрана
Поставщики браузеров и другие заинтересованные стороны будут сотрудничать в улучшении тестов и спецификаций для этих областей, чтобы их можно было включить в будущие версии этой работы.
Измерение успеха и отслеживание прогресса
Существующая панель тестирования веб-платформы будет использоваться для отслеживания прогресса в 15 основных областях. Для каждой области определен набор тестов. Затем браузеры оцениваются по этим тестам, давая оценку по каждой области и общую оценку по всем 15 областям.
Чтобы следить за ходом работы, посетите панель мониторинга Interop 2022 . В течение года вы можете следить за развитием событий и видеть, как улучшается платформа, для которой вы создаете.
Что все это будет означать для разработчиков?
Цель этих многолетних усилий по обеспечению совместимости в форме Compat 2021, Interop 2022 и многих других — полностью признать и устранить болевые точки, с которыми разработчики сталкивались на протяжении многих лет. И это не работа над одним браузером, а скорее тесное сотрудничество между всеми основными поставщиками браузеров и их друзьями для улучшения веб-платформы по всем направлениям.
По сути, цель состоит в том, чтобы сделать веб-платформу более удобной и надежной для разработчиков, чтобы они могли тратить больше времени на создание отличных веб-интерфейсов, а не на устранение несоответствий браузера.
Поделитесь с нами вашими мыслями
Если у вас есть отзывы об улучшениях, внесенных во время Compat 2021 , или о каких-либо функциях, включенных в Interop 2022, мы будем рады услышать ваше мнение. Какая из этих функций будет иметь наибольшее значение для вашей работы? Что вас действительно радует? Сообщите о проблемах в репозитории GitHub или сообщите нам об этом в Twitter .
Подробнее о Interop 2022: