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

立即可用的實用 CSS 工具，不僅功能強大、功能強大，而且也相當穩定。

Adam Argyle

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

這篇文章延續了 去年所有前端開發人員都應該知道的 6 個 CSS 程式碼片段，

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

:has()

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：121。
  • Safari：15.4。

資料來源

:has() 已於 2023 年底在所有主要瀏覽器中獲得！新的選取器似乎 雖然不大且毫無意義，但只要有以下用途，您就會感到驚訝： 遊戲、再活動、內容感知版面配置、智慧型元件和 許多 Jhey 在這篇文章中深入探討的議題。

目前顯示 4 個面板，每個面板都有一張圖片和說明文字。 每張圖片都顯示大腦啟動了更多元的腦力。第一個面板是 也就是 :has()第二個面板將 icon: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。

資料來源

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

瀏覽器支援

  • 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 Shadeed 在 2021 年撰寫了一篇有關容器查詢單元的精彩文章。

我們提供六種新的評估單位：

  1. 內嵌變化版本 cqi。
  2. 寬度變化版本 cqw。
  3. 區塊變化版本 cqb。
  4. 高度變化版本 cqh。
  5. 長度較短的變化版本 cqmin。
  6. 任何長度的變化版本 cqmax。

以容器的相對和內建動畫為例， 子元素會因為 也就是 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 年提供的所有單元。