Преодоление разрыва

Упрощение разработки веб-приложений.

Рэйчел Эндрю

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

Зазор Flexbox

В качестве примера проблемного свойства можно привести свойство gap , позволяющее создавать промежутки между элементами сетки или гибкого элемента, а также между столбцами в многоцветном контейнере. Хотя свойство column-gap в многоцветном контейнере существовало уже давно, в сеточной компоновке оно впервые появилось как grid-gap , наряду с grid-column-gap и grid-row-gap .

Сразу после появления Grid-макета в браузерах это свойство было переименовано в gap , наряду с row-gap и column-gap . Затем было указано, что оно работает и в Flex-макете. Переименование означает, что у нас нет нескольких свойств, выполняющих одно и то же действие.

.box {
  display: flex;
  gap: 1em;
}

Firefox добавил свойство `gap` для гибких макетов в октябре 2018 года. В Chrome оно появилось только в июле 2020 года, а в Safari — в апреле 2021 года. Это означало, что до безопасного использования gap прошло два года и шесть месяцев. В действительности, для большинства разработчиков ожидание было гораздо дольше из-за необходимости поддержки более старых версий браузеров. Поддержка ` gap в гибких макетах осложнялась тем, что мы не можем использовать запросы функций для определения поддержки `gap` в гибких макетах. Поскольку свойство gap поддерживается в сетках, @supports (gap:1em) ` вернет `true`.

Дополнительная проблема заключается в том, что когда новая функция появляется в одном браузере, люди начинают обсуждать её и делиться демонстрационными версиями. Зачастую это начинается задолго до того, как эта функция вообще появится в каком-либо стабильном браузере. Это может сбивать с толку разработчиков, или, по крайней мере, вызывать разочарование. Постоянно повсюду обсуждаются новые, привлекательные функции, а затем вы обнаруживаете, что не можете ими пользоваться из-за отсутствия поддержки.

Почему существуют пробелы в поддержке?

Это не попытка обвинить какой-либо один браузер в медленной работе. Если вы посмотрите на функции разных платформ, вы обнаружите, что разные браузеры лидируют в разных областях.

Большинство функций будут разрабатываться в прототипах для одного браузера. Например, спецификация сетки была впервые создана Microsoft и реализована в первоначальном виде в Internet Explorer 10. Инженер из Mozilla проделал большую работу, чтобы выяснить, как должна вести себя подсетка, поэтому эта функция сначала появилась в Firefox. Мы видим, как Safari лидирует в разработке некоторых интересных новых цветовых функций.

Хотя один браузер может лидировать в прототипировании, представители всех браузеров (и других организаций) в Рабочей группе CSS обсуждают особенности CSS. Очень важно, чтобы функция могла быть реализована во всех браузерах и чтобы она не была разработана таким образом, чтобы ее реализация в одном браузере была невозможна. Это привело бы к постоянному пробелу в поддержке и отсутствию внедрения данной функции.

Однако, когда дело доходит до внедрения той или иной функции, её необходимо приоритезировать наряду со всеми другими возможными функциями для данного браузера. И иногда внедрение чего-либо задерживается из-за другой работы, необходимой для улучшения браузера. Отличный пример — работа над RenderingNG в Chromium. Это проложило путь к реализации subgrid; однако большой разрыв между выпуском subgrid в Firefox и Chromium объясняется необходимостью сначала переписать структуру сетки в новом движке рендеринга.

Проблемы

У нас здесь две проблемы. Первая — это проблема совместимости, то есть от момента появления той или иной функции в одном браузере до её повсеместного распространения может пройти много времени.

Вторая проблема связана с донесением информации. Как нам четко обозначить пробелы в поддержке? Как нам рассказывать о новых функциях, не заставляя всех тщательно изучать каждую из них, чтобы выяснить, насколько хорошо она поддерживается?

Взаимодействие

Браузеры уже работают вместе над решением проблемы совместимости. В прошлом году Compat 2021 помог устранить пробел в поддержке ряда функций, включая свойство gap в гибкой компоновке. В этом году усилия в рамках Interop 2022 сосредоточены на 15 функциях, и по некоторым из них уже есть прогресс.

Вы можете следить за ходом работ на панели мониторинга Interop 2022 .

Обмен сообщениями

Вторая проблема – это то, в чем я с удовольствием помогу, когда мы будем обсуждать новые функции здесь, на web.dev и на developer.chrome.com . Я хочу, чтобы статус новых функций был предельно ясен при чтении наших материалов, и чтобы мы могли предложить практические способы решения проблем с поддержкой.

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

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

Мы также вносим свой вклад в открытую веб-документацию, поддерживая проект Open Web Docs . Это гарантирует наличие первоклассной документации на MDN , а также актуальных данных о совместимости с браузерами . Затем мы используем эти данные здесь, на web.dev, чтобы показать поддержку функций. Вот текущая поддержка функции gap в гибкой компоновке.

Browser Support

  • Chrome: 84.
  • Край: 84.
  • Firefox: 63.
  • Сафари: 14.1.

Если вы хотите узнать больше о видении Chrome в отношении веб-технологий, о том, с чем мы экспериментируем в рамках Origin и тестов для разработчиков, то вы все чаще будете находить эту информацию на нашем дочернем сайте — developer.chrome.com . Контент там может быть экспериментальным или поддерживаться только в Chrome на данный момент, но мы будем рады, если вы изучите его и оставите свой отзыв.

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

Фотография Кристофера Максимилиана .