Новое в Chrome 69

Пит ЛеПейдж

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

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

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

И это еще не все !

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

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

CSS-прокрутка Snap

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 Scroll Snap работает отлично, даже если цели привязки имеют разные размеры или больше, чем сам скроллер! Подробнее об этом и примерах можно узнать в статье «Управляемая прокрутка с помощью 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 Web Locks позволяет асинхронно устанавливать блокировку, удерживать её во время выполнения работы, а затем снимать. Пока блокировка удерживается, никакой другой скрипт в исходном коде не может установить ту же блокировку, что помогает координировать использование общих ресурсов.

Например, если веб-приложение, работающее на нескольких вкладках, хочет убедиться, что только одна вкладка синхронизируется с сетью, код синхронизации попытается получить блокировку с именем 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 есть отличный учебник по Web Locks с более подробным объяснением и множеством примеров. Или изучите подробнее и ознакомьтесь со спецификацией .

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

Это лишь некоторые из изменений в 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-секундное видео , которое прослеживает историю проекта с самого первого видео до сегодняшнего дня!

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

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

Новые ошибки в Chrome

Мы подготовили для вас забавную подборку неудачных моментов! Посмотрев её, я узнал несколько вещей:

  • Когда я спотыкаюсь, я издаю странные звуки.
  • Я корчу рожицы и высовываю язык.
  • Я много ворочаюсь.

Подписаться

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

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