Эта страница переведена с помощью Cloud Translation API.

Новое в Chrome 69

Pete LePage

Прошло десять лет с момента первого выпуска Chrome. С тех пор многое изменилось, но наша цель — создание прочной основы для современных веб-приложений — не изменилась!

В Chrome 69 мы добавили поддержку:

CSS Scroll Snap позволяет создавать плавную и плавную прокрутку.
Вырезы дисплея позволяют использовать всю площадь экрана, включая любое пространство за вырезом дисплея, которое иногда называют вырезом.
API веб-блокировок позволяет асинхронно получить блокировку, удерживать ее во время выполнения работы, а затем снимать ее.

И есть еще много всего !

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

Хотите полный список изменений? Ознакомьтесь со списком изменений репозитория исходного кода Chromium .

CSS-прокрутка

Посмотреть демо | Источник

CSS Scroll Snap позволяет создавать плавную, плавную прокрутку, объявляя позиции привязки прокрутки, которые сообщают браузеру, где остановиться после каждой операции прокрутки. Это очень полезно для каруселей изображений или разделов с разбивкой на страницы, где вы хотите, чтобы пользователь прокручивал страницу до определенной точки.

Для карусели изображений я бы добавил scroll-snap-type: x mandatory; в контейнер прокрутки и scroll-snap-align: center; к каждому изображению. Затем, когда пользователь прокручивает карусель, каждое изображение будет плавно прокручиваться в идеальное положение.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS-привязка прокрутки работает хорошо, даже если цели привязки имеют разные размеры или когда они больше, чем скроллер! Прочтите публикацию «Хорошо контролируемая прокрутка с помощью CSS Scroll Snap», где вы найдете более подробную информацию и примеры, которые вы можете попробовать!

Вырезы для дисплея (они же выемки)

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

Выпускается все больше мобильных устройств с вырезом в дисплее, который иногда называют «выемкой». Чтобы справиться с этим, браузеры добавляют к вашей странице немного дополнительных полей, чтобы содержимое не закрывалось выемкой.

Но что, если вы хотите использовать это пространство?

Теперь вы можете это сделать с помощью переменных среды CSS и метатега viewport-fit . Например, чтобы сообщить браузеру о расширении области выреза дисплея, установите для свойства viewport-fit в метатеге области viewport значение cover .

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Затем вы можете использовать переменные среды CSS safe-area-inset-* для макетирования вашего контента.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

В блоге WebKit есть отличная статья о разработке веб-сайтов для iPhone X. Более подробную информацию можно найти в пояснении .

API веб-замков

API веб-блокировок позволяет асинхронно получить блокировку, удерживать ее во время выполнения работы, а затем снимать ее. Пока блокировка удерживается, ни один другой сценарий в источнике не может получить такую же блокировку, что помогает координировать использование общих ресурсов.

Например, если веб-приложение, работающее на нескольких вкладках, хочет гарантировать, что с сетью синхронизируется только одна вкладка, код синхронизации попытается получить блокировку с именем network_sync_lock .

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Первая вкладка для получения блокировки синхронизирует данные с сетью. Если другая вкладка попытается получить ту же блокировку, она будет поставлена в очередь. Как только блокировка будет снята, следующий запрос в очереди получит блокировку и будет выполнен.

В MDN есть отличный учебник по веб-блокировкам , включающий более подробное объяснение и множество примеров. Или погрузитесь глубже и ознакомьтесь со спецификациями .

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

Это лишь некоторые изменения в Chrome 69 для разработчиков. Конечно, их гораздо больше.

конический градиент

Из спецификации CSS4 теперь вы можете создавать цветовые переходы по окружности круга, используя конические градиенты . У Леи Веру есть полифил CSS conic-gradient() , который вы можете использовать, и на странице есть целая куча действительно интересных образцов, представленных сообществом.
Для элементов появился новый метод toggleAttribute() , который переключает существование атрибута, аналогично classList.toggle() .
Массивы JavaScript получают два новых метода: flat() и flatMap() . Они возвращают новый массив со всеми элементами подмассива, помещенными в него.
А OffscreenCanvas переносит работу из основного потока в рабочий, помогая устранить узкие места в производительности.

пасхальные яйца

Вы нашли все пасхалки в видео?

Особая благодарность всем людям, которые помогли реализовать 28 эпизодов «Нового в Chrome» . Каждый из этих людей потрясающий!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Хотите узнать, как далеко продвинулись «Новые возможности Chrome» со времени нашего первого эпизода? Посмотрите это забавное 30-секундное видео , в котором показана наша история от первого видео до сегодняшнего дня!

И, конечно же, спасибо за просмотр, комментарии и отзывы! Я их все читаю и принимаю ваши предложения близко к сердцу. Благодаря вам эти видео стали лучше!

Спасибо за просмотр!