Новое в 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 — сверхбыстрая асинхронная служба хранения ключей и значений, доступная в качестве пробной версии.

Скоро появится Google I/O!

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

Подписаться

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

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