Полугодовое обновление Compat 2021 — попытка устранить проблемы совместимости браузеров в пяти ключевых областях: CSS flexbox, CSS Grid, положение: липкое, соотношение сторон и преобразования CSS.
Пришло время для полугодового обновления Compat 2021 — попытки устранить проблемы совместимости браузеров в пяти ключевых областях. Подробнее о работе #compat2021 и о том, как мы определились с направлениями фокуса, читайте в мартовском анонсе .
Улучшения Chromium, обсуждаемые в этом посте, коснутся Chrome, Edge и всех браузеров на базе Chromium.
Как мы измеряем прогресс
Вы можете проверить панель управления Compat 2021 на наличие тестов веб-платформы , чтобы увидеть количество пройденных тестов и графики тенденций для разных браузеров.
Простое число «пройденных тестов» не дает полной информации о совместимости браузеров, однако это один из сигналов, которые мы используем, чтобы видеть прогресс наших усилий. Меньшее количество различий между браузерами в результатах тестирования означает большую совместимость веб-функций в нескольких браузерах.
CSS-флексбокс
Во всех трех браузерных движках были улучшены flexbox .
В Safari 14.1 добавлено свойство gap для flexbox . Свойство gap — удобный способ установить расстояние между элементами. Это свойство часто используется в макете Grid, а поддержка макета flexbox была одной из наиболее востребованных функций в отчете о совместимости браузера MDN . Благодаря этому обновлению свойство gap в гибких макетах доступно во всех основных браузерах, и главная проблема совместимости решена. Safari 14.1 также включал множество исправлений для изображений в flexbox , устраняя необходимость в старых обходных путях.
В Firefox решена проблема с отображением таблиц как гибких элементов , что позволило Firefox приблизиться к 100% прохождению тестов (в настоящее время — 98,5%).
Фиксированные таблицы Chromium также являются гибкими элементами . В Chromium 88 также произошла перезапись изображений как flex-элементов , исправившая ряд давних ошибок. Наконец, в Chromium недавно добавлена поддержка новых ключевых слов выравнивания : start , end , self-start , self-end , left и right . Эти ключевые слова можно попробовать в Chrome Canary и Edge Canary .
CSS-сетка
Использование CSS Grid неуклонно растет и в настоящее время составляет 9% просмотров страниц. Все три основных браузерных движка реализуют CSS Grid и уже прошли более 89% соответствующих тестов веб-платформы. Устранение разрыва в совместимости важно для поддержки устойчивого развития этой функции.
К 2021 году процент прохождения тестов Safari улучшился с 89% до 93%, а Chromium работает над новой архитектурой для решения большего количества проблем с CSS Grid, которая называется GridNG. Это усилия команды Microsoft, которые привели к недавнему увеличению числа целевых Grid-тестов с 94% до 97%. В ближайшее время вы можете ожидать обновления GridNG в блоге Edge .
position: sticky
В Chromium position: sticky для заголовков таблиц была исправлена с запуском TablesNG — многолетней работы по перепроектированию рендеринга таблиц. Это изменение вместе с несколькими финальными исправлениями позволило каналу разработчиков Chrome и Edge 93 пройти 100% целевых тестов .
За пределами position: sticky , TablesNG исправил 72 ошибки Chromium !
Свойство aspect-ratio CSS
Свойство aspect-ratio , которое позволяет легко установить соотношение ширины и высоты, имеет решающее значение для адаптивного веб-дизайна. Это также решение для предотвращения кумулятивных сдвигов макета .
Свойство aspect-ratio теперь поддерживается в стабильных версиях Chrome, Edge и Firefox, а также в бета-версии Safari 15 . По мере улучшения кроссбраузерной поддержки растет и использование .
Хотя ни один браузер не имеет 100% прохождения тестов, разрыв в совместимости по aspect-ratio является наименьшим из всех пяти приоритетных областей Compat 2021. Он имеет более 90% прохождения тестов для всех основных браузеров . В дальнейшем мы будем продолжать следить за прогрессом, используя этот набор тестов, чтобы сделать его надежной функцией.
Узнайте больше об использовании и преимуществах свойства aspect-ratio на сайте web.dev .
CSS-преобразования
Наблюдается медленное и стабильное улучшение результатов целевых тестов CSS-преобразований , как за счет исправления ошибок, так и за счет усовершенствований самих тестов.
Команда Chromium также работает над улучшением совместимости transform-style: preserve-3d и transform :perspective() . Мы надеемся, что в следующем обновлении мы сможем рассказать о большем прогрессе.
Общее улучшение оценок
С момента анонса в марте все три браузерных движка улучшили свои показатели Compat 2021:
- Chrome и Edge Dev поднялись с 86 до 92.
- Firefox поднялся с 83 до 86.
- Safari увеличился с 64 до 82.
Примечательно, что Safari удалось сократить разрыв в совместимости на 18 пунктов благодаря большой работе участников WebKit. В частности, команда Igalia внесла свой вклад в свойство aspect-ratio и множество улучшений Flexbox и Grid, таких как gap для flexbox и различные исправления ошибок.
Следите за прогрессом Compat 2021
Чтобы следить за развитием Compat 2021, следите за панелью управления , подпишитесь на нашу рассылку или свяжитесь с нами по адресу @chromiumdev . Если у вас возникли какие-либо проблемы, обязательно сообщите об ошибке для уязвимого браузера.