2023 年值得關(guān)注的十個(gè) CSS 優(yōu)秀趨勢(shì)

作者：南玖 2023-06-29 15:41:40

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

前言

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

CSS Grid

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

子網(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書(shū)寫(xiě)模式

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

??????

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

「瀏覽器支持：97.37%」

??????

滾動(dòng)捕捉行為

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

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

圖片

「瀏覽器支持：95.32%」

圖片

容器查詢(xún)

CSS 尚未完全建立容器查詢(xún)，盡管它們會(huì)的。它們將對(duì)我們?nèi)绾慰创憫?yīng)式設(shè)計(jì)產(chǎn)生重大影響。基本概念是，除了視口和媒體之外，你還可以根據(jù)父容器的大小指定斷點(diǎn)。

語(yǔ)法如下：

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

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

「瀏覽器支持：87.42%」

??????

新調(diào)色板

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

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

「瀏覽器支持：87.71%」

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

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

「瀏覽器支持：15.38%」

CSS變量

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

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

「瀏覽器支持：95.81%」

視口單位

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

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

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

「瀏覽器支持率：97.53%」

級(jí)聯(lián)層

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

圖片

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

「瀏覽器支持：87.57%」

內(nèi)容可見(jiàn)性

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

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

「瀏覽器支持：71.40%」