CSS 錨點定位功能已在 Chrome 125 推出。這個 API 的首個公開版本引發了對語法的更多討論。在討論後,我們在推出這項功能後做出了一些微幅調整。如果您已嘗試使用 CSS 錨點定位,這篇文章將說明您需要對程式碼或錨點定位內容進行哪些變更。
請注意,有兩個主要的屬性名稱已更改:
inset-area
已重新命名為position-area
。CSS 工作小組偏好這個名稱,因為「position-
」這個詞彙有助於您記得這個屬性是套用至定位元素,而非錨點元素。這項變更將從 Chrome 129 開始實施,且inset-area
將在 Chrome 131 之前支援,讓您有時間更新任何示範或文章。position-try-options
已重新命名為position-try-fallbacks
。這項重新命名作業可提醒您,這些只是主要位置的備用選項,而主要位置是由基礎樣式決定。這項變更已隨 Chrome 128 推出,position-try-options
自 128 版起便不再運作。建議你使用簡寫字元 (將其變更為position-try
),這項功能適用於 Chrome 125 以上版本,且未變更。
此外,我們也做出了另一項行為變更:
inset-area()
函式語法將從position-try
中移除。因此,請改用position-try-fallbacks: top
而非position-try-fallbacks: inset-area(top)
。這項異動也將從 Chrome 129 開始實施。
如要進一步瞭解如何使用錨定定位,請參閱以下文章: