以下是一些注意事項：
- 容器查詢和 :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) 表示內含 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 - Web 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 的新功能！