Chrome 93 版的新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage，我在家工作並拍攝影片，現在就讓我們一起來看看 Chrome 93 有哪些新功能吧！

CSS 模組指令碼

您現在可以使用 import 陳述式載入 CSS 樣式表單，就像 JavaScript 模組一樣。接著，您可以以可建構的樣式表相同方式，將樣式表套用至文件或陰影根目錄。

新的 CSS 模組指令碼功能非常適合自訂元素。與從 JavaScript 套用 CSS 的其他方法不同，您不需要建立元素，也不必處理 CSS 文字的 JavaScript 字串。

如要使用此方法，請使用 assert {type: 'css'} 匯入樣式表單，然後呼叫 adoptedStyleSheets，將其套用至 document 或 shadowRoot。

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

但請注意，如果您未加上 assert，系統會將檔案視為 JavaScript，因此檔案無法運作！

如需完整詳細資料，請參閱 web.dev 上的「使用 CSS 模組指令碼匯入樣式表」。

Multi-Screen Window Placement API

對於某些應用程式而言，開啟新視窗並將其放在特定位置或特定顯示畫面中是一項重要功能。舉例來說，使用 Google 簡報進行簡報時，我希望投影片在主要螢幕上以全螢幕顯示，而講者筆記則顯示在另一個螢幕上。

多螢幕視窗放置位置 API 可列舉連接至使用者電腦的螢幕，並在特定螢幕上放置視窗。這是第二次進行來源試驗，我們已根據您的意見回饋進行多項調整。

您可以快速檢查裝置是否連結了多個螢幕：

const isExtended = window.screen.isExtended;
// returns true/false

不過，主要功能位於 window.getScreens() 中，可提供連接螢幕的所有詳細資料。

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

舉例來說，您可以判斷主要畫面，然後使用 requestFullscreen() 在該畫面上顯示元素。

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

並提供一種方式來監聽變更，例如新螢幕是否已插入或移除。

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

如需進一步瞭解，請參閱 web.dev 上的 Tom 文章「Managing several displays with the Multi-Screen Window Placement API」。

縮短發布週期

我們在 3 月宣布縮短發布週期，並每四週推出新版 Chrome。

時機已到，我們將在 9 月 21 日發布 Chrome 94。您可以在 Chrome 日曆中查看各個版本的預計發布日期。

新的 PWA 功能

如果你正在建構漸進式網頁應用程式，有兩個新的來源試用功能值得你查看。

PWA 的網址處理常式

如果您已安裝 PWA，並點選該 PWA 的連結，您可能會希望在 PWA 中開啟連結，而不是在瀏覽器分頁中開啟。

在網頁應用程式資訊清單中指定 url_handlers，並在 .well-known/ 目錄中新增 web-app-origin-association 檔案，即可告知瀏覽器，如果使用者點選 PWA 連結，應在已安裝的 PWA 中開啟。

manifest.json 檔案中的 url_handlers 範例：

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association 範例檔案：

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

只要進行額外驗證，您甚至可以讓 PWA 處理您擁有的其他來源連結。

如要瞭解來源試驗的所有詳細資訊，請參閱 web.dev 上的「以 PWA 做為網址處理程序」。

視窗控制項重疊

視窗控制項疊加層會擴展用戶端區域，以涵蓋整個視窗，包括標題列和視窗控制項按鈕，例如關閉、最大化和最小化按鈕。

您可以使用這項功能，讓已安裝的 PWA 看起來更像其他已安裝的應用程式。

如要進一步瞭解原點試用功能，請參閱「自訂 PWA 標題列的視窗控制項重疊顯示效果」。

PWA 高峰會

PWA 高峰會即將於 10 月登場。這是一場免費的線上研討會，旨在協助所有人成功使用漸進式網頁應用程式。PWA 峰會是 Google、Intel、Microsoft 和 Samsung 等幾家參與 PWA 技術開發的不同公司之間的合作活動。

這裡有許多精彩的演講和內容。如要瞭解詳情及報名參加，請前往 PWASummit.org。

還有更多獎品等著您！

當然，還有許多其他功能。

  • Flexbox 和 Flexbox 項目已新增對齊關鍵字的支援：start、end、self-start、self-end、left 和 right。
  • 非同步剪貼簿 API 現已支援 SVG 檔案。
  • 設定 meta theme-color 時，系統會採用 media 屬性，因此您可以為淺色和深色模式指定不同的主題顏色。
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 93 中的其他變更。

訂閱

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

我是 Pete LePage，Chrome 94 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！