5 個你應該現在就用的 CSS 新功能

過去這一年間，CSS 新功能的速度沒有放緩。random() 讓你可以在 CSS 裡使用隨機值，Popover API 讓彈出提示終於不需要 JavaScript，tabular-nums 解決了一個困擾多年的數字顯示問題。這篇文章精選了 5 個你現在就可以用的新功能——不是實驗性功能，是大多數主流瀏覽器已經穩定支援的功能。

---

1. CSS random()：終於可以在 CSS 裡用隨機值

語法

/* random() 函數 */
.item {
  --delay: random(0s, 2s);  /* 0-2 秒之間的隨機延遲 */
  animation-delay: var(--delay);
}

/* random-item()：從列表中隨機選擇 */
.card {
  background: random-item(red, blue, green, yellow);
  /* 每次渲染時隨機一個顏色 */
}

/* random(list) */
.badge {
  border: 2px solid random-item(solid dashed dotted);
}

實際應用

<div class="masonry">
  <div class="card" style="--i: 1">Card 1</div>
  <div class="card" style="--i: 2">Card 2</div>
  <div class="card" style="--i: 3">Card 3</div>
</div>

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  /* 每張卡片的動畫延遲都不一樣 */
  animation-delay: calc(var(--i) * random(0.1s, 0.3s));
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

瀏覽器支援：Chrome 130+、Firefox 132+、Safari 18+。

---

2. backdrop-filter：磨砂玻璃效果的現代寫法

語法

.modal-backdrop {
  /* 背景模糊 */
  backdrop-filter: blur(10px);

  /* 多個濾鏡組合 */
  backdrop-filter: blur(10px) saturate(180%);

  /* 調整亮度 */
  backdrop-filter: brightness(60%) blur(5px);
}

實際應用：磨砂玻璃效果

<div class="app">
  <header class="navbar">
    <h1>My App</h1>
  </header>
  <main>
    <div class="floating-panel">
      <h2>Floating Panel</h2>
      <p>This panel has a frosted glass effect.</p>
    </div>
  </main>
</div>

.app {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.floating-panel {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

與 background: transparent 的比較

/* 過去的方式：簡單的半透明 */
.overlay-old {
  background: rgba(0, 0, 0, 0.5);
}

/* 現代的方式：磨砂玻璃 */
.overlay-new {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 需要前輏 */
}

瀏覽器支援：所有主流瀏覽器都已支援（需要加 -webkit- 前輏的 Safari 除外）。

---

3. font-variant-numeric: tabular-nums：數字不再跳動

問題

當你用 CSS 讓數字變化時，數字會因為不同寬度而跳動：

/* 沒有 tabular-nums */
.price {
  font-variant-numeric: normal; /* 數字 1 比數字 0 窄 */
}

.price::after {
  content: '99'; /* 數字改變時，寬度變化，文字會跳動 */
}

解決方案

.price {
  /* 所有數字使用相同寬度 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1; /* 較舊的瀏覽器 */
}

實際應用：計數器

<div class="counter">
  <div class="digit">0</div>
  <div class="digit">0</div>
  <div class="digit">0</div>
</div>

.digit {
  font-variant-numeric: tabular-nums;
  font-size: 48px;
  font-family: 'JetBrains Mono', monospace;
  /* 計數器改變時，數字不會因為寬度變化而跳動 */
}

實際應用：表格數字對齊

table {
  font-variant-numeric: tabular-nums;
}

td:last-child {
  text-align: right;
  /* 數字欄位的數字會整整齊齊的對齊 */
}

瀏覽器支援：所有主流瀏覽器都已支援。

---

4. Popover API：不需要 JavaScript 的彈出提示

過去的方式

// 過去需要 JavaScript
const button = document.querySelector('button[data-tooltip]');
const tooltip = document.querySelector('#tooltip');

button.addEventListener('mouseenter', () => {
  tooltip.style.display = 'block';
});

button.addEventListener('mouseleave', () => {
  tooltip.style.display = 'none';
});

Popover API 的方式

<button popovertarget="my-tooltip" popovertargetaction="toggle">
  Hover me
</button>

<div id="my-tooltip" popover>
  This is a native tooltip!
</div>

[popover] {
  padding: 12px 16px;
  background: #333;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  /* 預設 margin: auto 自動居中 */
}

[popover]:hover {
  /* Popover 沒有 hover 狀態，因為它是 toggled */
}

實戰：更多功能的 Popover

<button popovertarget="menu" popovertargetaction="toggle" aria-expanded="false">
  Open Menu
</button>

<div id="menu" popover>
  <menu>
    <button>Settings</button>
    <button>Profile</button>
    <hr>
    <button>Log out</button>
  </menu>
</div>

[popover] {
  margin: 0;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[popover]::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

Popover 的優勢

維度	傳統方式	Popover API
JavaScript	需要	不需要
點擊外部關閉	需手動處理	自動
Accessibility	需 ARIA	原生支援
多個同時	需管理	自動只顯示一個

瀏覽器支援：Chrome 130+、Firefox 134+、Safari 17.5+。

---

5. clip-path 摺角效果：現在可以原生實現

過去的方式

過去要做摺角效果，需要用偽元素和背景圖：

/* 過去：使用偽元素模擬摺角 */
.card {
  position: relative;
  background: #4f46e5;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #ffffff transparent transparent;
}

現代的方式：clip-path

.card {
  background: #4f46e5;
  padding: 24px;
  /* 右上角摺角 */
  clip-path: polygon(
    0% 0%,
    calc(100% - 24px) 0%,
    100% 24px,
    100% 100%,
    0% 100%
  );
}

多種摺角

/* 單角：右上 */
.fold-tr {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

/* 單角：左下 */
.fold-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

/* 雙角：右上 + 左下 */
.fold-both {
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 calc(100% - 20px));
}

實際應用

<div class="badge">Sale!</div>
<div class="card">Card with fold</div>

.badge {
  position: absolute;
  top: 16px;
  right: -8px;
  background: #ef4444;
  color: white;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: bold;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

.card {
  position: relative;
  background: white;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

瀏覽器支援：所有主流瀏覽器都已支援。

---

結語：CSS 的能力邊界在不斷擴展

這 5 個功能代表了三個方向：

1. 過去需要 JavaScript 的功能，現在 CSS 可以原生處理：Popover API 是最典型的例子
2. 過去需要 hack 的效果，現在有標準語法：clip-path 摺角、tabular-nums
3. 全新的能力：random() 開闢了 CSS 表達式的新領域

這些功能不是「未來可能會支援」，而是現在就可以用。下次當你想實現某個視覺效果時，先查一下 CSS 是否已經原生支援——你可能會驚訝於 CSS 已經走了多遠。

---

延伸閱讀

• CSS 2026 進化論 — CSS 最新功能總覽
• What’s !important #6 — 最新 CSS 技巧彙整

本文是「2026 CSS 新功能」系列文章之一。