以下是一些注意事項:
我是 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));
}
基本上,共用元素轉換功能會使用 CSS 動畫,因此您可以隨心所欲地從淡出效果開始切換、滑入動畫等。
我才剛刮開表面,歡迎來看看 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 的新功能!