Chrome 104 新功能

Pete LePage

以下是一些注意事項：

• 使用 getDisplayMedia() 擷取目前分頁時，現在可以使用區域擷取功能指定裁剪區域。
• 您可以使用數學比較運算子編寫媒體查詢語法。
• 共用元素轉換會啟動來源試用。
• 還有許多其他功能。

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

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

getDisplayMedia() 可讓您從目前的分頁建立影片串流。不過，有時您可能只需要部分分頁，而非整個分頁。在此之前，要執行這項操作的唯一方法，就是手動裁剪每個影片影格。

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

主要內容區域以藍色標示，跨來源 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 開發人員工具 (104) 的新功能
• Chrome 104 淘汰和移除項目
• Chrome 104 的 ChromeStatus.com 更新
• Chromium 來源存放區變更清單
• Chrome 發布時程表

訂閱

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

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