Новое в Chrome 99

Pete LePage

Вот что вам нужно знать:

• До выхода 100-й версии Chrome и Firefox осталось всего несколько недель.
• Каскадные слои CSS дают вам больше контроля над CSS и помогают предотвратить конфликты стилей.
• Метод showPicker() позволяет программно отображать средство выбора браузера для элементов <input> , таких как date , color и datalist .
• И это еще не все.

Меня зовут Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 99.

Chrome 100 и Firefox 100

Chrome 100 выйдет в конце марта (2022), а Firefox 100 выйдет вскоре после этого в начале мая. Оба эти события являются важными вехами номера версии и переходят на три цифры. Но если ваш код ожидает две цифры, новый номер версии может вызвать у вас проблемы.

Любой код, проверяющий номера версий или анализирующий строку агента пользователя, следует проверить, чтобы убедиться в отсутствии каких-либо проблем.

В Chrome флаг #force-major-version-to-100 изменит текущий номер версии на 100.

А в меню настроек Firefox Nightly вы можете включить опцию "Firefox 100 User-Agent String". Хорошей идеей будет протестировать ваш сайт, чтобы убедиться, что все работает так, как и ожидалось.

Полную информацию можно получить, ознакомившись с информацией о том, что Chrome и Firefox вскоре достигнут основной версии 100 .

Каскадные слои CSS

Поддержка каскадных слоев CSS и правила CSS @layer появилась в Chrome 99. Они обеспечивают более явный контроль над файлами CSS для предотвращения конфликтов специфичности стилей. Это особенно полезно для больших кодовых баз, систем дизайна и при управлении сторонними стилями в приложениях.

Они вводят новый уровень в каскад CSS. В многослойных стилях приоритет уровня всегда превосходит специфичность селектора.

Если вы пытаетесь стилизовать ссылку внутри .card , в .post вы обнаружите, что будет применен более конкретный селектор. Используя правило @layer , вы можете более явно указать специфичность стиля каждого элемента и убедиться, что стиль ссылки в вашей карточке переопределяет стиль ссылки в вашем посте.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Это происходит из-за каскадного приоритета. Многослойные стили создают новые каскадные плоскости.

Каскадные слои с использованием правила CSS @layer поддерживаются в Chrome 99, Firefox 97 и Safari 15.4 Beta. Ознакомьтесь с разделом Каскадные слои приходят в ваш браузер для получения дополнительной информации.

showPicker() для элементов ввода

Долгое время нам приходилось прибегать к пользовательским библиотекам виджетов или хакам, чтобы показать выборщик даты. В HTML InputElements появился новый метод showPicker() . Это канонический способ показать выборщик браузера не только для date , но и для time , color и других элементов <input> с выборщиками.

Чтобы использовать его, вызовите showPicker() для элемента <input> . В этом примере я обернул его в блок try…catch . Это позволяет мне предоставить запасной вариант, если браузер не поддерживает API или не может показать средство выбора. Таким образом, гарантируя, что пользователи по-прежнему получат хороший опыт.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Подробную информацию и все типы <input> , для которых можно использовать showPicker() см. в статье Отображение средства выбора даты, времени, цвета и файлов в браузере.

И многое другое!

Конечно, есть еще много чего.

API Canvas2D был обновлен , добавлены новые функции, в том числе:

• Два новых события для ContextLost и ContextRestored
• Вариант willReadFrequently
• Дополнительная поддержка модификаторов текста CSS
• И многое другое.

Существует новая пробная версия Origin, которая позволяет PWA-приложениям указывать альтернативные цвета в манифесте веб-приложения для темного режима .

А теперь появился API распознавания рукописного ввода .

Дальнейшее чтение

Это охватывает только некоторые из основных моментов. Проверьте ссылки ниже для дополнительных изменений в Chrome 99.

• Что нового в Chrome DevTools (99)
• Устаревание и удаление Chrome 99
• Обновления ChromeStatus.com для Chrome 99
• Список изменений в исходном репозитории Chromium
• Календарь релизов Chrome

Подписаться

Чтобы оставаться в курсе событий, подпишитесь на канал Chrome Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 100, я сразу же расскажу вам, что нового в Chrome!