僅使用幾行 CSS 和 HTML，就能創(chuàng)建交互式的網(wǎng)頁(yè)組件，如工具提示（tooltip）、懸浮卡片（hover card）或彈出框（popover），無(wú)需編寫(xiě) JavaScript 或使用復(fù)雜的布局技巧。

聽(tīng)起來(lái)是不是超棒？

接下來(lái)，我們一起看看它是如何實(shí)現(xiàn)的。

CSS Anchor API 是什么？

CSS Anchor API 提供了一種全新的方式，讓元素可以 根據(jù)特定的錨點(diǎn)（Anchor）進(jìn)行動(dòng)態(tài)定位，而不必再依賴(lài) JavaScript 或復(fù)雜的 CSS 技巧。

在過(guò)去，實(shí)現(xiàn)類(lèi)似的功能通常需要編寫(xiě)大量代碼。例如，我們希望某個(gè) 工具提示始終跟隨按鈕，那么就需要手動(dòng)計(jì)算位置、處理滾動(dòng)問(wèn)題，還要監(jiān)聽(tīng)各種事件。

而 CSS Anchor API 讓這一切變得異常簡(jiǎn)單，只需少量 CSS 代碼就能搞定。

傳統(tǒng)方法：過(guò)去的繁瑣實(shí)現(xiàn)

假設(shè)我們要在按鈕上懸浮時(shí)顯示工具提示，在以前，我們可能會(huì)這樣做：

<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';
});

???? 太復(fù)雜了！ 僅僅是對(duì)齊一個(gè)小小的工具提示，就需要手動(dòng)計(jì)算元素位置、處理滾動(dòng)影響，還要綁定事件監(jiān)聽(tīng)器。

全新方式：CSS Anchor API 一步到位！

有了 CSS Anchor API，我們可以用 更少的代碼 輕松實(shí)現(xiàn)同樣的效果：

<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; /* 在錨點(diǎn)下方偏移 8px */
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

button:hover + [popover] {
  display: block; /* 當(dāng)鼠標(biāo)懸停時(shí)顯示 */
}

圖片

就這樣，完全不需要 JavaScript，僅通過(guò) CSS 就能實(shí)現(xiàn)錨點(diǎn)定位，告別復(fù)雜的手動(dòng)計(jì)算！

核心原理解析

CSS Anchor API 通過(guò)以下幾個(gè)關(guān)鍵屬性來(lái)實(shí)現(xiàn)動(dòng)態(tài)定位：

• position: anchor; —— 讓元素基于指定的錨點(diǎn)進(jìn)行定位。
• anchor-name: tooltip; —— 讓元素和某個(gè)錨點(diǎn)建立關(guān)聯(lián)。
• anchor-offset: 0 8px; —— 定義 水平和垂直方向的偏移量（這里是向下偏移 8px）。

無(wú)論頁(yè)面如何滾動(dòng)，工具提示都能保持正確位置，無(wú)需額外的 JavaScript 邏輯。

CSS Anchor API 支持的關(guān)鍵屬性

以下是 CSS Anchor API 提供的主要功能：

CSS Anchor API 的優(yōu)勢(shì)

1?? 極簡(jiǎn)代碼 —— 只需幾行 CSS，就能完成過(guò)去需要幾十行 JavaScript 才能實(shí)現(xiàn)的功能。

2?? 更高性能 —— 讓瀏覽器 原生 計(jì)算布局，減少 JavaScript 開(kāi)銷(xiāo)，提高頁(yè)面流暢度。

3?? 更易維護(hù) —— 代碼更加簡(jiǎn)潔，不需要手動(dòng)管理 getBoundingClientRect() 或監(jiān)聽(tīng)滾動(dòng)事件。

4?? 瀏覽器原生支持 —— 讓 UI 更穩(wěn)定，不容易受到不同設(shè)備或?yàn)g覽器行為差異的影響。

更多實(shí)戰(zhàn)案例：帶交互的 Popover 菜單

Anchor API 也能用于更復(fù)雜的場(chǎng)景，比如 彈出菜單：

<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;
}

圖片

這樣，一個(gè) 完全基于 CSS 的交互式 Popover 就完成了！??

瀏覽器支持情況

目前，Chrome、Edge 和 Opera 已支持 CSS Anchor API，而 Firefox 和 Safari 仍在落后。對(duì)于 Apple 設(shè)備的開(kāi)發(fā)者來(lái)說(shuō)，可能需要等待 Safari 未來(lái)的更新。

image.png

為什么 CSS Anchor API 是 Web 開(kāi)發(fā)的一次革命？

在 Web 開(kāi)發(fā)中，越簡(jiǎn)單的實(shí)現(xiàn)方式往往意味著更高的開(kāi)發(fā)效率。

CSS Anchor API 讓動(dòng)態(tài)定位變得前所未有的簡(jiǎn)單，不僅讓代碼更加精簡(jiǎn)，還能確保交互組件在各種設(shè)備上保持一致的表現(xiàn)。

以后再需要實(shí)現(xiàn)工具提示、彈出框、懸浮卡片時(shí)，一定要試試 CSS Anchor API！