Compat 2021: устранение пяти основных проблем совместимости в Интернете

Google работает с другими поставщиками браузеров и отраслевыми партнерами, чтобы устранить пять основных проблем совместимости браузеров для веб-разработчиков: CSS flexbox, CSS Grid, position: sticky , aspect-ratio и CSS-преобразования.

Филип Ягенштедт
Роберт Найман

Google работает с другими поставщиками браузеров и отраслевыми партнерами, чтобы устранить пять основных проблем совместимости браузеров для веб-разработчиков. В центре внимания — CSS flexbox, CSS Grid, position: sticky , aspect-ratio и CSS-преобразования. Узнайте , как вы можете внести свой вклад, и следуйте инструкциям , чтобы узнать, как принять участие.

Фон

Совместимость в Интернете всегда была большой проблемой для разработчиков. За последние пару лет Google и другие партнеры, включая Mozilla и Microsoft, решили узнать больше о главных болевых точках веб-разработчиков, чтобы скорректировать нашу работу и расставить приоритеты, чтобы улучшить ситуацию. Этот проект связан с работой Google по удовлетворенности разработчиков (DevSAT) и начался в более широком масштабе с создания опросов MDN DNA (оценка потребностей разработчиков) в 2019 и 2020 годах, а также с глубоких исследований, представленных в браузере MDN. Отчет о совместимости 2020 . Дополнительные исследования проводились по различным каналам, таким как опросы State of CSS и State of JS .

Цель на 2021 год — устранить проблемы совместимости браузеров в пяти ключевых областях, чтобы разработчики могли уверенно опираться на них как на надежную основу. Эта инициатива называется #Compat 2021 .

Выбираем, на чем сосредоточить внимание

Несмотря на то, что проблемы совместимости браузеров существуют практически во всех веб-платформах, основное внимание в этом проекте уделяется небольшому количеству наиболее проблемных областей, которые можно значительно улучшить, тем самым исключив их из числа главных проблем для разработчиков.

В проекте совместимости используется несколько критериев, влияющих на то, какие области следует расставить по приоритетам, вот некоторые из них:

Пять главных направлений в 2021 году

В 2020 году Chromium начал работу над основными областями, изложенными в документе «Улучшение совместимости браузера Chromium в 2020 году ». В 2021 году мы начинаем целенаправленную работу, чтобы пойти еще дальше. Google и Microsoft вместе с Igalia работают над решением основных проблем в Chromium . Игалия, которая регулярно участвует в разработке Chromium и WebKit, а также сопровождает официальный порт WebKit для встраиваемых устройств, очень поддерживает и участвует в усилиях по обеспечению совместимости, а также будет помогать решать и отслеживать выявленные проблемы.

Вот области, которые планируется исправить в 2021 году.

CSS-флексбокс

CSS flexbox широко используется в Интернете, и перед разработчиками все еще стоят серьезные проблемы. Например, и в Chromium , и в WebKit возникали проблемы с гибкими контейнерами auto-height , приводившие к изображениям неправильного размера.

Растянутое фото шахматной доски.
Изображение неправильного размера из-за ошибок.
Шахматная доска.
Изображение правильного размера.
Фото Алиреза Махмуди.

Сообщение в блоге flexbox Cats Игалии более подробно рассматривает эти проблемы и приводит множество примеров.

Почему это в приоритете

CSS-сетка

CSS Grid — это основной строительный блок для современных веб-макетов, заменяющий многие старые методы и обходные пути. Поскольку распространение растет, оно должно быть очень надежным, чтобы различия между браузерами никогда не были причиной его избегания. Одна из областей, которой не хватает, — это возможность анимировать макеты сетки, поддерживаемая в Gecko, но не в Chromium или WebKit . При поддержке становятся возможными такие эффекты:

Анимированная демонстрация шахмат от Чэнь Хуэй Цзин .

Почему это в приоритете

Позиция CSS: липкая

Липкое позиционирование позволяет контенту прикрепляться к краю области просмотра и обычно используется для заголовков, которые всегда видны в верхней части области просмотра. Хотя эта функция поддерживается во всех браузерах, в распространенных случаях она не работает должным образом. Например, липкие заголовки таблиц не поддерживаются в Chromium, и, хотя теперь они поддерживаются с помощью флага , результаты в разных браузерах непоследовательны:

Хром с «TablesNG»
Геккон
Вебкит

Посмотрите демонстрацию липких заголовков таблиц от Роба Флэка.

Почему это в приоритете

Свойство соотношения сторон CSS

Новое свойство CSS aspect-ratio позволяет легко поддерживать постоянное соотношение ширины и высоты элементов, устраняя необходимость в хорошо известном padding-top :

Использование отступа-top
.container {
  width: 100%;
  padding-top: 56.25%;
}
Использование соотношения сторон
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Поскольку это настолько распространенный вариант использования, ожидается, что он станет широко использоваться, и мы хотим убедиться, что он надежен во всех распространенных сценариях и во всех браузерах.

Почему это в приоритете

  • Опросы: уже хорошо известны, но еще не широко используются в штате CSS.
  • Тесты: 27% пройдены во всех браузерах
  • Использование: 3% , ожидается рост.

CSS-преобразования

CSS-преобразования уже много лет поддерживаются всеми браузерами и широко используются в Интернете. Однако по-прежнему остается много областей, в которых они не работают одинаково в разных браузерах, особенно с анимацией и 3D-преобразованиями. Например, эффект переворачивания карты может быть очень непоследовательным в разных браузерах:

Эффект переворота карты в Chromium (слева), Gecko (в центре) и WebKit (справа). Демо Дэвида Бэрона из комментария об ошибке .

Почему это в приоритете

  • Опросы: очень хорошо известны и используются в State of CSS.
  • Тесты: 55% пройдено во всех браузерах
  • Использование: 80%

Как вы можете внести свой вклад и следить за развитием событий

Следите за обновлениями, которые мы публикуем на @ChromiumDev или в общедоступном списке рассылки Compat 2021, и делитесь ими. Убедитесь, что ошибки существуют, или сообщите о проблемах, с которыми вы столкнулись, а если чего-то не хватает, свяжитесь с нами по вышеуказанным каналам.

Здесь, на сайте web.dev, будут регулярно публиковаться обновления о ходе работы, а также вы сможете следить за прогрессом по каждому направлению на панели управления Compat 2021 .

Панель управления Compat 2021
Панель управления Compat 2021 (скриншот сделан 16 ноября 2021 г.).

Мы надеемся, что совместные усилия производителей браузеров по повышению надежности и совместимости помогут вам создавать потрясающие вещи в Интернете!