Chrome 93 版的新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage，目前在工作及拍攝地點。接下來，我們來深入探索 Chrome 93 開發人員推出的新功能。

CSS 模組指令碼

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

新的 CSS 模組指令碼功能非常適合自訂元素。不同於從 JavaScript 套用 CSS 的其他方式，您完全不需要建立元素或包含 CSS 文字的 JavaScript 字串的 mes。

如要使用，請使用 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 模組指令碼匯入樣式表」。

多螢幕視窗放置 API

對於某些應用程式而言，開啟新視窗並放在特定位置或特定螢幕是非常重要的功能。例如，使用簡報進行簡報時，我想在主螢幕以全螢幕顯示投影片，並在另一個螢幕上顯示我的演講者備忘稿。

多螢幕視窗放置 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;
  }
});

如需進一步資訊，請參閱 Tom.dev 上的「使用多螢幕視窗刊登位置 API 管理多個螢幕」一文。

縮短發布週期

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

時至今日，Chrome 94 將於 9 月 21 日推出。您可以在 Chrome 日曆中查看各版本的預定發布日期。

PWA 新功能

如果您建構的是漸進式網頁應用程式，有兩個新的來源試用值得一探。

PWA 的網址處理常式

如果您已在安裝 PWA 後點選該 PWA 的連結，則可能需要在 PWA 中開啟 PWA，而「而非」瀏覽器分頁。

您可以在網頁應用程式資訊清單中指定 url_handlers，並將 web-app-origin-association 檔案新增至 .well-known/ 目錄，告知瀏覽器當使用者點選 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。
  • async 剪貼簿 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 Developers YouTube 頻道。每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，只要 Chrome 94 已經推出，我就會在這裡為您提供 Chrome 的新功能！