Chrome 127 新功能

以下是一些注意事項:

  • font-size-adjust 有助於提升備用字型的易讀性。
  • 使用者啟用功能現在會在子母畫面文件和開啟工具之間傳播
  • 捲動容器現在預設為可聚焦於鍵盤。
  • 除此之外,你還有更多功能

我是 Adriana Jara一起來深入探索 Chrome 127 為開發人員推出的新功能。

CSS font-size-adjust

如果第一選擇的字型系列無法使用,且其備用字型的顯示值有明顯的不同,網站的易讀性可能會降低。

下圖顯示 Verdana 和 Times 字型的差別,即使文字大小相同。

讀出的文字行:「This text using the verdanafont (14px, which has more than long 小寫英文字母」)以及「這會使用 Times 字型 (14px),在小尺寸空間中難以閱讀」

如果您的網站已改回「時報」字型,會比較不易閱讀。

font-size-adjust CSS 屬性可協助您調整備用字型的字型大小,讓顯示值 (小寫英文字母的高度除以字型大小) 保持一致,確保無論使用何種字型,文字都顯示相似。

在下方圖片中使用 font-size-Adjust 後,即可維持 Verdana 和 Times 字型之間的清晰度。

   font-size-adjust: 0.545;

如果文字行顯示「This text using the verdanafont (14px),它含有相對較大的小寫字母」,「This uses font (14px),中的內容難以閱讀」以及「This text in 14px Times」字型會調整為與 Verdana 字型相同的顯示值,因此兩個字型會將小寫字型標準化

Chrome 中的 font-size-adjust 推出後,這項新工具將成為基準,詳情請參閱 CSS font-size-Adjust 現已支援基準

文件子母畫面:傳播使用者啟用內容

Document Picture-in-Picture API 現在會在文件子母畫面視窗及其開啟器之間傳播使用者啟用內容。

造訪使用者手勢啟動傳播示範,查看系統偵測到使用者啟動動作時,頁面背景顏色的變化。使用者手勢同時在兩個環境中傳播,都會變更兩個視窗的背景。

如此一來,使用者就能在子母畫面視窗中啟用文件,且可在開啟的視窗或反向操作時使用文件。這項變更讓使用者啟用管制的 API 更加符合人體工學,因為子母畫面視窗中的事件處理常式實際上是在開啟器的環境中執行,因此開啟器的情境需要存取使用者手勢。

如要瞭解詳情,請參閱「子母畫面模式中的任何元素,而非只有 <video>」。

鍵盤可聚焦捲動容器。

捲動容器變成可聚焦的捲動容器非常重要,這樣才能讓所有使用者都能更輕鬆地存取捲動器和其中的內容。

從現在開始,捲動器可聚焦且支援程式輔助聚焦。在此變更之前,只有在 Tabindex 已明確設為 0 以上時,捲軸元素才能聚焦在分頁標籤上。

請注意,只有在捲動器沒有可聚焦的子項時,才會發生此行為。舉例來說,如果捲動器已包含按鈕,則分頁焦點會略過捲動器,並直接聚焦在按鈕上。

無障礙功能最佳做法會建議所有功能都必須透過鍵盤使用。根據預設,鍵盤可聚焦的捲動器可讓使用者輕鬆透過依序聚焦的導覽功能存取捲動器。

詳情請參閱「鍵盤可聚焦捲動器

還有更多獎品等著您!

當然,還有許多其他功能

  • 系統現已提供主頁框和相同來源 iframe 中同時顯示相同文件檢視的轉場效果。

  • CSS 內容產生的替代文字現在支援多個引數。

  • DevTools效能面板現在會擷取 WebSocket 訊息事件,並在效能追蹤記錄中顯示。

閱讀完整版本資訊

延伸閱讀

這只涵蓋部分重要亮點。請參閱下列連結: Chrome 127 的其他變更。

訂閱

歡迎訂閱 Chrome Developers YouTube 頻道, 每次推出新影片時,您都會收到電子郵件通知。

Yo soy Adriana Jara 等 Chrome 127 推出後,立即向各位說明 Chrome 的新功能!