錨定位置語法變更

CSS 錨點定位功能已在 Chrome 125 推出。這個 API 的首個公開版本引發了對語法的更多討論。在討論後,我們在推出這項功能後做出了一些微幅調整。如果您已嘗試使用 CSS 錨點定位,這篇文章將說明您需要對程式碼或錨點定位內容進行哪些變更。

請注意,有兩個主要的屬性名稱已更改:

  1. inset-area 已重新命名為 position-area。CSS 工作小組偏好這個名稱,因為「position-」這個詞彙有助於您記得這個屬性是套用至定位元素,而非錨點元素。這項變更將從 Chrome 129 開始實施,且 inset-area 將在 Chrome 131 之前支援,讓您有時間更新任何示範或文章。
  2. position-try-options 已重新命名為 position-try-fallbacks。這項重新命名作業可提醒您,這些只是主要位置的備用選項,而主要位置是由基礎樣式決定。這項變更已隨 Chrome 128 推出,position-try-options128 版起便不再運作。建議你使用簡寫字元 (將其變更為 position-try),這項功能適用於 Chrome 125 以上版本,且未變更。

此外,我們也做出了另一項行為變更:

  • inset-area() 函式語法將從 position-try 中移除。因此,請改用 position-try-fallbacks: top 而非 position-try-fallbacks: inset-area(top)。這項異動也將從 Chrome 129 開始實施。

如要進一步瞭解如何使用錨定定位,請參閱以下文章: