Новое в Chrome 74

Пит ЛеПейдж

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

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

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

Журнал изменений

Здесь рассмотрены лишь некоторые из основных моментов. Дополнительные изменения в Chrome 74 можно найти по ссылкам ниже.

Частные поля класса

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

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

И я сказал, что поля приватного класса находятся в разработке. Я рад сообщить, что поля приватного класса появились в Chrome 74. Новый синтаксис приватных полей похож на синтаксис публичных полей, за исключением того, что вы отмечаете поле как приватное с помощью # (знака решетки). Думайте о # как о части имени поля.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

Помните, что private поля — это именно приватные поля . Они доступны внутри класса, но не доступны за пределами тела класса.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

Чтобы узнать больше о публичных и частных классах, ознакомьтесь с публикацией Матиаса о полях классов .

prefers-reduced-motion

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

Chrome теперь предоставляет медиа-запрос prefers-reduced-motion — часть спецификации Media Queries Level 5 , которая позволяет определить, включена ли эта опция. 


@media (prefers-reduced-motion: reduce)

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

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Подробнее читайте в статье Тома Move Ya! Или, может быть, не стоит, если пользователь предпочитает меньше движения!

События transition CSS

Спецификация CSS Transitions требует, чтобы события перехода отправлялись, когда переход ставится в очередь, начинается, заканчивается или отменяется. Эти события уже некоторое время поддерживаются в других браузерах…

Но до сих пор они не поддерживались в Chrome. В Chrome 74 теперь можно слушать:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Отслеживая эти события, можно отслеживать или изменять поведение при выполнении перехода.

Обновления API политики функций

Политики функций позволяют выборочно включать, отключать и изменять поведение API и других веб-функций. Это делается либо через заголовок Feature-Policy, либо через атрибут allow в iframe.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 представляет новый набор API для проверки того, какие функции включены:

  • Список разрешенных функций можно получить с помощью document.featurePolicy.allowedFeatures() .
  • Проверить, разрешена ли определенная функция, можно с помощью document.featurePolicy.allowsFeature(...) .
  • А с помощью document.featurePolicy.getAllowlistForFeature() можно получить список доменов, используемых на текущей странице, которые разрешают указанную функцию.

Более подробную информацию можно найти в статье «Введение в политику использования функций» .

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

Это лишь некоторые из изменений в Chrome 74 для разработчиков, конечно, есть еще много других. Лично я очень рад KV Storage , супербыстрому, асинхронному, ключ/значение сервису хранения, доступному в качестве пробной версии origin.

Google I/O состоится уже скоро!

И не забывайте - Google I/O всего через несколько недель (с 7 по 9 мая), и у нас будет много нового и интересного для вас. Если вы не сможете присутствовать, все сессии будут транслироваться в прямом эфире и будут доступны на нашем канале Chrome Developers YouTube после этого.

Подписаться

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

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