Новое в Chrome 90

Pete LePage

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

• Появилось новое значение для свойства CSS overflow .
• API политики функций переименован в политику разрешений .
• И появился новый способ реализации и использования Shadow DOM непосредственно в HTML.
• В 1990-х у меня было несколько почти таких же курток.
• И это еще не все .

Меня зовут Пит ЛеПейдж , и у меня есть страница 411 для разработчиков в Chrome 90, сделанная в стиле 1990-х!

Предотвращение переполнения с помощью overflow: clip

CSS — это все это и еще пакет чипсов! Но я думаю, что каждый веб-разработчик видел и сталкивался с чем-то, что в какой-то момент неловко переполняется. Есть отличная статья на CSS Tricks о разных способах обработки переполнения , например, с использованием overflow: hidden или auto .

В спецификации CSS Overflow есть новое свойство clip , которое работает аналогично hidden .

.overflow-clip {
  overflow: clip;
}

Использование overflow: clip позволяет вам предотвратить любой тип прокрутки для блока, включая программную прокрутку. Это означает, что блок не считается контейнером прокрутки; он не начинает новый контекст форматирования. Если вам это нужно, вы можете применить обрезку к одной оси с помощью overflow-x и overflow-y .

О, и FYI - есть также overflow-clip-margin , который позволяет расширить границу клипа. Это полезно в случаях, когда есть перелив чернил, который должен быть виден.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Смотрите overflow: clip в действии на https://petele-css-is-awesome.glitch.me/

Политика функций теперь называется Политикой разрешений.

В Chrome 74 мы представили API Feature Policy , который позволяет выборочно включать, отключать и изменять поведение определенных API и веб-функций в браузере. Эти политики представляют собой контракт между вами и браузером. Они информируют браузер о ваших намерениях.

Если ваш код или любая из используемых вами сторонних библиотек нарушает предварительно выбранные вами правила, браузер переопределяет поведение, предлагая лучший UX или просто говорит: «Поговорите с рукой», полностью блокируя API.

Начиная с Chrome 90, API Feature Policy будет переименован в Permissions Policy , а заголовок HTTP был переименован вместе с ним. В то же время сообщество остановилось на новом синтаксисе, основанном на Structured Field Values ​​для HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Если вам интересно, как использовать это на своем сайте, ознакомьтесь с разделом Введение в политику использования функций .

Декларативный теневой DOM

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

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Это отлично работает для клиентского рендеринга, но не так хорошо для серверного рендеринга, где нет встроенного способа выражения Shadow Roots в HTML, сгенерированном сервером. Но, начиная с Chrome 90, с Declarative Shadow DOM, вы можете продолжать. Вы можете создавать shadow roots, используя только HTML.

Декларативный теневой корень — это элемент <template> с атрибутом shadowroot . Он обнаруживается парсером HTML и немедленно применяется как теневой корень его родительского элемента.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Загрузка чистой HTML-разметки приводит к следующему дереву DOM:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Это дает нам преимущества инкапсуляции Shadow DOM и проекции слота в статическом HTML. Для создания всего дерева, включая Shadow Root, не требуется JavaScript.

Более подробную информацию можно найти в статье «Декларативный теневой DOM» на сайте web.dev.

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

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

Чтобы улучшить конфиденциальность и даже скорость загрузки для пользователей, посещающих сайты с поддержкой HTTPS, адресная строка Chrome по умолчанию будет использовать https:// . И если вы еще не настроили автоматическое перенаправление с HTTP на HTTPS, сейчас самое время это сделать.

А в состав Chrome Desktop входит кодер AV1 , специально оптимизированный для видеоконференций с интеграцией WebRTC.

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

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

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

Подписаться

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

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

Особая благодарность

Мне было очень весело снимать этот эпизод New in Chrome, посвященный 1990-м. Огромное спасибо Шону Михану за идею и за то, что он собрал замечательных людей, которые помогли открыть временную петлю в 1990-е.

И, конечно же, Лорен Борха, Ли Каррутерс и Лукас Хольчек, которые работают над всеми моими видеороликами New in Chrome и заставляют меня выглядеть намного лучше, чем я есть на самом деле. СПАСИБО!