Chrome 104 新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage，讓我們深入瞭解 Chrome 104 版為開發人員提供的新功能。

使用區域擷取功能指定裁剪區域

getDisplayMedia() 可讓您從目前的分頁建立影片串流。不過，有時您可能只需要部分分頁，而非整個分頁。到目前為止，您只能手動裁剪每個影片影格。

透過區域擷取功能，網頁應用程式可定義要分享的畫面特定區域。舉例來說，Google 簡報可讓您停留在標準編輯檢視畫面，並分享目前的簡報。

瀏覽器視窗螢幕截圖，顯示網頁應用程式醒目顯示主要內容區域和跨來源 iframe。
主要內容區域以藍色標示，跨來源 iframe 則以紅色標示。

如要使用它，請選取要共用的元素，然後根據該元素建立新的 CropTarget。接著，請呼叫 getDisplayMedia() 來啟動螢幕分享功能。系統會提示使用者授予分享螢幕畫面的權限。接著，呼叫 track.cropTo() 並傳遞先前建立的 cropTarget。

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

詳情請參閱「透過區域擷取功能，更輕鬆地分享分頁」。

使用第 4 級語法和評估功能，簡化媒體查詢

媒體查詢對回應式設計至關重要，可讓您為不同可視區域大小定義特定樣式。不過，除非您每天都使用這些語法，否則可能會感到有些混淆。

Chrome 104 新增了對Media Queries - Level 4 - Syntax and Evaluation的支援，讓您可以使用一般數學比較運算子編寫媒體查詢。

因此，請改用以下方式指出可視區域介於 400 和 600 像素之間：

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

可以寫成以下形式：

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

除了讓媒體查詢更精簡之外，新語法也更準確。min- 和 max- 查詢皆涵蓋在內，例如：min-width: 400px 測試寬度為 400 像素以上。新的語法可讓您更加明確地瞭解自己的意思。

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

這個功能已在 Firefox 中支援，而 PostCSS 外掛程式能將新語法改寫為舊語法，確保瀏覽器相容性！

詳情請參閱 Rachel 的「Chrome 104 版範圍媒體查詢適用的新語法」一文。

共用元素轉換功能開始新的來源試用

特定平台的應用程式通常會在不同檢視畫面之間提供流暢的轉場效果，不僅外觀精美，還能讓使用者保持在情境中，並提供更優異的體驗。在網路上，完整的導覽可能會造成不佳的使用體驗，有時還會導致畫面短暫空白。對於單頁應用程式來說，這可能會更好，但轉場效果仍不理想。

共用元素轉場功能可在 Chrome 104 中啟動新的來源試用，讓您提供流暢的轉場效果，無論轉場是跨文件 (例如在多頁應用程式中) 或單一文件內 (例如在單頁應用程式中) 皆可。

以下是單頁應用程式轉場效果運作方式的簡略範例。在導覽函式中，取得新頁面內容，然後檢查是否支援轉場效果。如果不支援，請更新頁面，但不使用轉場效果。如果是，請建立 transition() 並呼叫 start()，讓 API 知道 DOM 變更完成的時間。

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

實際上，共用元素轉場效果會使用 CSS 動畫，因此您可以改用淡入效果、滑入效果或其他效果。

我只是略微介紹這個主題，請觀看 Jake 的影片「將網頁轉場效果帶入網路」，或是深入瞭解說明影片。

還有更多獎品等著您！

當然，還有更多功能。

  • 當 Cookie 使用明確的 Expires 或 Max-Age 屬性設定時，其值現在會設為最多 400 天。
  • 多螢幕 Window Placement API 已進行強化。
  • overflow-clip-margin CSS 屬性則可指定元素內容在被裁剪之前，可繪製的距離。

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 104 的其他異動。

訂閱

歡迎訂閱 Chrome Developers YouTube 頻道，即時掌握最新消息，每當我們推出新影片時，您都會收到電子郵件通知。

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