Обновление Compat 2021 на конец года — попытка устранить проблемы совместимости браузеров в пяти ключевых областях: CSS Flexbox, CSS Grid, положение: липкое, соотношение сторон и преобразования CSS.
Конец года близок, и пришло время для финального обновления Compat 2021 — попытки устранить проблемы совместимости браузеров в пяти ключевых областях.
>90 %
оценка во всех браузерах
Со времени нашего последнего обновления мы продолжали видеть улучшения во всех браузерах. В начале года все браузеры начинали с гораздо более низких результатов тестов, но теперь все браузеры превысили 90%! Это означает, что веб-платформа значительно улучшила совместимость пяти основных областей.
Вклад в развитие браузерных движков вносят не только производители браузеров, но и другие представители веб-сообщества. В этом проекте мы особенно хотим поблагодарить Igalia за их участие и постоянную работу над улучшением показателей. Игалия внесла свой вклад в улучшение всех пяти основных направлений Compat 2021.
На wpt.fyi , панели результатов тестирования, теперь есть отфильтрованное представление результатов теста , показывающее все тесты, включенные в Compat 2021, а также представления для Chrome , Firefox и Safari , сравнивающие результаты с нашим последним обновлением в июле.
Давайте посмотрим на улучшения в каждой области!
CSS-флексбокс
flex-basis: content теперь доступен во всех браузерах, а реализации реализованы в Chromium и WebKit . (Значение content уже поддерживалось Gecko.)
В Chromium исправлена проблема с размером флексбокса , который соответствует спецификации и поведению Gecko. А в Gecko исправлено несколько проблем, влияющих на Compat 2021 , включая проблему с процентной высотой гибких элементов . Наконец, в WebKit теперь добавлена поддержка большего количества значений свойств выравнивания ( left, right , self-start, self-end , start, end ), а также было сделано множество улучшений для абсолютного позиционирования , а также улучшены результаты теста flexbox в Компат 2021.
CSS-сетка
Использование CSS Grid в Интернете продолжает расти, о чем свидетельствуют как веб-альманах 2021 года , так и показатели использования Chrome.
Запуск GridNG в Chrome и Edge 93 решил многие давние проблемы с Grid, закрыв впечатляющие 38 проблем в системе отслеживания ошибок Chromium. Вместе со многими последующими более мелкими улучшениями оценка Grid в Chromium в Compat 2021 улучшилась на 3 % до 97 %. Эту работу возглавляла команда Edge в Microsoft.
Ошибка абсолютного позиционирования , влияющая на Grid, была исправлена в Gecko, и многие исправления вошли в WebKit, что привело к улучшению на 1% для Firefox и на 3% для Safari в тестах Grid.
position: sticky
В нашем последнем обновлении мы отметили, что position: sticky была первой областью, где любой браузер (в данном случае Chrome и Edge) достиг 100% прохождения тестов. Теперь, после ряда исправлений в реализации WebKit, Safari также получает 100% оценку в этих тестах. Большинство этих улучшений были включены в Safari 15.
Свойство aspect-ratio CSS
Кроссбраузерная поддержка определения соотношения сторон (отношения ширины к высоте) элементов продолжает улучшаться: оценки Compat 2021 достигли 99%, 97% и 95% для Chrome/Edge, Firefox и Safari соответственно. Большинство улучшений связано не с самим свойством aspect-ratio , а с тем, как атрибуты width и height сопоставляются со значением aspect-ratio по умолчанию для элементов. Это было реализовано для нескольких элементов в WebKit и <canvas> для Chromium .
CSS-преобразования
Поддержка transform: perspective(none) теперь поддерживается в Chromium , Gecko и WebKit . Это облегчит анимацию между перспективой и отсутствием перспективы.
В Chromium transform-style: preserve-3d (который позволяет дочерним элементам участвовать в одной и той же 3D-сцене) и свойство perspective (которое применяет преобразование перспективы к дочерним элементам) теперь приведены в соответствие со спецификацией , заставляя их применяться только к дочерним элементам. элементы.
Большой рост оценок за CSS-преобразования для всех браузеров обусловлен главным образом улучшениями набора тестов, в которых были исправлены или удалены неправильные тесты. Это облегчает понимание остающихся проблем совместимости и позволяет избежать регрессов в будущем.
Заключение
Мы благодарны за работу, которую все проделали, чтобы завершить год множеством улучшений в показателях, а также лучшей инфраструктурой тестирования. aspect-ratio было давно востребованной функцией веб-разработчиков, и теперь она поддерживается во всех браузерах. Использование флексбоксов, сетки и position: sticky становятся все более популярными, и теперь эти функции лучше поддерживаются в браузерах благодаря множеству улучшений, внесенных в 2021 году.
Что дальше? Мы рады продолжить сотрудничество с другими поставщиками браузеров и более широким сообществом в следующей версии этой работы. Мы начали исследовать и обсуждать основные направления на 2022 год. Ждите объявления в ближайшее время.
Если у вас есть отзывы или вопросы, пишите нам в Твиттере по адресу @ChromiumDev .