2022 年值得期待的新 CSS 功能

已發表: 2022-07-07

這裡有一些您不想錯過的級聯樣式表更新，從鮮為人知的滾動捕捉屬性到令人驚嘆的新調色板。

CSS（層疊樣式表）於 1996 年首次亮相，並且仍然是 Web 開發堆棧中一個重要的、不斷發展的組件。 CSS 與其他生活語言一樣，總是在添加新功能以響應現實世界的實踐。由於發展迅速，即使是專門的開發人員也可能會錯過新功能。查看在不久的將來 CSS 中的一些最有用的特性。

子網格

CSS 從一開始就因許多嚴重的缺陷而受到批評。一些簡單的任務，例如在 CSS 中居中某些東西，需要過於復雜的變通方法和麻煩。
另一個重要的問題是實現合理的網格佈局，至少在 CSS 網格佈局模塊介入之前是這樣。

網格佈局由 display: grid 聲明指示，與 Flexbox 類似，它允許您定義矩形佈局，同時還可以控制二維網格。
根據研究，大多數 CSS 開發人員都知道網格佈局，我們中的許多人都在使用它。（如果你還沒有，別忘了嘗試一下！）

子網格是網格佈局模塊的一個全新且非常有用的功能。子網格功能允許您創建將繼承其父網格佈局的子網格。

與將網格顯示嵌套在另一個網格中相反，子網格定義了自己的尺寸和間隙。使用子網格時，父級的佈局將應用於子網格，但子網格仍可以在必要時覆蓋佈局的各個方面。

Subgrid 目前僅在 Firefox 71 及更高版本中可用，但計劃用於 Safari WebKit、Google Chrome 和 Microsoft Edge。子網格在未來將是一個非常有用的佈局功能。

強調色

儘管它們很受歡迎，但眾所周知，一些顯示元素很難設計。例如，複選框和單選按鈕經常被替換為自定義小部件，該小部件在隱藏瀏覽器實現的同時模仿其行為。您可以使用新的 CSS 強調色選項來定位這些元素。

例如，如清單 1 所示，您可以將洋紅色應用到頁面上的所有單選按鈕（另請參見這個實時示例）。

清單 1：單選按鈕的 CSS 顏色控制

<style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

滾動捕捉

CSS 提供了一組方便的屬性來控制 Web 瀏覽器中的滾動快照動作。其中許多功能已經在最近的瀏覽器版本中可用，而其他功能仍在推出中。

值得注意的是，超過三分之一的 CSS 用戶仍然沒有意識到滾動捕捉。

scroll-snap-* 屬性命令提供了幾個選項來微調滾動位置在容器上的工作方式。開發人員受益於更高的精度，而最終用戶則受益於更流暢、更可控的用戶體驗。

清單 2 顯示了一個簡單示例，說明如何控制 div 上的滾動捕捉（另請參見此實時示例）。

清單 2 是一個簡單的滾動快照示例。

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

清單 3 中的 y 滾動位置會自動移動到子元素，無論您在何處釋放滾動移動。這是由於滾動容器的 scroll-snap-type 屬性設置為 y 並且子元素具有 scroll-snap-align: start 聲明。

這種行為也可以改變。例如，您可以將 scroll-snap-type 屬性設置為 y 接近度。這可以按預期工作，僅在滾動靠近元素時才捕捉。

此外，相關的 overscroll-behavior 屬性控制嵌套滾動容器的行為方式。

邏輯 CSS 屬性

如果您曾經想在左右或底部和底部設置容器邊框，您可能已經經歷過必須逐字寫出border-left 和border-right 或border-top、border-bottom 屬性的煩惱。最佳。問題是沒有辦法在不影響您不想更改的邊框的情況下使用快捷方式屬性。對於填充和邊距等元素也是如此。

CSS 邏輯屬性模塊允許您使用 inline 和 block 關鍵字以抽象的方式引用事物。引用左右時，使用內聯；當提到頂部和底部時，使用塊。例如，要在 div 的左側和右側添加邊框，請使用清單 3 中的代碼。（另請參見此處的實時示例）。

清單 3：使用內聯邏輯的左右填充

div { border- inline : 10px dashed seagreen; }

這些是有用的邊框快捷方式，但 inline 和 block 邏輯關鍵字也可以在各種其他屬性中找到。

大多數開發人員使用這些快捷方式來處理文本方向和書寫模式問題。在這些情況下，像 padding-inline-end 這樣的屬性允許您定位尾隨填充，而不管文本方向如何。

本質上，對內聯和塊的抽象允許創建可應用於各種情況的通用樣式。更多信息可以在 CSS 邏輯屬性和值中找到。

容器搜索

容器查詢在 CSS 中尚未完全穩定，但很快就會穩定。它們將對我們思考響應式設計的方式產生重大影響。基本思想是您將能夠根據父容器的大小設置斷點，而不僅僅是視口和媒體。

語法沒有明確的定義，但它可能類似於清單 4。

@container 清單 4。

 @container (max-width: 650px){ … }

考慮一下基於 UI 嵌套層中出現的各種容器的大小來微調佈局的強大功能。這是一個相當重要的變化，幾乎肯定會引發一波界面創新浪潮。

三種新配色方案

自古以來，CSS 從業者就使用 RGB、HEX 和命名顏色來美化和活躍設備顯示。最近引入了 HSL 樣式的顏色聲明。 CSS 規範現在引入了新的顏色描述符，即 hwb、lab 和 lch。

HWB 是色調、白度和黑度的縮寫。這是一種很好的觸感，因其人類可讀性而脫穎而出——您選擇一種顏色，然後添加白色和黑色。它與最新版本的 Chrome、Firefox 和 Safari 兼容。（Microsoft Edge 功能參考在這個主題上出奇地震耳欲聾。）要了解有關 HWB 的更多信息，請參閱 hwb() - 人類的顏色符號？它與 RGB 和 HWL 一樣，具有用於透明度的 alpha 通道。

LCH 代表亮度、色度和色調，以擴展可用的調色板而著稱。什麼、為什麼以及如何在 CSS 中使用 LCH 顏色？這是一個很好的概述，其中包括對 CSS 中顏色理論的令人大開眼界的討論。目前只有 Safari 支持 LCH。

新色彩空間中最具理論性的是 LAB，它源自 CIE LAB 色彩理論。實驗室顏色描述符聲稱涵蓋了人類可感知顏色的整個光譜，這是一個大膽的聲明。它與 LCH 一樣，目前僅受 Safari 支持。更多關於 LAB for CSS 的信息可以在 Mozilla CSS 文檔中找到。