新的 CSS 可以讓您的生活更輕鬆

本指南的目的是向您介紹 CSS 最近引入的一系列創新且強大的功能。雖然本文概述了它們的語法和實際用例，但每個功能都有更深入的內容需要探索。以此為起點，深入研究這些前沿進展。

1。容器查詢（大小）

什麼是基於大小的容器查詢？

基於大小的容器查詢可讓您根據父容器的尺寸將樣式套用於子元素，而不是像傳統媒體查詢那樣依賴整個視窗的大小。

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

為什麼這很重要？

這將「CSS mixins」的概念變成現實。就像 Sass mixins 增強了可維護性一樣，基於樣式的容器查詢擴展了 CSS 的本機功能，考慮了級聯並允許更大的靈活性。

瀏覽器支援：

• 支援：Chrome 及其衍生產品。

• 即將推出：Safari。

• 不支援：Firefox。

• 增強功能：有限。

• Polyfill：不可用。

3。貨櫃單元

什麼是貨櫃單元？

容器單位是響應式測量單位（例如，cqw、cqh、cqmin、cqmax），它們根據容器的大小而不是視口來計算尺寸。它們的運作方式與 vw 類似（視口寬度的 1%），但範圍僅限於容器。

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

為什麼這很重要？

如果內部元素需要根據其父容器按比例縮放，容器單元提供了一個乾淨的、僅 CSS 的解決方案。一個常見的用例是縮放卡片或模組化組件內的版式或間距。

瀏覽器支援：

• 全面支援：現代瀏覽器。

• 增強功能：是的，有後備功能。

• Polyfill：可用。

4。 :has() 偽選擇器

什麼是 :has() 選擇器？

:has() 偽類別可讓您根據父元素中特定子元素的存在來設定父元素的樣式。

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

為什麼這很重要？

:has() 選擇器在 CSS 中有效地充當“父選擇器”，使得可以根據子元素設定父元素的樣式。例如，您可以使用 :has() 僅在出現錯誤訊息時反白顯示父表單欄位。

瀏覽器支援：

• 支援：所有主要瀏覽器。

• Polyfill：僅限 JavaScript。

*5。看過渡
*
什麼是視圖轉換？

此功能引入了兩種類型的動畫：

1. 單頁轉換（需要 JavaScript）。

2. 多頁面轉場（僅限 CSS）。
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*為什麼這很重要？
*
過渡透過在狀態變化期間對元素進行動畫處理來增強用戶體驗，使互動感覺更加流暢。他們使用“補間”，即動畫在開始和結束狀態之間進行插值，而無需手動定義每個步驟。

瀏覽器支援：

• 支援：Chrome 及其衍生產品。

• 不支援：Safari、Firefox。

• 增強功能：是的，有後備動畫。

6。巢狀

什麼是嵌套？

CSS 巢狀可讓您在其父規則中編寫子選擇器，使程式碼更清晰且更易於維護。

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

為什麼這很重要？

巢狀減少了 CSS 中的冗餘，將相關樣式分組在一起。然而，過度使用它可能會導致選擇器過於具體並降低可重用性。

瀏覽器支援：

• 全面支援：現代瀏覽器。

7。滾動驅動的動畫

什麼是滾動驅動動畫？

這些動畫與滾動相關，可以使用 CSS 實現，而不依賴 JavaScript。

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

為什麼這很重要？

從進度指示器到視差效果，滾動驅動的動畫提高了互動性並減少了對效能關鍵型任務對 JavaScript 的依賴。

瀏覽器支援：

• 支援：Chrome。

• 即將推出：Firefox。

8。子網格

什麼是子網格？

子網格值允許子網格項目與其父網格的行或列對齊，而無需重複網格定義。

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

為什麼這很重要？

子網格確保巢狀網格結構之間的一致對齊，使複雜的佈局更易於維護。

瀏覽器支援：

• 完全支援：所有現代瀏覽器。

最後的想法

CSS 繼續以令人興奮的速度發展。憑藉容器查詢、視圖轉換和子網格等功能，該語言對於現代 Web 開發變得更加強大和直觀。密切關注未來的發展，包括相對顏色語法、作用域 CSS 和新的 HTML 元素（例如 ），它們有望帶來更大的設計可能性。

以上是新的 CSS 可以讓您的生活更輕鬆的詳細內容。更多資訊請關注PHP中文網其他相關文章！