Chrome 99 что нового
Here’s what you need to know:
- The count down to version 100 of Chrome and Firefox is just weeks away. gives you more control over your CSS, and helps to prevent style-specificity conflicts.
- The showPicker() method allows you to programmatically show a browser picker for <input> elements like date , color , and datalist .
- And there’s plenty more.
I’m Pete LePage. Let’s dive in and see what’s new for developers in Chrome 99.
# Chrome 100 and Firefox 100
Chrome 100 ships in late March (2022), and Firefox 100 ships shortly after in early May. Both of these are a major version number milestone and roll over to three digits. But, if your code is expecting two digits, the new version number could cause issues for you.
Any code that checks version numbers, or parses the user agent string should be checked to make sure it won’t have any issues.
In Chrome, the #force-major-version-to-100 flag will change the current version number to 100.
And in Firefox Nightly’s Settings menu, you can enable the «Firefox 100 User-Agent String» option. It’s a good idea to test your site so that you can make sure everything works as expected.
# CSS Cascade Layers
Support for CSS Cascade Layers and the CSS @layer rule is landing in Chrome 99. They provide more explicit control of your CSS files to prevent style-specificity conflicts. This is especially useful for large codebases, design systems, and when managing third party styles in applications.
They introduce a new layer to the CSS cascade. With layered styles, the precedence of a layer always beats the specificity of a selector.
If you’re trying to style a link, inside a .card , within a .post you will find that the more specific selector will be applied. By using the @layer rule, you can be more explicit about the style specificity of each, and make sure that the link style in your card, overrides the link style in your post.
This is because of cascade precedence. Layered styles create new cascade planes.
Cascade layers using the CSS @layer rule are supported in Chrome 99, Firefox 97, and Safari 15.4 Beta. Check out Cascade layers are coming to your browser for more information.
# showPicker() for input elements
For a long time, we’ve had to resort to custom widget libraries or hacks to show a date picker. There’s a new showPicker() method on HTML InputElements . It’s the canonical way to show a browser picker, not only for date , but also time , color , and other <input> elements with pickers.
Browser date pickers in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop (July 2021).
To use it, call showPicker() on the <input> element. In this example, I wrapped it in a try…catch block. That allows me to provide a fallback, if the browser doesn’t support the API, or can’t show the picker. Thus, ensuring that users still get a good experience.
Check out Show a browser picker for date, time, color, and files for complete details, and all the different <input> types you can use showPicker() for.
# And more!
Of course there’s plenty more.
The Canvas2D API has been updated, adding new functionality, including:
- Two new events for ContextLost and ContextRestored
- A willReadFrequently option
- More CSS text modifier support
- And more.
There’s a new origin trial to allow PWAs to provide alternate colors in the web app manifest for dark mode.
# Further reading
This covers only some of the key highlights. Check the links below for additional changes in Chrome 99.
# Subscribe
To stay up to date, subscribe to Chrome Developers YouTube channel, and you’ll get an email notification whenever we launch a new video.
I’m Pete LePage, and as soon as Chrome 100 is released, I’ll be right here to tell you what’s new in Chrome!
Релиз Chrome 99. Что нового
Это последняя версия Chrome с двухциферным обозначением – через несколько недель выйдет Chrome 100.
Новая версия Chrome 99 поставляется в текущие установки Chrome через системы автоматических обновлений. Пользователи могут ускорить получение новой версии, запустив проверку вручную. Чтобы проверить версию Google Chrome, перейдите в меню > Справка > О браузере Google Chrome. Если обновление будет доступно, то браузер автоматически скачает и установит свежую версию. Для завершения установки обновления потребуется перезапуск браузера.
Вы также можете скачать новую версию браузера с нашего сайта:
Chrome 99: новые функции и улучшения
Значок загрузок
Microsoft Edge основан на Chromium, но имеет несколько отличий от Chrome. Вместо того, чтобы загрузки отображались на нижней панели, они появляются на значке в верхней панели инструментов. Google теперь тестирует эту функцию в Chrome 99.
Когда вы что-то загружаете, на верхней панели инструментов появляется маленький синий значок загрузки. Когда загрузка завершена, он становится серым и в конце концов исчезает. Эта функция все еще находится в разработке и может включать в круговой индикатор процесса загрузки в финальной версии. Google может позаимствовать больше возможностей из Edge, например добавить функцию закрепления значка на панели инструментов.
Системное поле выбора даты для веб-приложений
Запросы на эту функцию часто отправляли разработчики. В Chrome 99 можно использовать системное окно выбора даты (Date Picker) для форм. Вместо того, чтобы использовать хаки CSS и пользовательские виджеты, веб-приложения могут просто использовать средство выбора даты на вашем устройстве. Это еще одно обновление, которое делает веб-приложения более нативными. Протестировать поля выбора дат можно на демо-сайте.
Встроенное распознавание рукописного ввода
Google начал экспериментировать с интеграцией API распознавания рукописного ввода в Chrome 91. Новый API позволит разработчикам легко внедрять рукописный ввод в свои веб-приложения. Google дорабатывает этот API в версии 99. Раньше разработчикам приходилось использовать сторонние интеграции. Пока этот API доступен в настольных версиях Chrome.
Прекращение использования Manifest V2
В конце 2020 года Google представил API Manifest V3 для расширений. Важной особенностью Manifest V3 является то, что API webRequest, который использовался каждым расширением для блокировки рекламы, заменяется на API chrome.declarativeNetRequest.
На практике это означает, что возможности блокировщиков рекламы будут ограничены. Manifest V3 позволяет расширениям иметь до 30 000 правил, в то время как в настоящее время некоторые блокировщики рекламы поддерживают около 100 000 правил. Использование Manifest V2 постепенно прекращается, поскольку разработчики расширений работают с Google над версией Manifest V3.
Другие улучшения
С недавнего времени Google выпускает новые версии Chrome каждые четыре недели, а это означает, что крупные функции появляются не так часто. Тем не менее, разработчики уделяют много внимания внутренним улучшениям. Подробная информация об этих изменениях доступна на сайте разработчиков Google, а также в блоге Chromium. Здесь мы выделим несколько изменений:
- Манифесты веб-приложений теперь поддерживают поле color_scheme_dark для указания альтернативного цвета темы и цвета фона для темного режима.
- В Chrome 99 представлены версии свойств CSS без префиксов для выделения текста.
- Каскадные слои CSS: поддержка создания слоев для представления элементов по умолчанию, сторонних библиотек, тем, компонентов, переопределений и т. д.
- Battery Status API больше не поддерживается для небезопасных источников, таких как HTTP-страницы или HTTPS-iframe, встроенные в HTTP-страницы.
Как обновить Google Chrome
Обновление будет установлено автоматически. Пользователи могут ускорить получение новой версии, запустив проверку вручную. Чтобы проверить версию Google Chrome, перейдите в меню > Справка > О браузере Google Chrome. Если обновление будет доступно, то браузер автоматически скачает и установит свежую версию. Для завершения установки обновления потребуется перезапуск браузера.
Интерфейс Google Chrome стал ещё удобнее
С обновлением до версии Chrome 99 фирменный браузер получил полезное изменение. На смену отдельным кнопкам вызова меню закладок и списка для чтения пришла удобная боковая панель, объединяющая обе функции для облегчения доступа к каждой из них.
Щелчок по новой кнопке, которая выглядит как прямоугольник с заштрихованной частью справа, показывает или скрывает соответствующий элемент интерфейса. Он предоставляет доступ к функциям списка для чтения, включая возможность добавить открытую страницу, пометить элементы как прочитанные или удалить их. Там же можно переключиться на список закладок, чтобы просмотреть сохранённые ранее сайты.
Вышел Chrome 99
В начале марта 2022 года Google выпустила стабильную версию браузера Chrome 99 для Windows, Mac и Linux.
В новой версии Chrome исправлены ранее обнаруженные ошибки, внесены новые улучшения, закрыты 28 уязвимостей. Причем среди патчей безопасности нет критических, а только обновления для закрытия ранее обнаруженных сторонними разработчиками и собственной командой уязвимостей высокого и среднего уровня.
В Chrome 99 в класс HTMLInputElement добавлен метод showPicker(), расширены некоторые функции и свойства CSS (calc(), color-scheme), в CSS реализована поддержка каскадных слоев, опять можно удалить предлагаемые по умолчанию поисковые системы. В JS движке V8 в API Intl.Locale добавлены новые свойства (calendars, collations, hourCycles, numberingSystems, timeZones, textInfo и weekInfo).
В Chrome 99 внесены улучшения в инструменты для web-разработчиков, включая панели и web-консоль, улучшено управление панелями с сенсорных экранов
Google запланировала на 29 марта выпуск следующей версии браузера: Chrome 100. Google продолжает проводить тестирование возможного нарушения работы сайтов после достижения браузером версии 100 из-за проблем с User-Agent. При активации опции «chrome://flags#force-major-version-to-100» в заголовке User-Agent начинает выдаваться версия 100.
В феврале этого года Mozilla напомнила веб-разработчикам проверить свои сайты и убедиться, что версии Firefox 100 и Chrome 100 будут запускаться там без ошибок и корректно отрабатывать данные о версии браузера из строки User-Agent. Например, трехзначный индекс браузера из User-Agent на веб-сайте, созданном на конструкторе Duda, в некоторых случаях будет откидывать последнюю цифру индекса версии. Веб-сервер примет клиента за версию браузера 10 и выдаст ошибку, так как он поддерживает минимум версию 40.
Firefox 100 выйдет 3 мая.