Chrome 104 新功能

Pete LePage

以下是一些注意事項：

• 您現在可以使用 getDisplayMedia() 擷取目前的分頁時，使用區域擷取指定裁剪區域。
• 媒體查詢語法可以使用數學比較運算子編寫。
• 共用元素轉換會開始來源試用。
• 還有更多應用程式。

我是 Pete LePage。我們來深入說明 瞭解 Chrome 104 開發人員推出的新功能

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

getDisplayMedia() 可讓您從目前的分頁建立影片串流。不過，有時您不想整個分頁，就只有一小部分。目前只能以手動方式裁剪每個影片畫面。

有了區域擷取功能，網頁應用程式可以定義想要分享的特定畫面區域。舉例來說，Google 簡報可讓您保持在標準編輯檢視畫面，並共用目前的投影片。

如要使用此元素，請選取要共用的元素，然後根據該元素建立新的 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 開始支援媒體查詢 - 第 4 級 - 語法與評估，可讓您使用一般的數學比較運算子來編寫媒體查詢。

因此，請不要採用以下方式來表示可視區域介於 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));
}

我才剛刮開表面，歡迎來看看 Jake 的「將頁面轉換到網頁」或深入的說明影片。

還有更多獎品等著您！

當然還有許多其他東西。

• 現在，當 Cookie 設有明確的 Expires 或 Max-Age 屬性時，值上限會限制為 400 天以內。
• 多螢幕視窗刊登位置 API 已推出強化功能。
• 而 overflow-clip-margin CSS 屬性則可指定元素內容在裁剪前可繪製的距離。

其他資訊

這僅涵蓋部分重點功能。如要瞭解 Chrome 104 的其他變更，請點選下方連結。

• Chrome 開發人員工具新功能 (104)
• Chrome 104 淘汰和移除內容
• 適用於 Chrome 104 的 ChromeStatus.com 更新
• Chromium 原始碼存放區變更清單
• Chrome 發布時間表

訂閱

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage。Chrome 105 推出後，我很樂意立即為您說明 Chrome 的新功能！