Упрощение разработки для Интернета.
Когда мы разговариваем с разработчиками, индивидуально или посредством опросов, таких как 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 . Я хочу, чтобы статус функций был по-настоящему понятен, когда вы читаете наш контент, и чтобы мы предоставили практические способы решения проблем поддержки.
Мы запустили ряд фундаментальных курсов, и их будет еще больше. Эти курсы помогут вам научиться создавать современные веб-приложения, используя основные технологии веб-платформы. Проверить:
Мы работаем над тем, чтобы сосредоточить контент на этом сайте на тех вещах, которые вы можете безопасно использовать. Мы еще не полностью достигли цели; однако в ближайшие месяцы вы должны начать видеть некоторый сдвиг в сторону практики.
Мы также вносим свой вклад в открытую веб-документацию, поддерживая проект Open Web Docs . Это гарантирует, что у нас есть первоклассная документация по MDN , а также актуальные данные о совместимости браузеров . Затем мы используем эти данные здесь, на web.dev, чтобы показать поддержку функций. Вот текущая поддержка gap
в гибкой компоновке.
Поддержка браузера
Если вы хотите узнать больше о видении Chrome в Интернете, о том, с чем мы экспериментируем в Origin и пробных версиях для разработчиков, вы все чаще найдете этот контент на нашем дочернем сайте — Developer.chrome.com . Содержимое там вполне может быть экспериментальным или на данный момент поддерживается только в Chrome, но мы бы хотели, чтобы вы изучили его и оставили отзыв.
Сейчас действительно захватывающее время для Интернета. Мы надеемся, что сможем помочь вам быстрее предоставить вам ключевые функции и прояснить существующие пробелы, что сделает веб-разработку более увлекательной и менее разочаровывающей.
Фото Кристофера Максимилиана .