前言

隨著 Web 開發的發展，新的 CSS 趨勢正在出現，以幫助開發人員創建更具視覺效果的網站。從響應式設計和動畫到新技術和樣式，CSS 趨勢不斷變化和適應，以滿足現代網頁設計的需求。由于 CSS 趨勢是周期性的，因此可以合理地假設，到 2023 年，Web 開發中將會出現一些新的 CSS 趨勢。

在本文中，了解 2023 年最值得關注的 10 個 CSS 趨勢。這些趨勢將幫助你通過釋放 CSS 的力量來創建視覺上令人驚嘆的響應式設計～

CSS Grid

「CSS Grid」是一個功能強大的布局模塊，可讓開發者創建復雜的響應式網格布局。它得到現代瀏覽器的完全支持，并且在網絡開發人員中越來越受歡迎。這種驚人的 CSS 趨勢可以輕松處理行或列。

子網格是一個已添加到網格布局中的便捷功能。你可以使用子網格功能創建子網格，該功能將模仿其父網格的布局。當子網格嵌套在另一個網格顯示中時，它會選擇其尺寸和間隙。父網格的布局將應用于子網格，盡管子網格仍然可以在必要時覆蓋某些部分。

??????

「瀏覽器支持：96.38%」

??????

CSS書寫模式

根據語言的不同，CSS 書寫模式屬性會調整文本的對齊方式，以便可以從上到下或從左到右閱讀。例如，假設我們希望添加一些從左到右、從上到下閱讀的文本。

??????

這對于文本經常垂直放置的語言（例如中文、日語或韓語）很有幫助。出于美觀原因，你可能希望在 CSS 趨勢的幫助下在英語中使用這種特性。

「瀏覽器支持：97.37%」

??????

滾動捕捉行為

為了控制 Web 瀏覽器的CSS 滾動捕捉行為，CSS 提供了一組有價值的屬性。其中一些功能已經擴展，但更新的瀏覽器版本現在才可以訪問其他功能。關于 CSS 趨勢的最好的一點是，大概只有三分之一的 CSS 用戶知道它。

使用「scroll-snap-type」屬性，您可以通過多種方式修改容器上的滾動位置。開發人員可以獲得更高的精度，而最終用戶則可以享受更流暢、更可控的用戶體驗。

圖片

「瀏覽器支持：95.32%」

圖片

容器查詢

CSS 尚未完全建立容器查詢，盡管它們會的。它們將對我們如何看待響應式設計產生重大影響。基本概念是，除了視口和媒體之外，你還可以根據父容器的大小指定斷點。

語法如下：

@container <container-condition> {
  <stylesheet>
}

當容器大小發生變化時，根據查詢容器評估的一組功能。如果條件為真，則應用 <stylesheet>中定義的樣式。

「瀏覽器支持：87.42%」

??????

新調色板

CSS實踐者已經開始使用RGB來美化網頁。最近 CSS 推出了三種新的調色板 HWB、LAB 和 LCH。

「HWB：」它是色調、白度和黑度的縮寫。這是一個易于人們閱讀的功能：您選擇一種顏色，然后添加白色和黑色。最近發布的 Chrome、Firefox 和 Safari 都支持它。

「瀏覽器支持：87.71%」

「LAB：」它是根據 CIA LAB 色彩理論創建的，被認為是理論上最復雜的新色彩空間。LAB 顏色描述符包括人類可以感知的所有顏色，這是一個大膽的說法。現在只有 Safari 兼容這種 CSS 趨勢，就像 LCH 一樣。

「LCH：」它代表亮度、色度和色調，以拓寬可用顏色的調色板而聞名。Safari 僅支持 LCH。

「瀏覽器支持：15.38%」

CSS變量

CSS變量也稱為CSS自定義屬性，自2015年以來一直是市場上流行的CSS趨勢，目前正受到越來越多CSS用戶的關注。CSS 變量允許您在 HTML 代碼中的其他位置存儲和使用值。它有助于消除代碼中的冗余，提高靈活性，提高代碼的可讀性。

html {
  --color-primary: #191919;
}

「瀏覽器支持：95.81%」

視口單位

對于每個嘗試為 iOS 上的 Safari 編寫網站的人來說，設置視口單位都是一件麻煩事。移動瀏覽器顯示設置為單位「vh」大小的容器小于應有的大小。

你需要使用自動調整容器大小的腳本來解決此錯誤。除了加載新腳本帶來的不便之外，一些解決方法還會損害 Chrome 用戶。

幸運的是CSS 現在支持新的相對長度和視口規范。其中一些是“vw”、“svw”、“lvw”和“dvw”。這些測量值是小視口尺寸、大視口尺寸和動態視口尺寸以及 UA 默認視口尺寸寬度的 1%。

「瀏覽器支持率：97.53%」

級聯層

如果級聯中的下一個元素具有更高級別的特異性，則 CSS 會覆蓋對第一個元素的樣式更改。由于代碼庫龐大，這個問題在大型項目中總是存在。這時 CSS 級聯層就派上用場了。

圖片

級聯層為開發人員提供了主題、框架和設計方面更好的靈活性，以充分利用級聯系統。與以啟發式為中心的原始級聯相比，級聯層提供對底層級聯邏輯的直接操作和管理。

「瀏覽器支持：87.57%」

內容可見性

CSS 中的內容可見性屬性有助于加快網頁上內容的呈現速度，以便用戶可以在加載頁面其余部分時與內容進行交互。借助此屬性，開發人員可以命令瀏覽器頁面的哪一部分具有獨立的內容。作為回報，它可以幫助瀏覽器通過延遲計算來優化網頁內容。

這里更詳細內容可以看我的這一篇文章：兩行CSS讓頁面提升了近7倍渲染性能！

「瀏覽器支持：71.40%」

間隙

Gap 屬性是一種新興的 CSS 趨勢，有助于定義行和列之間的間隙，正式稱為網格間隙。它可作為以下特性的替代品。

• Row-gap
• Column-gap

我們利用具有單個值的間隙屬性來指示行和列之間的相同空間。如果行和列之間的距離存在差異，我們將使用具有兩個值的間隙函數，首先定義行之間的距離，然后定義列之間的距離。您可以利用兩個屬性，行間隙和列間隙，使代碼更加透明和易于理解。

圖片

在gap屬性之前，設計者需要使用具有一定限制的margin屬性，例如在元素和容器邊緣之間添加縮進。相反，gap 屬性允許您指定項目之間的縮進，而無需使用此類技巧和花招，而僅依賴于語言的基本構造。