Новое в Chrome 99

Pete LePage

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

• До 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 изменит номер текущей версии на 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> с помощью средств выбора.

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

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