Новое в Chrome 99

Пит ЛеПейдж

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

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

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

Хром 100 и Фаерфокс 100

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

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

Страница флагов Chrome, на которой выделена новая опция #force-major-version-to-100

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

А в меню настроек Firefox Nightly вы можете включить опцию «Строка пользовательского агента Firefox 100». Рекомендуется протестировать свой сайт, чтобы убедиться, что все работает так, как ожидалось.

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

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

В Chrome 99 появилась поддержка каскадных слоев CSS и правила CSS @layer Они обеспечивают более явный контроль над вашими 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> с помощью средств выбора.

Скриншоты средств выбора браузера
Средства выбора даты в браузере на настольных компьютерах Chrome, мобильных устройствах Chrome, настольных компьютерах Safari, мобильных устройствах Safari и настольных компьютерах Firefox (июль 2021 г.).

Чтобы использовать его, вызовите 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 на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

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