大家好，我是夏格飛，一位專注於網站設計與開發的專業建置者，今天很高興與大家分享 2025 年即將成為前端開發主流的 CSS 新技術。這些新特性不僅能簡化我們的開發過程，還能提升網頁的效能與使用者體驗。作為一位熱衷於學習新技術的開發者，這些工具讓夏格飛自己在處理專案時變得更加高效，也讓客戶們對我們的成果讚不絕口。

接下來的內容，我將詳細介紹容器查詢、全新的選擇器、次網格（Subgrid）、偽類（Pseudo-Classes）、邏輯屬性（Logical Properties）、Lab 色彩空間、Scrollbar 样式改造、以及一些功能強大的 CSS 函數，帶您一同了解它們如何改變未來的網頁設計。

本文章目次

• 容器查詢（Container Queries）
• 新選擇器（New Selectors）
  • :has()
  • :is() & :where()
  • :not()
  • :nth-of-type()
• 次網格（Subgrid）
• 4. 邏輯屬性（Logical Properties）
  • 範例：
• 5. Lab 色彩空間與 Relative Color Syntax
• 6. Scrollbar-Gutter 與 Scrollbar-Color
• Ruby Layout
• Relative Color Syntax & Light-Dark 模式
  • 範例：
• font-size-adjust
• 新的 CSS 函數
  • clamp() 函數
  • math() 函數
• 結語

容器查詢（Container Queries）

容器查詢為響應式設計開啟了全新的視角。傳統的媒體查詢（Media Queries）主要依賴視窗尺寸來套用樣式，但這種方法往往會限制一些模組化設計的實現。而容器查詢則允許我們根據父容器的大小來改變子元素的樣式，達到更靈活的響應式效果。

例如，我們設計一張「個人資料卡片」時，可以依據卡片容器的寬度來調整其排版，當寬度較窄時，圖片和文字堆疊；當寬度足夠時，內容則呈現左右分佈。

.profile-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@container (min-width: 500px) {
    .profile-card {
        grid-template-columns: auto 1fr;
    }
}

下圖為 Codepen 上的範例

這樣的查詢方式讓設計模組更加獨立，提升了系統開發時的可維護性。對於像是內容管理系統（CMS）或組件化設計框架，這是極為有用的功能。夏格飛最近幫某媒體公司設置他們的多語言新聞網站時，這個功能讓內頁設計調整變得易如反掌。

新選擇器（New Selectors）

CSS 在選擇器上不斷進化，如今這些更為強大的選擇器讓開發者能夠針對更具條件性的元素進行樣式綁定。

:has()

:has()：選擇包含某些子元素的父層元素。例如：

div:has(img) {
    border: 1px solid red;
}

這段程式碼會為那些直接包含 <img> 標籤的 <div> 加上邊框。

用途：

• 僅當卡片包含圖片時才套用樣式。

• 反白顯示包含無效內容的表單欄位。

• 無需 JavaScript 即可動態修改佈局。

:is() & :where()

:is() 與 :where()：能匹配多個選擇器，減少冗長的程式碼。例如：

:is(h1, h2, h3) {
    font-family: Arial, sans-serif;
}

用途：

• 減少過多冗餘選擇器。

• 有效地應用全域樣式。

• 提高大型程式碼庫的可維護性。

:not()

:not()：過濾不符合條件的元素，例如：

a:not([href]) {
    color: gray;
}

:nth-of-type()

:nth-of-type()：更精細地篩選匹配，適合用於動態內容排版。

/* 文章中的每次間隔第二個段落元素，也就是 2, 4, 6, 8 */
article p:nth-of-type(2n) {
  color: darkgray;
}

這些選擇器不僅提升了樣式管理的靈活性，也讓工程師在處理更複雜的客製化需求時，少寫許多 JavaScript 程式碼。

次網格（Subgrid）

過去，我們透過 CSS 網格布局來輕鬆創建複雜的網頁結構。但在子元素排版時，如果要對齊方格中的子元素，就要額外用類似 flex + height + margin: auto 的方式讓卡片對齊高度。而次網格特性讓子元素可以直接繼承父網格的行列分佈，減少不必要的重複設置。

用於電商網站中產品清單的排版時，次網格能確保商品資訊「圖片」「標題」「價格」保持齊整對齊。

.container {
    display: grid;
    grid-template-columns: 1fr auto;
}

.item {
    display: grid;
    grid-template-rows: subgrid;
}

參考以下 Codepen 範例

這種次網格技術幫助我們設計團隊快速處理排版挑戰，為許多電商製作網站時時，輕鬆完成一致的商品陳列。

4. 邏輯屬性（Logical Properties）

邏輯屬性讓設計變得更加符合不同語言書寫方向的需求，例如從左至右（LTR）或從右至左（RTL）。你可以用邏輯屬性來控制譬如「內容起始點」或「邊界」。最常見的就是，margin / padding 的 left, right 改成 start, end，這樣就能夠依照語言方向做調整。

範例：

.margin-box {
    margin-inline-start: 10px; /* 根據語言方向自動調整 */
    margin-block-end: 20px;
}

這對於多語網站至關重要，特別是有繁體中文與阿拉伯語的情境設計。

5. Lab 色彩空間與 Relative Color Syntax

CSS 現在支援更精確的色彩表達方式，如 Lab 色彩空間，可用於允許更自然的漸層與轉場設置，並提高字體配色的正確度。

範例：

button {
    background-color: lab(75% -50 50);
}

這讓我們更容易調整色彩明亮度與色調，並且在螢幕或印刷中更加一致。

6. Scrollbar-Gutter 與 Scrollbar-Color

隨著用戶界面設計的需求增加，CSS 提供了更靈活控制滾動條樣式的功能。例如，scrollbar-gutter 屬性可以設置預留滾動條空間，避免 overflow: auto 時，有無滾動條情況下影響版面寬度，提供更乾淨的佈局。再搭配 scrollbar-color，設計師可以更精確地設定滾動條的顏色，以符合整體主題風格。另外還有 scrollbar-width 可以設定寬度。

.container {
    scrollbar-gutter: stable both-edges; /* 確保佈局穩定 */
    scrollbar-color: darkgray lightgray; /* 設定滾動條的顏色 */
    scrollbar-width: thin; /* 窄邊滾動條 */
}

這對於用戶體驗而言至關重要，特別是必須在不同裝置與瀏覽器中保持一致性時。

Ruby Layout

為了更好地呈現語言學習中的注音文本，CSS 現在支持 Ruby 佈局，用於不同語系中標記輔助發音資訊。Ruby 是一種用於亞洲語言（如日文、中文）中的特殊排版技術，通常將註解部分放置於主文上方或下方，這對於語言學習和語言無障礙設計尤為有幫助。

<ruby> 
    明日 
    <rp>(</rp>
    <rt>Ashita</rt>
    <rp>)</rp>
</ruby>

CSS 中的相關屬性提供了對 Ruby 註解的額外控制，如 ruby-position，可以設定註解位置是上方還是下方。此外，使用 ruby-align 能確保註解在多行佈局中對齊主文字或結合適當的間距。

用途：

• 適用於語言學習的排版，提升可讀性。

• 更靈活的控制註解位置與對齊，滿足不同語言的需求。

• 提高內容與設計的一致性，同時增加多語支持能力。

這些功能進一步展示了 CSS 在現代網頁設計中的發展，為國際化用戶提供了更豐富且可定制的使用體驗。

Relative Color Syntax & Light-Dark 模式

為了改善網頁設計的靈活性和應用的一致性，CSS 最近引入了 Relative Color Syntax，它為設計師提供了一種基於現有色彩的動態生成新色彩的方式。這種語法允許以相對於某個基準色的方式定義新的色彩，而不需要指定固定的色碼。使用此特性，開發者可以更輕鬆地定義調色板，並根據需求創建協調一致的配色方案。

範例：

--base-color: hsl(200 50% 50%);
--lighter-color: color-mix(in srgb, var(--base-color), white 30%);
--darker-color: color-mix(in srgb, var(--base-color), black 30%);

上述範例展示了如何基於 --base-color 生成更亮或更暗的色彩，這樣的功能大大簡化了主題定制和色彩調整。

此外，Light-Dark 模式的自動支持也在現代 CSS 中得到了加強。借助媒體查詢如 @media (prefers-color-scheme)，開發者可以根據用戶的系統設置自動調整網頁主題，更好地適應用戶的視覺偏好與舒適度。

.element {
  background: light-dark(#ffffff, #000000);
}

關鍵功能：

• 動態色彩生成： 減少重複工作，提升設計的一致性。

• 主題模式切換： 為用戶提供更個性化的體驗，尤其是在不同光線條件下。

• 高效開發： 通過統一的語法和自動化的模式切換功能，加快生成現代網頁設計的流程。

這些特性不僅優化了開發者的工作流程，還進一步滿足了用戶對於美學與功能的雙重需求，代表了 CSS 的又一重要進步。

font-size-adjust

透過 font-size-adjust 屬性，開發者可以更精確地控制字體的可讀性，尤其是在相同的字體大小下，確保不同字體家族之間的視覺比例更為一致。這對於多語言網站或需要動態字體切換的應用場景尤為重要。例如：

p {
    font-size-adjust: 0.5;
}

上述代碼設置後，即使字體的 X 高（x-height）有所不同，也能保證一致的文本呈現效果。

新的 CSS 函數

現代 CSS 的發展還體現在各種實用函數的引入與改進，這些函數幫助開發者更高效地完成複雜的設計需求。其中一些新興的功能特性，對於動態設計和優化開發流程起到了顯著作用。

clamp() 函數

clamp() 是一個強大的工具，用於動態設置屬性的值，並在合理範圍內提供靈活性。它接受三個參數：最小值、理想值和最大值。這使得元素的大小或字體能夠根據屏幕的尺寸或其他條件自適應，但始終保持在可控的範圍之內。

示例代碼：

p {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

該代碼保證字體大小在 1rem 至 2rem 之間根據視窗寬度進行調整，有效提升響應式設計的靈活性。

math() 函數

math() 函數為開發者提供了在 CSS 中直接進行數學運算的能力。有了這個特性，開發者可以避免藉助外部工具進行單位或值的計算，從而提升開發效率。

示例應用：

div {
    width: calc(100% - 2rem);
}

這樣的代碼允許更精準地設置元素的大小，同時保持樣式的可讀性和可維護性。

關鍵優勢：

• 提升響應能力：無需使用媒體查詢即可提供更多動態設計選項。

• 減少冗餘代碼：內置的數學計算功能簡化了 CSS 規則。

• 提高開發效率：使複雜邏輯在樣式表中直觀呈現。

CSS 函數的持續創新，表明了 CSS 在滿足多樣化設計需求和高效開發方面的價值，同時也為設計師和開發者帶來了全新的工具箱。

結語

CSS 的發展不斷推動著網頁設計和前端開發的進步，為設計師和開發者提供了更加靈活和高效的工具來實現創意。未來，隨著更多新功能的加入，CSS 很可能會變得更加直觀和功能強大，例如進一步優化網格布局（Grid Layout）、支持更多語義化的屬性，以及對特效動畫的更強支持。

對於網頁設計師和開發者來說，掌握這些新功能不僅能提升設計和開發的效率，還能讓最終產品更具吸引力和適應性。因此，持續關注 CSS 的更新和學習新技術是保持競爭力的重要方式。隨著技術的不斷進化，我們可以期待未來的開發體驗會變得更加友善與高效。更多技術新知，歡迎關注夏格飛。