CSS Anchor API 解決了一個困擾前端開發的難題
僅使用幾行 CSS 和 HTML，就能創建交互式的網頁組件，如工具提示（tooltip）、懸浮卡片（hover card）或彈出框（popover），無需編寫 JavaScript 或使用復雜的布局技巧。
聽起來是不是超棒？
接下來，我們一起看看它是如何實現的。
CSS Anchor API 是什么？
CSS Anchor API 提供了一種全新的方式，讓元素可以 根據特定的錨點（Anchor）進行動態定位，而不必再依賴 JavaScript 或復雜的 CSS 技巧。
在過去，實現類似的功能通常需要編寫大量代碼。例如，我們希望某個 工具提示始終跟隨按鈕，那么就需要手動計算位置、處理滾動問題，還要監聽各種事件。
而 CSS Anchor API 讓這一切變得異常簡單，只需少量 CSS 代碼就能搞定。
傳統方法：過去的繁瑣實現
假設我們要在按鈕上懸浮時顯示工具提示，在以前，我們可能會這樣做：
<button id="myButton">Hover me</button>
<div id="tooltip">I’m a tooltip!</div>#tooltip {
display: none;
position: absolute;
background: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}const button = document.getElementById('myButton');
const tooltip = document.getElementById('tooltip');
button.addEventListener('mouseover', () => {
const rect = button.getBoundingClientRect();
tooltip.style.display = 'block';
tooltip.style.top = `${rect.bottom + window.scrollY}px`;
tooltip.style.left = `${rect.left + window.scrollX}px`;
});
button.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
});???? 太復雜了！ 僅僅是對齊一個小小的工具提示，就需要手動計算元素位置、處理滾動影響，還要綁定事件監聽器。
全新方式：CSS Anchor API 一步到位！
有了 CSS Anchor API，我們可以用 更少的代碼 輕松實現同樣的效果：
<button popover-anchor="tooltip">Hover me</button>
<div popover id="tooltip">I’m a tooltip!</div>[popover-anchor] {
position: relative;
}
[popover] {
position: anchor;
anchor-name: tooltip;
anchor-offset: 0 8px; /* 在錨點下方偏移 8px */
background: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
button:hover + [popover] {
display: block; /* 當鼠標懸停時顯示 */
}
圖片
就這樣，完全不需要 JavaScript，僅通過 CSS 就能實現錨點定位，告別復雜的手動計算！
核心原理解析
CSS Anchor API 通過以下幾個關鍵屬性來實現動態定位：
- position: anchor; —— 讓元素基于指定的錨點進行定位。
- anchor-name: tooltip; —— 讓元素和某個錨點建立關聯。
- anchor-offset: 0 8px; —— 定義 水平和垂直方向的偏移量（這里是向下偏移 8px）。
無論頁面如何滾動，工具提示都能保持正確位置，無需額外的 JavaScript 邏輯。
CSS Anchor API 支持的關鍵屬性
以下是 CSS Anchor API 提供的主要功能：
屬性 | 作用 |
| 指定當前元素的錨點名稱。 |
| 確定應該對齊到錨點的哪個部分（如頂部、底部、左側、右側）。 |
| 定義 允許擺放元素 的區域。 |
| 設置 如果首選位置不可用（如空間不足）時的備用對齊方式。 |
| 設定備用對齊方式的嘗試順序。 |
| 結合了 |
| 控制當元素無法放置在期望位置時，它是否應該保持可見。 |
CSS Anchor API 的優勢
1?? 極簡代碼 —— 只需幾行 CSS，就能完成過去需要幾十行 JavaScript 才能實現的功能。
2?? 更高性能 —— 讓瀏覽器 原生 計算布局，減少 JavaScript 開銷，提高頁面流暢度。
3?? 更易維護 —— 代碼更加簡潔，不需要手動管理 getBoundingClientRect() 或監聽滾動事件。
4?? 瀏覽器原生支持 —— 讓 UI 更穩定，不容易受到不同設備或瀏覽器行為差異的影響。
更多實戰案例：帶交互的 Popover 菜單
Anchor API 也能用于更復雜的場景，比如 彈出菜單：
<button popover-anchor="popoverMenu">Click me</button>
<div popover id="popoverMenu">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>[popover-anchor] {
position: relative;
}
[popover] {
position: anchor;
anchor-name: popoverMenu;
anchor-offset: 0 12px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 10px;
}
button:hover + [popover] {
display: block;
}
圖片
這樣，一個 完全基于 CSS 的交互式 Popover 就完成了！??
瀏覽器支持情況
目前，Chrome、Edge 和 Opera 已支持 CSS Anchor API，而 Firefox 和 Safari 仍在落后。對于 Apple 設備的開發者來說，可能需要等待 Safari 未來的更新。
image.png
為什么 CSS Anchor API 是 Web 開發的一次革命？
在 Web 開發中，越簡單的實現方式往往意味著更高的開發效率。
CSS Anchor API 讓動態定位變得前所未有的簡單，不僅讓代碼更加精簡，還能確保交互組件在各種設備上保持一致的表現。
以后再需要實現工具提示、彈出框、懸浮卡片時，一定要試試 CSS Anchor API！
