Новое в Chrome 90

Пит ЛеПейдж

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

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

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

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

CSS УДИВИТЕЛЬНЫЙ

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

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

.overflow-clip {
  overflow: clip;
}
Квадратное поле с текстом CSS — это потрясающе, когда потрясающе выходит за пределы коробки.

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

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

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Квадратный блок с текстом CSS — это потрясающе, когда потрясающе выходит за пределы коробки.

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

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

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

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

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

Chrome 90 и более поздние версии 

Permissions-Policy: geolocation=()

Chrome 89 и более ранние версии 

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;

Это отлично работает для рендеринга на стороне клиента, но не так хорошо для рендеринга на стороне сервера, где нет встроенного способа выражения теневых корней в HTML, сгенерированном сервером. Но начиная с Chrome 90 с декларативным теневым DOM, все готово. Вы можете создавать теневые корни, используя только 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. Для создания всего дерева, включая теневой корень, не требуется JavaScript.

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

И еще

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

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

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

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

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

Подписаться

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

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

Особый привет

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

ГДС Дизайн

  • Фола Акинола
  • Дерек Басс
  • Кристофер Бодель
  • Ник Крусик
  • Крис Уокер

Звуковой дизайн и дополнительная музыка

  • Брайан Гордон

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