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

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

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

Rachel Andrew Technical Writer

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

Промежутки во Flexbox

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

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

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

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

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

Почему поддержка доступна не всегда?

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

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

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

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

Проблемы

Здесь две проблемы. Первая – это проблема совместимости. С момента появления функции в одном браузере до ее внедрения во всех остальных может пройти много времени.

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

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

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

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

Сообщения

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

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

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

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

Browser Support

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

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