螢幕錄影 2024-12-10 晚上7.17.41.mov

各位前端的好朋友們！我今天發現了一個超級驚人的新功能，我簡直不敢相信我的眼睛 —— CSS3 現在內建 Popover 支援了！沒錯，你沒看錯，我們終於可以擺脫那些冗長的 JavaScript 程式碼了！

這是什麼神仙功能？！

還記得以前要寫一個 Popover 有多麻煩嗎？要處理點擊事件、控制顯示隱藏、計算位置、處理動畫...光想到就頭痛。但現在，只要幾行 HTML 和 CSS 就搞定了！來看看這個超簡單的寫法：


<div id="popover" popover>
  <div class="popover-content">
    <h3>Welcome!</h3>
    <p>這是個超級簡單的 Popover！</p>
  </div>
</div>
<button popovertarget="popover">打開 Popover</button>

看到了嗎？只要加個 popover 屬性和 popovertarget，Popover 就實現了！完全不需要寫 JavaScript！這簡直是在跟我開玩笑吧？！

等等，重點是這樣還能加動畫！

但這還不是最神奇的！你看看這個動畫效果：


[popover]:popover-open {
  translate: 0 -8rem;
  opacity: 1;
  transform: scale(1);
  transition:
    translate 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

不敢相信吧？一個平滑的彈出動畫就這樣完成了！以前要寫這種效果，不知道要糾結多久的 JavaScript 邏輯，現在就...這樣？

驚喜還不止這些！

  1. 鍵盤支援開箱即用

  2. 樣式自由度超高 想要什麼風格就套什麼風格，完全不受限！

    
[popover] {
  width: 300px;
  border-radius: 12px;
  border: 2px solid #ff69b4;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

  3. 還有動畫初始狀態！ 這個 @starting-style 也太貼心了吧！

    
@starting-style {
  [popover]:popover-open {
    translate: 0 2rem;
    opacity: 0;
    transform: scale(0.95);
  }
}

瀏覽器支援度最新情況

根據官方資料，目前支援度如下：