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

Упрощение разработки для Интернета.

Rachel Andrew

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

разрыв флексбокса

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

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

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

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

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

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

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

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

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

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

Проблемы

У нас здесь две проблемы. Во-первых, это проблема совместимости: с момента появления функции в одном браузере до момента, когда она станет доступна повсюду, может пройти много времени.

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

Совместимость

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

За ходом работы можно следить на информационной панели Interop 2022 .

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

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

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

• Изучите CSS
• Изучите формы
• Изучите дизайн
• Изучите PWA

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

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

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

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

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