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

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

Adam Argyle

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

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

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

:has()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

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

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

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

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

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

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

pretty

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: 26.

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

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

使用容器查詢單位

cqw

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

有六個新的容器查詢單元：

  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 年的所有課程。