2024 年所有前端開發人員都應該知道 5 個 CSS 程式碼片段

這套 CSS 實用、強大且穩定，可立即使用。

Adam Argyle

我認為每位前端開發人員都應該瞭解 :has() 不只是「父項選取器」，還包括 subgrid 的運作方式和原因、如何使用內建 CSS 語法巢狀結構、如何讓瀏覽器平衡標題文字換行，以及如何使用容器查詢單位。

本文是去年的文章「2023 年前端開發人員必知的 6 個 CSS 片段」的續篇。

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

Browser Support

Source

:has() 已於 2023 年底在各大瀏覽器推出！這個新的選取器看似微不足道，但您會驚訝地發現，它能解鎖許多用途：遊戲、反應性、內容感知版面配置、智慧型元件，以及Jhey 在這篇文章中深入探討的更多功能。

顯示 4 個面板，每個面板都包含圖片和說明文字。
每張圖片都顯示大腦越來越活躍，第一個面板顯示「:has()」。第二個面板顯示「figure:has(caption)」做為父項選取器。第三個面板會顯示 .layout:has(> :nth-child(5)) 做為數量選取器。
第四個面板顯示 html:has(#checked) .new-subject，做為條件式主體變更選取器。

以下是使用 :has() 做為父項選取器的幾個範例。這個名稱的由來是因為選取器的主體通常位於結尾，例如 ul li，其中 li 是主體，會取得樣式。使用 :has() 時，選取器開頭的元素可以成為主體。在以下範例中，如果按鈕內有類別為 .icon 的元素，按鈕就會有間距。如果卡片內有圖片，卡片會變更方向。

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

長期以來，我們一直希望選取器能根據項目數量變更版面配置。現在使用 :has() 即可達成，因為查詢子項數量時，容器可做為主體。

main:has(> :nth-child(5)) {…}

另一個較高層級的範例：在啟用頁面上的特定核取方塊時，變更整份文件設定的樣式：

html:has(#dark-mode:checked) {…}

這些都是簡單的用途，不會變更選取器的主體。如果只看這類範例，您可能會認為 :has() 僅限做為父項選取器。但請參考以下範例。這些會根據共同祖先檢查某個項目，然後將選取器主體轉移至網頁深處的子項。

如果任何輸入內容無效，這個範例會顯示表單錯誤元素：

form:has(:user-invalid) .error {
  display: block;
}

當側邊導覽列的類別為 .--is-open 時，這個類別會滑出主要內容區域：

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

以下是使用 :has() 做為父項選取器、:has() 搭配數量查詢，以及容器查詢的有趣示範，可製作格線版面配置，在直向或橫向模式中優雅地顯示 1 到 12 個元素：

在 Codepen 上試用

建立子格線

subgrid

Browser Support

Source

多年來，前端網頁社群一直要求提供子格，以協助完成並補足極受歡迎且功能強大的 CSS 格線版面配置引擎。現在這項功能已在三大引擎中推出。

如要瞭解子格狀區域的概況，請參閱這篇文章。

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

以 CSS 方式巢狀化

nesting

Browser Support

Source

2023 年，所有主要瀏覽器都開始支援內建 CSS 巢狀結構。我甚至更新了網站，移除了編譯巢狀結構的建構程序，現在可以發布較小的樣式表！沒錯，使用巢狀結構的樣式表較小，且所有瀏覽器開發人員工具都已準備好呈現。

如要瞭解所有詳細資料，請參閱這篇文章，查看 CSS 巢狀語法的簡介。以下程式碼範例顯示語法範例。

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

讓瀏覽器平衡廣告標題

balance

Browser Support

Source

pretty

Browser Support

Source

如果沒有 text-wrap: balance，開發人員和文案人員就只能使用換行提示，例如 <wbr> 元素或 。這場戰役大多會以失敗告終，因為一旦內容經過翻譯、縮放或以任何方式修改，系統就無法保證這些換行提示會出現在新版內容的正確位置。

使用平衡文字換行功能，即可將這項工作交給瀏覽器處理。您可以在下列 Codepen 中查看比較結果。

使用容器查詢單位

cqw

Browser Support

Source

去年的文章建議每位前端開發人員都應瞭解如何編寫容器查詢。如果您還沒學會，不妨在 2024 年開始嘗試，並瞭解容器查詢單元。概略來說，Ahmad Shadeed 在 2021 年撰寫了一篇關於容器查詢單元的精彩文章。

有六個新的container query 單位：

內嵌變數 cqi。
寬度變體 cqw。
區塊變體 cqb。
高度變數 cqh。
無論哪種長度較短，都會顯示該長度的變體 cqmin。
以較長者為準 cqmax。

請考慮容器的相對和本質動畫情境。子元素使用 100cqi (容器內嵌大小的 100%)，完全從容器滑出。

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

以下是含有容器回應式排版和圖片的資訊卡，圖片會配合容器方向調整大小，如果是橫向，圖片會變成一半大小。

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

如果你是新手，建議查看 2024 年的所有課程。

2024 年所有前端開發人員都應該知道 5 個 CSS 程式碼片段 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

CSS:has(.potential-beyond-being-a-parent-selector)

建立子格線

以 CSS 方式巢狀化

讓瀏覽器平衡廣告標題

使用容器查詢單位

2024 年所有前端開發人員都應該知道 5 個 CSS 程式碼片段