前言

隨著 Web 開發(fā)的發(fā)展，新的 CSS 趨勢正在出現(xiàn)，以幫助開發(fā)人員創(chuàng)建更具視覺效果的網(wǎng)站。從響應(yīng)式設(shè)計(jì)和動(dòng)畫到新技術(shù)和樣式，CSS 趨勢不斷變化和適應(yīng)，以滿足現(xiàn)代網(wǎng)頁設(shè)計(jì)的需求。由于 CSS 趨勢是周期性的，因此可以合理地假設(shè)，到 2023 年，Web 開發(fā)中將會(huì)出現(xiàn)一些新的 CSS 趨勢。

在本文中，了解 2023 年最值得關(guān)注的 10 個(gè) CSS 趨勢。這些趨勢將幫助你通過釋放 CSS 的力量來創(chuàng)建視覺上令人驚嘆的響應(yīng)式設(shè)計(jì)～

CSS Grid

「CSS Grid」是一個(gè)功能強(qiáng)大的布局模塊，可讓開發(fā)者創(chuàng)建復(fù)雜的響應(yīng)式網(wǎng)格布局。它得到現(xiàn)代瀏覽器的完全支持，并且在網(wǎng)絡(luò)開發(fā)人員中越來越受歡迎。這種驚人的 CSS 趨勢可以輕松處理行或列。

子網(wǎng)格是一個(gè)已添加到網(wǎng)格布局中的便捷功能。你可以使用子網(wǎng)格功能創(chuàng)建子網(wǎng)格，該功能將模仿其父網(wǎng)格的布局。當(dāng)子網(wǎng)格嵌套在另一個(gè)網(wǎng)格顯示中時(shí)，它會(huì)選擇其尺寸和間隙。父網(wǎng)格的布局將應(yīng)用于子網(wǎng)格，盡管子網(wǎng)格仍然可以在必要時(shí)覆蓋某些部分。

??????

「瀏覽器支持：96.38%」

??????

CSS書寫模式

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

??????

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

「瀏覽器支持：97.37%」

??????

滾動(dòng)捕捉行為

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

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

圖片

「瀏覽器支持：95.32%」

圖片

容器查詢

CSS 尚未完全建立容器查詢，盡管它們會(huì)的。它們將對我們?nèi)绾慰创憫?yīng)式設(shè)計(jì)產(chǎn)生重大影響?；靖拍钍牵艘暱诤兔襟w之外，你還可以根據(jù)父容器的大小指定斷點(diǎn)。

語法如下：

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

當(dāng)容器大小發(fā)生變化時(shí)，根據(jù)查詢?nèi)萜髟u估的一組功能。如果條件為真，則應(yīng)用 <stylesheet>中定義的樣式。

「瀏覽器支持：87.42%」

??????

新調(diào)色板

CSS實(shí)踐者已經(jīng)開始使用RGB來美化網(wǎng)頁。最近 CSS 推出了三種新的調(diào)色板 HWB、LAB 和 LCH。

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

「瀏覽器支持：87.71%」

「LAB：」它是根據(jù) CIA LAB 色彩理論創(chuàng)建的，被認(rèn)為是理論上最復(fù)雜的新色彩空間。LAB 顏色描述符包括人類可以感知的所有顏色，這是一個(gè)大膽的說法?，F(xiàn)在只有 Safari 兼容這種 CSS 趨勢，就像 LCH 一樣。

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

「瀏覽器支持：15.38%」

CSS變量

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

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

「瀏覽器支持：95.81%」

視口單位

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

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

幸運(yùn)的是CSS 現(xiàn)在支持新的相對長度和視口規(guī)范。其中一些是“vw”、“svw”、“l(fā)vw”和“dvw”。這些測量值是小視口尺寸、大視口尺寸和動(dòng)態(tài)視口尺寸以及 UA 默認(rèn)視口尺寸寬度的 1%。

「瀏覽器支持率：97.53%」

級聯(lián)層

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

圖片

級聯(lián)層為開發(fā)人員提供了主題、框架和設(shè)計(jì)方面更好的靈活性，以充分利用級聯(lián)系統(tǒng)。與以啟發(fā)式為中心的原始級聯(lián)相比，級聯(lián)層提供對底層級聯(lián)邏輯的直接操作和管理。

「瀏覽器支持：87.57%」

內(nèi)容可見性

CSS 中的內(nèi)容可見性屬性有助于加快網(wǎng)頁上內(nèi)容的呈現(xiàn)速度，以便用戶可以在加載頁面其余部分時(shí)與內(nèi)容進(jìn)行交互。借助此屬性，開發(fā)人員可以命令瀏覽器頁面的哪一部分具有獨(dú)立的內(nèi)容。作為回報(bào)，它可以幫助瀏覽器通過延遲計(jì)算來優(yōu)化網(wǎng)頁內(nèi)容。

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

「瀏覽器支持：71.40%」

間隙

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

• Row-gap
• Column-gap

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

圖片

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