CSSCSS TricksWhat's !importantDeclarativedialog2026

What's !important #6：最新 CSS 技巧彙整

What's !important #6 完整教學！Declarative dialog、@keyframes 字串命名、border-shape、:heading 偽類、Style Queries 攻略。2026 年工程師必看的 CSS 新功能指南！

· 5 分鐘閱讀
📋 目錄

CSS 的發展速度在 2026 年並沒有放緩。每個月都有新的語法、新的 API、新的技巧進入瀏覽器。問題不是「CSS 能不能做到」，而是「有哪些你不知道的 CSS 新功能」。CSS-Tricks 的 !important 系列持續追蹤這些最新進展，這一期涵蓋了 Declarative <dialog>、@keyframes 字串命名、border-shape、:heading 偽類等新語法。

Declarative <dialog>：對話框不再需要 JavaScript

過去的方式

// 過去打開對話框需要 JavaScript
const dialog = document.querySelector('dialog');
dialog.showModal(); // 或 dialog.show()

// 關閉也需要 JS
dialog.close();

Declarative 的方式

<!-- HTML 宣告式，不需要 JavaScript -->
<dialog id="my-dialog">
  <h2>Hello</h2>
  <p>This is a declarative dialog!</p>
  <button formmethod="dialog">Close</button>
</dialog>

<!-- 通過 button 的 formmethod="dialog" 來關閉 -->
<button formmethod="dialog" formaction="#my-dialog">
  Open Dialog
</button>
/* 簡單的樣式 */
dialog {
  padding: 2rem;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

實際應用場景

<!-- 確認對話框 -->
<dialog id="confirm-delete">
  <h2>確認刪除？</h2>
  <p>此操作無法撤銷。</p>
  <div class="actions">
    <button value="cancel" formmethod="dialog">取消</button>
    <button value="confirm" formmethod="dialog">確認刪除</button>
  </div>
</dialog>

<!-- 觸發按鈕 -->
<button formmethod="dialog" formaction="#confirm-delete">
  刪除項目
</button>

瀏覽器支援：所有主流瀏覽器都支援 Declarative <dialog>。

@keyframes 字串命名：語法上的好奇心

新語法

/* 過去：只能使用識別符 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 現在：可以使用字串 */
@keyframes "@fadeIn" {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes "slide-up" {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

這個語法的實際用途

坦白說，這個語法目前的實際用途有限。瀏覽器廠商承認，這更像是一個「語法上的好奇心」。

但它可能的未來用途：

// 動態取得動畫名稱
const animationName = getAnimationName();
// "@fadeIn" vs "fadeIn"
element.style.animationName = animationName;

目前，建議繼續使用傳統的識別符語法，這個功能可以當作了解就好。

border-shape：比 corner-shape 更彈性的形狀控制

corner-shape 與 border-shape 的區別

/* corner-shape：只控制圓角 */
.card {
  corner-shape: round;
  border-radius: 16px;
}

/* border-shape：控制整個 border 的形狀 */
.shaped-card {
  border-shape: round 16px 8px 24px 4px;
  /* top-left top-right bottom-right bottom-left */
}

border-shape 的實際應用

<div class="banner">
  <div class="banner-flag">
    Sale! 50% Off
  </div>
</div>
.banner-flag {
  /* 製作一個標語牌的形狀 */
  background: #e63946;
  color: white;
  padding: 8px 24px;
  border-shape: bevel 4px 4px 4px 4px;
  /* 模擬真實的標語牌邊緣 */
}

.banner {
  /* 複雜的圖案背景 */
  background:
    linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
  padding: 40px;
  border-shape: round 24px 8px 24px 8px;
}

瀏覽器支援：border-shape 目前仍是實驗性功能，需要 Chrome/Edge 的實驗性 flag。

:heading 偽類：一次匹配所有標題

過去的方式

/* 過去需要分開寫 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
  margin: 0;
}

/* 或者用 class */
.heading {
  font-weight: bold;
}

:heading 偽類

/* Safari Technology Preview 237+ */
:heading {
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
  margin: 0;
}

/* 搭配 pow() 建立 typescale */
h1 { font-size: calc(1rem * pow(1.25, 6)); }
h2 { font-size: calc(1rem * pow(1.25, 5)); }
h3 { font-size: calc(1rem * pow(1.25, 4)); }

:heading 等同於 :is(h1, h2, h3, h4, h5, h6)，但語法更簡潔。

Typescale 應用

/* 建立一個統一的 typescale */
:root {
  --type-scale: 1.25;
  --base-size: 1rem;
}

:heading {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* 動態計算各級標題大小 */
:heading {
  font-size: calc(var(--base-size) * pow(var(--type-scale), 3));
}

瀏覽器支援：目前僅 Safari Technology Preview 237+ 支援。

Style Queries：容器查詢的下一個前沿

基本語法

Style Queries 允許你根據容器的 CSS 屬性值來應用樣式：

/* 查詢容器是否有特定的 CSS 屬性 */
@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: #ffffff;
  }
}

/* 查詢自訂屬性的值 */
@container style(--variant: outlined) {
  .button {
    border: 2px solid currentColor;
  }
}

Style Queries vs 普通 Container Queries

類型查詢目標
Container Queries容器的尺寸（width/height）
Style Queries容器的 CSS 屬性值

實際應用

<div class="card" style="--variant: primary">
  <div class="card-inner">
    <!-- 根據 --variant 顯示不同樣式 -->
  </div>
</div>
.card-inner {
  container-type: inline-size;
}

@container style(--variant: primary) {
  .card-inner {
    background: #4f46e5;
    color: white;
  }
}

@container style(--variant: secondary) {
  .card-inner {
    background: #f3f4f6;
    color: #1f2937;
  }
}

瀏覽器支援：Chrome/Edge 111+ 支援，Firefox 和 Safari 仍在開發中。

Middle Text Truncation：中間省略的實現

過去的問題

/* 過去：只能從末端截斷 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* "This is a very long title..." */
}

Flexbox 中間省略

.title-truncate {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-truncate > .prefix {
  flex-shrink: 0; /* 前綴不被截斷 */
}

.title-truncate > .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* 關鍵：允許 flex 收縮 */
}

.title-truncate > .suffix {
  flex-shrink: 0; /* 後綴不被截斷 */
}
<div class="title-truncate">
  <span class="prefix">📁</span>
  <span class="text">This is a very very very long file name that needs truncation</span>
  <span class="suffix">.pdf</span>
</div>

::highlight() 的限制

CSS ::highlight() 允許你高亮文字，但目前不支援与 text-overflow 互動：

/* ::highlight 可以高亮，但做不到中間省略 */
::highlight(search-results) {
  background: yellow;
  color: black;
}

Middle text truncation（從中間截斷長文字）仍在等待原生的 text-overflow: ellipsis middle 語法。

modern.css：75+ 現代 CSS 程式碼片段

modern.css 是一個收集了 75+ 現代 CSS 程式碼片段的網站，幫助你用 2026 年的語法取代 2015 年的語法。

常見的現代化案例

/* 過去：使用 autoprefixer 和 vendor prefix */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

/* 現在：直接使用 */
display: flex;

/* 過去：手動計算 rem */
font-size: 14px;
line-height: 1.5;

/* 現在：使用 clamp() */
font-size: clamp(0.875rem, 2.5vw, 1.125rem);
line-height: 1.5;

/* 過去：使用 float 佈局 */
float: left;
clear: both;

/* 現在：使用 grid/flex */
display: flex;
gap: 16px;

結語：CSS 正在快速演化

這一期 !important 涵蓋的功能，代表了 CSS 發展的幾個方向：

  • Declarative UI：減少對 JavaScript 的依賴，HTML/CSS 本身就能建立互動
  • 更精確的選擇器：:heading 這類偽類讓選擇器更直觀
  • 容器查詢的擴展：Style Queries 把容器查詢帶到新的層次
  • 形狀控制的演進：border-shape 提供了比 border-radius 更豐富的控制

這些功能大多數仍處於早期階段，瀏覽器支援也不一致。但在 2026 年，「CSS 能做到什麼」這個問題的答案，正在快速擴展。

建議：選擇幾個最適合你日常工作的功能深入了解，其他的當作技術雷達追蹤就好。

延伸閱讀

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