以下是一些注意事項：
- 容器查詢和 :has() 是回應式天線中的相符項目。
- 新版 Sanitizer API 提供任意字串的強大處理器，可減少跨網站指令碼攻擊的安全漏洞。
- 我們採取進一步的措施來淘汰 Web SQL。
- 還有更多應用程式。
我是 Pete LePage。我們來深入說明 瞭解 Chrome 105 為開發人員提供了哪些新功能
容器查詢和 :has() CSS 屬性
容器查詢，這是眾所期待的功能之一，就是在 Chrome 105 版中。如此一來，開發人員就能查詢父項選取器中的大小和樣式資訊，這樣無論子項元素位於網頁上的哪個位置，都能擁有其回應式樣式邏輯。
這與 @media 查詢類似，差別在於前者會依據容器的大小 (而非可視區域大小) 進行評估。
如要使用容器查詢，您必須在父項元素上設定隔離。舉例來說，您可能有一個包含圖片和文字的資訊卡。
如要建立容器查詢，請在卡片容器上設定 container-type。將 container-type 設為 inline-size 會查詢父項的 inline-direction 大小。
.card-container {
container-type: inline-size;
}
現在，我們可以使用該容器，使用 @container 將樣式套用至其任何子項。
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
在這種情況下，當容器小於 400 像素時，會切換為單欄版面配置。
CSS :has() 虛擬類別
我們可進一步使用 CSS :has() 虛擬類別。可讓您檢查父項元素是否包含具有特定參數的子項。
例如，p:has(span) 表示包含跨距的段落選取器。您可以使用這個範圍設定父項段落本身或其中任何內容的樣式。或者，您也可以使用 figure:has(figcaption) 設定包含說明文字的圖形元素樣式。
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
請參閱 Una 的文章 @container 和 :has(): 兩個功能強大的全新回應式 API，以取得更詳細的說明和一些有趣的示範。
Sanitizer API
大多數網頁應用程式經常處理不受信任的字串，但安全轉譯內容並不容易。如果未做好充分的準備，就很容易不小心創造出跨網站指令碼安全漏洞的機會。
DomPurify 等程式庫可提供協助，但會增加小額的維護負擔。HTML Sanitizer API 能將清理作業建構到平台中，協助減少跨網站指令碼攻擊安全漏洞的數量。
如要使用，請建立新的 Sanitizer 執行個體。接著，在您要插入淨化內容的元素上呼叫 setHTML()。
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
Sanitizer API 的設計宗旨是維持安全性並可供自訂，讓您指定不同的設定選項，例如放置特定元素或允許其他元素。
const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
詳情請參閱「使用 Sanitizer API 進行 Safe DOM 操控」。
淘汰不安全環境的 Web SQL
我們先前曾宣布要淘汰 Web SQL 的計畫，自 Chrome 105 版起，網路 SQL 將淘汰在不安全的環境下。
如果您是在不安全的環境中使用 Web SQL，請盡快遷移至 IndexDB 或其他本機儲存空間容器。
還有更多獎品等著您！
當然還有許多其他東西。
- 您現在可在電腦和行動裝置上更新網頁應用程式資訊清單，更新已安裝 PWA 的名稱。
- 多螢幕視窗刊登位置 API 可取得準確的畫面名稱標籤。
- 視窗控制項疊加層 API 現已推出。只要將現有的完整寬度標題列替換成小型重疊標題列，PWA 就能提供更貼近應用程式的使用體驗。這可讓您在標題列區域放置自訂內容。
其他資訊
這僅涵蓋部分重點功能。如要瞭解 Chrome 105 的其他變更，請點選下方連結。
- Chrome 開發人員工具新功能 (105)
- Chrome 105 淘汰和移除內容
- 適用於 Chrome 105 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。
我是 Pete LePage，只要 Chrome 106 推出，我們就會立即 與您分享 Chrome 的新功能！