Отпразднуйте более совместимую сеть с Interop 2023

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

Скриншот результатов экспериментальных браузеров. Общее взаимодействие: 95. Расследования: 85. Chrome/Edge: 99. Firefox: 98. Safari: 97.
Окончательные результаты экспериментальных версий браузеров по состоянию на 31 января 2024 г. См. wpt.fyi/interop-2023 .

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

Что нас радует?

Полный список приоритетных направлений на 2023 год можно найти на информационной панели Interop 2023 . Некоторые области внимания, такие как :has() , контейнерные запросы и атрибут inert , охватывали всю функцию. Другие, например работа над Flexbox, касались некоторых незаметных сбоев тестов в существующей кроссбраузерной функции.

:имеет()

Поддержка браузера

  • 105
  • 105
  • 121
  • 15,4

Источник

«Наконец-то родительский селектор для CSS! Об этом просили почти с самого первого дня, и, наконец, наличие его во всех браузерах — это фантастика, а это означает, что разработчикам нужно запускать меньше JavaScript для эмуляции этого селектора», — Томас Штайнер, инженер по связям с разработчиками в Chrome .

Функциональный псевдокласс :has() вызвал огромный ажиотаж, поскольку он принес на платформу ключевой запрос со стороны разработчиков. Он дает вам родительский селектор — вы можете выбрать элемент на основе того, что находится внутри него. Однако его можно использовать и для гораздо большего. Как объяснено в CSS-обертке , вы можете выбрать гораздо больше, чем просто родительский элемент, и даже сделать боковой выбор.

Демо CSS :has() : док-станция

Уна Кравец , инженер по связям с разработчиками в команде Chrome, объясняет:

«Селектор :has() — одна из самых гибких и мощных новых функций CSS. С его помощью вы можете стилизовать любой родительский элемент в зависимости от присутствия, состояния или даже количества дочерних элементов. Но более того, вы можете комбинировать его с другими комбинаторами для стилизации родственных элементов и действительно получить новый уровень контроля над стилем вашего пользовательского интерфейса. Это такая гибкая функция! Я уже видел массу классных демонстраций, которые уменьшают необходимость полагаться на дополнительные сценарии при использовании преимуществ сила :has()».

Как напомнил мне Филип Ягенштедт, инженер-программист Chrome, :has() была главной функцией, с которой разработчики боролись из-за отсутствия поддержки, когда ее спрашивали в опросе о состоянии CSS в 2023 году . Так что мы не единственные, кто рад, что это доступно.

Вы можете послушать, как Уна вместе с Адамом Аргайлом рассказывает о has() в The CSS Podcast , а затем узнать больше о :has() из сообщений веб-сообщества.

Контейнерные запросы

Поддержка браузера

  • 105
  • 105
  • 110
  • 16

Источник

2023 год оказался отличным годом для вещей, которые когда-то считались невозможными. В дополнение к :has() веб-платформа наконец-то получила кросс-браузерную поддержку запросов к контейнерам. Вы запрашиваете запросы к контейнеру (или элементу) с 2011 года, всего через год после того, как была представлена ​​концепция адаптивного дизайна. Теперь он здесь и доступен во всех основных браузерных движках .

Уна и Адам обсуждали контейнерные запросы в CSS Podcast , а Уна представила их в эпизоде ​​«Проектирование в браузере». Сообщество также поделилось множеством советов и идей.

Подсетка

Поддержка браузера

  • 117
  • 117
  • 71
  • 16

Источник

Subgrid — мое любимое дополнение в Interop 2023. Оно позволяет вам определить сетку для родительского элемента, а затем использовать размеры дорожек, определенные для этого родительского элемента, в сетках, вложенных внутри этой основной сетки. Благодаря работе инженеров веб-платформы Microsoft Edge в 2023 году подсетка стала доступна во всех основных браузерных движках , чтобы повысить рейтинг Chrome и сделать эту замечательную функцию доступной для всех.

Инженер по связям с разработчиками Chrome Адриана Хара рассказала мне, как сетка и подсетка упростили создание великолепного пользовательского интерфейса.

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

Я описал некоторые варианты использования подсетки в статье для 12 Days of Web , и, как и в случае с другими функциями в этом посте, вы можете прослушать эпизод подкаста CSS, посвященный этому . Есть также очень много ресурсов со всего Интернета.

Цветовые пространства и функции

Поддержка браузера

  • 111
  • 111
  • 113
  • 15

Источник

Неудивительно, что разработчик Chrome CSS Адам Аргайл сказал мне, что цветовые пространства и функции — его любимая функция.

«Прощайте, неуклюжая математическая переменная значения канала HSL; здравствуйте, однострочники с цветовыми вариантами «точно в срок». Новые цветовые пространства и функции не просто решают проблемы рабочего процесса с цветом, они открывают доступ к более продвинутым, надежным и ярким цветам и градиентам. . Что не нравится в открытии некоторых способностей и одновременном облегчении вашей жизни? Добавьте приправу Interop, и это блюдо станет ярким и восхитительным».

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

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

С нетерпением жду Interop 2024

Как только функции становятся совместимыми, они становятся частью Baseline — недавно доступной. Приятно видеть количество новых функций, которые вошли в эту группу в течение 2023 года , в немалой степени благодаря работе всех, кто участвует в Interop 2023. Очень скоро придет время объявить выбранные направления на 2024 год, и мы Мы все с нетерпением ждем возможности увидеть, насколько лучше может стать веб-платформа в этом году.