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

您今天就能使用的強大且穩定的 CSS,可用於工具箱。

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

這篇文章是去年的延續,當時我們介紹了 6 個 CSS 程式碼片段,是每位前端開發人員在 2023 年都應熟知的內容。

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

:has()

瀏覽器支援

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

資料來源

: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

瀏覽器支援

  • Chrome:117。
  • Edge:117。
  • Firefox:71。
  • Safari: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

瀏覽器支援

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

資料來源

內建 CSS 巢狀結構於 2023 年開始在所有主要瀏覽器中提供。我甚至更新了網站,移除編譯巢狀結構的建構程序,現在我可以提供較小的樣式表!沒錯,含有巢狀結構的樣式表較小,所有瀏覽器的 devtools 都已準備好呈現。

如需 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

瀏覽器支援

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

資料來源

pretty

瀏覽器支援

  • Chrome:117。
  • Edge:117。
  • Firefox:不支援。
  • Safari:不支援。

資料來源

如果沒有 text-wrap: balance,開發人員和文案作者就只能使用換行提示,例如 <wbr> 元素或 &shy;。這通常是徒勞無功,因為只要內容經過翻譯、縮放或以任何方式修改,就無法保證這些包裝提示會出現在正確位置,以便呈現新內容。

您可以使用平衡文字斷行功能,讓瀏覽器執行這項工作。您可以在下列 Codepen 中查看比較結果。

使用容器查詢單位

cqw

瀏覽器支援

  • Chrome:105。
  • Edge:105。
  • Firefox:110。
  • Safari:16 歲。

資料來源

去年的文章建議,每位前端開發人員都應瞭解如何編寫容器查詢。如果您尚未學習,不妨在 2024 年開始嘗試,並查看容器查詢單元。Ahmad Shaded 在 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 年可用的所有單位