Chrome 74 版新功能

Pete LePage

在 Chrome 74 版中，我們新增了：

還有更多！

我是 Pete LePage，讓我們深入瞭解 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() {
    ...
  }
}

如要進一步瞭解公開和私人課程，請參閱 Mathias 的課程欄位文章。

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;
  }
}

請參閱 Tom 的文章「Move Ya!或者，如果使用者偏好減少動畫效果，請不要這樣做！詳情請參閱

CSS transition 事件

CSS 轉場效果規格規定，在轉場效果排入佇列、開始、結束或取消時，系統會傳送轉場事件。其他瀏覽器已支援這些事件一段時間了…

但目前 Chrome 尚不支援這類功能。您現在可以透過 Chrome 74 版收聽

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

透過監聽這些事件，您可以在執行轉場時追蹤或變更行為。

功能政策 API 更新

功能政策可讓您選擇性地啟用、停用及修改 API 和其他網頁功能的行為。您可以透過 Feature-Policy 標頭或 iframe 上的 allow 屬性完成這項設定。

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 大會將在幾週後 (5 月 7 日至 9 日) 結束，我們將為您推出許多實用新功能。如果你無法參與，所有會議都會進行直播，並在之後發布至 Chrome 開發人員 YouTube 頻道。

訂閱

如要隨時掌握最新影片，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，Chrome 75 版一推出，我就會馬上在這裡告訴你 Chrome 的新功能！