Полугодовое обновление Interop 2024

Rachel Andrew

В преддверии второй половины года самое время посмотреть, как Interop 2024 улучшил совместимость веб-приложений в этом году.

С чего мы начали

В начале года показатель поддержки экспериментального браузера Chrome составлял 83.

Сегодня этот показатель составляет 90, а рейтинг стабильных браузеров составляет 85 на момент выпуска Chrome 126 в июне. Общая оценка экспериментального взаимодействия выросла на 10 баллов, и в этой публикации описаны некоторые функции, которые способствовали этому показателю.

Поповер

Popover стал частью Baseline Newly Available в апреле 2024 года. Popover интересен тем, что многие функции пользовательского интерфейса, которые вам нужно создать — например, меню, всплывающие подсказки, наложения для выбора и обучающие пользовательские интерфейсы — являются типами всплывающих окон. До появления popover создание любой из этих функций требовало большого количества пользовательского кода. Код, гарантирующий, что несколько элементов не будут открыты одновременно, или включающий подсветку, когда пользователь щелкает за пределами элемента. Возможно, у вас также возникли проблемы с z-index , чтобы убедиться, что элемент пользовательского интерфейса остается поверх остального интерфейса.

Все эти и другие функции включены в API Popover , что экономит время разработки и помогает создавать более производительные и доступные интерфейсы. Например, следующий код создает всплывающее окно с подсветкой, которое автоматически закроет другие всплывающие окна при открытии.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Узнайте больше в разделе API Popover в Baseline . Многие приложения уже видят преимущества Popover. Токопедии удалось значительно сократить объем кода React , воспользовавшись этой функцией и используя полифилл для неподдерживающих браузеров.

Расширенные пользовательские свойства с помощью @property

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

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Правило @property в настоящее время улучшает экспериментальную оценку Firefox, повышая стабильную оценку, когда Firefox 128 выйдет позже в этом месяце. Он также присоединяется к новой версии Baseline.

Узнайте больше в @property: предоставление суперспособностей переменным CSS .

Свойство font-size-adjust

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

Свойство font-size-adjust в настоящее время включено в экспериментальную оценку для Chrome, однако оно увеличит стабильную оценку, когда оно будет выпущено в Chrome 127 в этом месяце. Он также присоединяется к новой версии Baseline.

перенос текста: баланс

Использование text-wrap: balance указывает браузеру найти наилучший сбалансированный перенос строк для текста. Это особенно полезно для заголовков, например, предотвращая перенос заголовка в одно слово во второй строке.

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

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