發布日期:2024 年 5 月 10 日
CSS Anchor Positioning API 是網頁開發領域的重大突破,因為它可讓您將元素定位在其他元素 (稱為「錨點」) 的相對位置。這個 API 針對許多介面功能,簡化了複雜的版面配置要求,例如選單和子選單、工具提示、選取、標籤、資訊卡、設定對話方塊等。瀏覽器內建錨點定位功能,您就能不必仰賴第三方程式庫,自行建構分層式使用者介面,開啟無限的創意可能性。
錨點定位功能自 Chrome 第 125 版起開放使用。
核心概念:錨點和定位元素
這個 API 的核心在於錨點與定位元素之間的關係。錨點是使用 anchor-name
屬性指定為參考點的元素。已定位的元素是指使用 position-anchor
屬性或在定位邏輯中明確使用 anchor-name
,相對於錨點放置的元素。
設定錨點
建立錨點很簡單。將 Anchor-name 屬性套用至所選元素,並指派專屬 ID。這個專屬 ID 必須在開頭加上雙連字號,就像 CSS 變數一樣。
.anchor-button {
anchor-name: --anchor-el;
}
指派錨點名稱後,.anchor-button
就會做為錨點,可用於引導其他元素的位置。您可以透過下列任一方式,將此錨點連結至其他元素:
隱式錨點
將錨點連結至其他元素的第一種方法是使用隱含錨點,如以下程式碼範例所示。position-anchor
屬性已新增到要連結至錨點的元素,並以錨點名稱 (本例中為 --anchor-el
) 為值。
.positioned-notice {
position-anchor: --anchor-el;
}
使用隱含錨點關係時,您可以使用 anchor()
函式定位元素,而不需要在第一個引數中明確指定錨點名稱。
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
明確錨點
或者,您也可以直接在錨點函式 (例如 top: anchor(--anchor-el bottom
) 中使用錨點名稱。這稱為明確錨點,如果您想將錨點設為多個元素,這會很方便 (請繼續閱讀,瞭解範例)。
.positioned-notice {
top: anchor(--anchor-el bottom);
}
將元素定位在錨點的相對位置
錨點定位功能建立於 CSS 絕對定位功能。如要使用定位值,您必須在已定位的元素中加入 position: absolute
。接著,使用 anchor()
函式套用定位值。舉例來說,如要將錨定元素置於錨定元素的左上方,請使用下列定位方式:
.positioned-notice {
position-anchor: --anchor-el;
/* absolutely position the positioned element */
position: absolute;
/* position the right of the positioned element at the right edge of the anchor */
right: anchor(right);
/* position the bottom of the positioned element at the top edge of the anchor */
bottom: anchor(top);
}
現在,您有一個元素錨定在另一個元素,如下圖所示。
如要為這些值使用邏輯位置,對應的值如下:
top
=inset-block-start
left
=inset-inline-start
bottom
=inset-block-end
right
=inset-inline-end
使用 anchor-center
將已定位的元素置中
為了讓您更輕鬆地將錨點定位元素置中,我們新增了 anchor-center
值,可搭配 justify-self
、align-self
、justify-items
和 align-items
屬性使用。
這個範例會修改先前的範例,使用 justify-self: anchor-center
將定位元素置中,並放在錨點上方。
.positioned-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of positioned elem at top of anchor */
bottom: anchor(top);
/* Center justification to the anchor */
justify-self: anchor-center;
}
多個錨定標記
元素可與多個錨點共用。也就是說,您可能需要設定相對於多個錨點的定位值。方法是使用 anchor()
函式,並在第一個引數中明確指出要參照哪個錨點。在以下範例中,定位元素的左上角會錨定在一個錨點的右下方,而位置元素的右下角會錨定在第二個錨點的左上角:
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
顯示位置:inset-area
除了從絕對位置設定的預設方向位置之外,錨定 API 中還提供名為插邊區域的預設版面配置機制。
插邊區域可讓您輕鬆將定位元素 (相對於個別錨點) 放置,並適用於 9 儲存格方格,且中央有錨點元素。
各種可能的內區域定位選項,顯示於 9 儲存格的格線
如要使用內嵌區域而非絕對定位,請使用 inset-area
屬性,並搭配實體或邏輯值。例如:
- 正上方:
inset-area: top
或inset-area: block-start
- 左側置中:
inset-area: left
或inset-area: inline-start
- 正下方:
inset-area: bottom
或inset-area: block-end
- 右中:
inset-area: right
或inset-area: inline-end
使用 anchor-size()
調整元素的大小
anchor-size()
函數也是錨點定位 API 的一部分,可用於根據錨點的大小 (寬度、高度或內嵌和區塊大小) 調整或定位錨點定位元素。
以下 CSS 範例說明如何使用這個屬性設定高度,在 calc()
函式中使用 anchor-size(height)
,將工具提示的最大高度設為錨點高度的兩倍。
.positioned-notice {
position-anchor: --question-mark;
/* set max height of the tooltip to 2x height of the anchor */
max-height: calc(anchor-size(height) * 2);
}
使用錨點與頂層元素 (例如彈出式視窗和對話方塊)
錨點定位功能與 popover
等頂層元素搭配使用時,效果非常出色。和<dialog>
。雖然這些元素會放置在與 DOM 子樹其他部分不同的圖層,但錨點定位可讓您將這些元素連結回去,並與不在頂層的元素一起捲動。這對分層介面來說是一大勝利。
在以下範例中,一組工具提示彈出式視窗會透過按鈕觸發開啟。按鈕是錨點,工具提示則是定位元素。您可以像其他錨定元素一樣,設定位置元素的樣式。在這個具體範例中,anchor-name
和 position-anchor
是按鈕和工具提示中的內嵌樣式。每個錨點都需要一個不重複的錨點名稱,因此在產生動態內容時,內嵌是最簡單的方法。
使用 @position-try
調整錨點位置
設定初始錨點位置後,如果錨點到達所含區塊的邊緣,您可能需要調整位置。如要建立替代的錨點位置,您可以使用 @position-try
指令和 position-try-options
屬性。
在以下範例中,子選單會顯示在選單的右側。選單和子選單是使用錨點定位 API 的絕佳用途,因為這類選單通常會錨定在觸發按鈕上。彈出式屬性
如果這個子選單的水平空間不足,您可以改為將其移至選單下方。如要執行這項操作,請先設定初始位置:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
接著,使用 @position-try
設定備用錨定位置:
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
最後,請使用 position-try-options
連結這兩個元素。總結來說,這會是這樣的樣貌:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
*/ connect with position-try options */
position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
自動翻轉錨定位置關鍵字
如果您需要進行基本調整,例如從上到下或從左到右翻轉 (或兩者皆是),甚至可以略過建立自訂 @position-try
宣告的步驟,並使用瀏覽器內建的翻轉關鍵字,例如 flip-block
和 flip-inline
。下列是自訂 @position-try
宣告的獨立功能,可與彼此搭配使用:
position-try-options: flip-block, flip-inline, flip-block flip-inline;
翻轉關鍵字可以大幅簡化錨定程式碼。只要幾行程式碼,您就能建立可替換位置的完整功能錨點:
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-options: flip-block;
}
position-visibility
:用於子捲軸中的錨點
在某些情況下,您可能需要在頁面子捲軸中固定元素。在這些情況下,您可以使用 position-visibility
控制錨定標記的顯示設定。錨定廣告會在何時留在檢視畫面中?何時會消失?您可以透過這項功能控管這些選項。如要讓定位元素在錨點離開畫面之前保持在畫面中,請使用 position-visibility: anchors-visible
:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
或者,您也可以使用 position-visibility: no-overflow
避免錨點溢出容器。
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
特徵偵測和多元填充
由於目前瀏覽器支援的功能有限,建議您在使用這個 API 時多加留意。首先,您可以使用 @supports
功能查詢,直接在 CSS 中檢查支援情形。方法是以下列方式納入錨定樣式:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
此外,您也可以使用 Oddbird 提供的 CSS 錨點定位 polyfill,為錨點定位功能提供 polyfill,這項功能適用於 Firefox 54、Chrome 51、Edge 79 和 Safari 10。這個 polyfill 支援大多數的基本錨點位置功能,但目前的實作方式尚未完成,且包含一些過時的語法。您可以使用 unpkg 連結,也可以直接在套件管理員中匯入。
無障礙設計注意事項
雖然錨點定位 API 可讓元素相對於其他元素定位,但它本身並不會在元素之間建立任何有意義的語意關係。如果錨定元素和已定位元素之間確實具有語意關係 (例如位置元素是關於錨定文字的側欄註解),其中一個方法就是使用 aria-details
從錨點元素指向位置元素。螢幕閱讀器軟體仍在學習如何處理 aria-details,但支援功能正在改善中。
<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
anchor-name: --anchor;
}
.positioned {
position: fixed;
position-anchor: --anchor;
}
如果您使用錨點定位搭配 popover
屬性或 <dialog>
元素,瀏覽器會處理焦點導覽修正,以便提供適當的無障礙功能,因此您不需要依 DOM 順序顯示彈出式視窗或對話方塊。請參閱規格中的無障礙功能附註,進一步瞭解相關資訊。
結論
這是一項全新功能,我們很期待看到您使用這項功能打造的成果。到目前為止,我們已看到社群使用者提出一些非常實用的用途,例如圖表中的動態標籤、連接線、附註和視覺交叉參照。在你嘗試使用錨點位置時,歡迎提供意見回饋,如果發現任何錯誤,也請告訴我們。