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

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

我認為每個前端開發人員應該知道 :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 年提供的所有單元