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

Toolbelt 值得信賴、功能強大且運作穩定，歡迎立即使用。

Adam Argyle

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

本文延續去年的 6 個 CSS 程式碼片段，每個前端開發人員應該在 2023 年應該知道。

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

:has()

瀏覽器支援

• 105
• 105
• 121
• 15.4

資料來源

:has() 已於 2023 年底在所有主要瀏覽器推出！這個新選取器看起來很小、低廉，但是在能夠解鎖的所有用途中，你都會感到驚訝：遊戲、重建、內容感知版面配置、智慧型元件，以及本文中 Jhey 深入研究的更多項目。

以下舉例說明如何使用 :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

瀏覽器支援

• 117
• 117
• 71
• 16

資料來源

多年來，前端網路社群要求下格進一步完成，讓這個廣受歡迎且功能強大的 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

瀏覽器支援

• 120
• 120
• 117
• 17.2

資料來源

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

瀏覽器支援

• 114
• 114
• 121

資料來源

pretty

瀏覽器支援

• 117
• 117
• x
• x

資料來源

如果沒有 text-wrap: balance，開發人員和複製寫入者會保留換行提示，例如 <wbr> 元素或 ­。這大部分對抗爭執，因為只要以任何方式翻譯、縮放或修改內容，並不保證這些包裝提示會在新內容呈現的正確位置。

使用平衡文字換行功能時，您可以將工作保留在瀏覽器上。您可在以下 Codepen 中查看比較結果。

使用容器查詢單元

cqw

瀏覽器支援

• 105
• 105
• 110
• 16

資料來源

去年的貼文建議，每個前端開發人員都應知道如何編寫容器查詢。如果您還不熟悉 2024 年，請把握機會好好收穫滿滿，也別忘了查看容器查詢單元。概略來說，Ahmad Shadeed 於 2021 年撰寫了一篇關於容器查詢單元的精彩文章。

有六個新的特定型單位：

1. 內嵌變化版本 cqi。
2. 寬度變化版本 cqw。
3. 區塊變化版本 cqb。
4. 高度變化版本 cqh。
5. 兩者長度的變化版本小於 cqmin。
6. 任一長度的變化版本大於 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 年可用的所有單元。