在本文中，了解 2023 年最值得關(guān)注的 15 個(gè) CSS 趨勢(shì)。這些趨勢(shì)將幫助您通過(guò)釋放 CSS 的力量來(lái)創(chuàng)建視覺(jué)上令人驚嘆的響應(yīng)式設(shè)計(jì)。
CSS 如何幫助您的網(wǎng)站？
CSS 代表層疊樣式表。它是一種用于創(chuàng)建樣式表的語(yǔ)言，用于描述用標(biāo)記語(yǔ)言編寫(xiě)的文檔的布局和格式。它與 HTML 一起修改在線頁(yè)面和用戶界面的外觀。任何 XML 文檔類型，包括純 XML、SVG 和 XUL，都可以與它一起使用。
借助 CSS，您可以更改舊的 HTML 編寫(xiě)的文檔或使用 CSS 代碼創(chuàng)建新樣式。以下是 CSS 為您的網(wǎng)站帶來(lái)的一些好處。
- 之前網(wǎng)站中的字體、顏色、背景等標(biāo)簽都是重復(fù)的，CSS就是為了解決這個(gè)問(wèn)題而開(kāi)發(fā)的。幫助您在多個(gè)網(wǎng)頁(yè)上創(chuàng)建一致的設(shè)計(jì)，并提供在不同元素和網(wǎng)站上使用樣式的可重用性。CSS 提供比純 HTML 更具體的屬性來(lái)定義網(wǎng)站的外觀。提供視覺(jué)提示以提高網(wǎng)站的可訪問(wèn)性。通過(guò)清晰簡(jiǎn)潔地呈現(xiàn)數(shù)字內(nèi)容來(lái)提高網(wǎng)站搜索引擎優(yōu)化。
2023 年 CSS 趨勢(shì)
現(xiàn)在您已經(jīng)了解了 CSS 的要點(diǎn)及其優(yōu)點(diǎn)，讓我們從 2023 年 CSS 最佳趨勢(shì)列表開(kāi)始。
注意：此處的瀏覽器兼容性數(shù)據(jù)取自 CanIUse。
1.CSS網(wǎng)格
CSS 網(wǎng)格是一個(gè)功能強(qiáng)大的布局模塊，可讓您創(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í)覆蓋某些部分。
瀏覽器支持：95.91%
2.CSS書(shū)寫(xiě)模式
根據(jù)語(yǔ)言的不同，CSS 書(shū)寫(xiě)模式屬性會(huì)調(diào)整文本的對(duì)齊方式，以便可以從上到下或從左到右閱讀。例如，假設(shè)我們希望添加一些從左到右、從上到下閱讀的文本。
這對(duì)于文本經(jīng)常垂直放置的語(yǔ)言（例如中文、日語(yǔ)或韓語(yǔ)）很有幫助。出于美觀原因，您可能希望在 CSS 趨勢(shì)的幫助下在英語(yǔ)中使用這種特性。
瀏覽器支持：97.7%
3. 滾動(dòng)捕捉行為
為了控制 Web 瀏覽器的 CSS 滾動(dòng)捕捉行為，CSS 提供了一組有價(jià)值的屬性。其中一些功能已經(jīng)擴(kuò)展，但更新的瀏覽器版本現(xiàn)在才可以訪問(wèn)其他功能。關(guān)于 CSS 趨勢(shì)的最好的一點(diǎn)是，只有三分之一的 CSS 用戶知道它。
使用scroll-snap-type屬性，您可以通過(guò)多種方式修改容器上的滾動(dòng)位置。開(kāi)發(fā)人員可以獲得更高的精度，而最終用戶則可以享受更流暢、更可控的用戶體驗(yàn)。
瀏覽器支持：95.89%
4. 容器查詢
CSS 尚未完全建立容器查詢，盡管它們會(huì)的。它們將對(duì)我們?nèi)绾慰创憫?yīng)式設(shè)計(jì)產(chǎn)生重大影響。基本概念是，除了視口和媒體之外，您還可以根據(jù)父容器的大小指定斷點(diǎn)。
它將包括根據(jù)出現(xiàn)在用戶界面嵌套層中的各種容器的尺寸來(lái)調(diào)整布局。CSS 容器查詢不是 CSS 趨勢(shì)，而是一項(xiàng)重大舉措，可能會(huì)引發(fā)一波 UI 增強(qiáng)浪潮。
瀏覽器支持：?76.94%
5.新調(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 顏色描述符包括人類可以感知的所有顏色，這是一個(gè)大膽的說(shuō)法。現(xiàn)在只有 Safari 兼容這種 CSS 趨勢(shì)，就像 LCH 一樣。
LCH：它代表亮度、色度和色調(diào)，以拓寬可用顏色的調(diào)色板而聞名。Safari 僅支持 LCH。
瀏覽器支持：?15.38%
6.CSS變量
CSS變量，也稱為CSS自定義屬性，自2015年以來(lái)一直是市場(chǎng)上流行的CSS趨勢(shì)，目前正受到越來(lái)越多CSS用戶的關(guān)注。CSS 變量允許您在 HTML 代碼中的其他位置存儲(chǔ)和使用值。它有助于消除代碼中的冗余，提高靈活性，提高代碼的可讀性。
瀏覽器支持：?95.81%
7. 視口單位
對(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 用戶。
謝天謝地，CSS 現(xiàn)在支持新的相對(duì)長(zhǎng)度和視口規(guī)范。其中一些是“vw”、“svw”、“l(fā)vw”和“dvw”。這些測(cè)量值是小視口尺寸、大視口尺寸和動(dòng)態(tài)視口尺寸以及 UA 默認(rèn)視口尺寸寬度的 1%。
瀏覽器支持率：?97.53%
8. 級(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)邏輯的直接操作和管理。
這種 CSS 趨勢(shì)將通過(guò)向級(jí)聯(lián)添加第二層來(lái)定義樣式變體，從而確保組件不會(huì)始終遵循基本樣式。相反，組件是根據(jù)寫(xiě)在層上的規(guī)則和已建立的層層次結(jié)構(gòu)生成的。
瀏覽器支持：?87.57%
9. 內(nèi)容可見(jiàn)性
CSS 中的內(nèi)容可見(jiàn)性屬性有助于加快網(wǎng)頁(yè)上內(nèi)容的呈現(xiàn)速度，以便用戶可以在加載頁(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)容。
內(nèi)容可見(jiàn)性取決于 CSS Containment Spec 的原語(yǔ)。到目前為止，只有 Chromium 85 支持內(nèi)容可見(jiàn)性屬性；但是，所有主要瀏覽器都支持 CSS Containment Spec。
瀏覽器支持：?71.40%
10. 差距
Gap 屬性是一種新興的 CSS 趨勢(shì)，有助于定義行和列之間的間隙，正式稱為網(wǎng)格間隙。它可作為以下特性的替代品。
- 行距柱間隙
我們利用具有單個(gè)值的間隙屬性來(lái)指示行和列之間的相同空間。如果行和列之間的距離存在差異，我們將使用具有兩個(gè)值的間隙函數(shù)，首先定義行之間的距離，然后定義列之間的距離。您可以利用 row-gap 和 column-gap 這兩個(gè)屬性來(lái)使代碼更加透明和易于理解。
在gap屬性之前，設(shè)計(jì)者需要使用具有一定限制的margin屬性，例如在元素和容器邊緣之間添加縮進(jìn)。相反，gap 屬性允許您指定項(xiàng)目之間的縮進(jìn)，而無(wú)需使用此類技巧和花招，而僅依賴于語(yǔ)言的基本構(gòu)造。
瀏覽器支持率：?93.29%
11. 對(duì)象視圖框
我們列表中的另一個(gè) CSS 趨勢(shì)是 object-view-box 屬性。它使網(wǎng)頁(yè)僅顯示圖像或視頻的指定區(qū)域。它的結(jié)果與 viewBox SVG 屬性大致相當(dāng)。當(dāng)您僅針對(duì)不同元素或以不同分辨率顯示圖像或視頻的一部分時(shí)，object-view-box 屬性將派上用場(chǎng)。此外，它還可用于平移和縮放圖片和電影。
在 object-view-box 屬性出現(xiàn)之前，圖像或視頻的裁剪問(wèn)題必須通過(guò)使用“overflow: hide ;?”在包裝元素內(nèi)放置內(nèi)容并調(diào)整其大小來(lái)解決。屬性。可以通過(guò)在代碼中添加頂部、底部、左側(cè)和右側(cè)值來(lái)完成。
瀏覽器支持：?66.99%
12. 插圖
Inset 屬性有助于設(shè)置元素與父元素之間的距離。它取代了四個(gè)屬性：頂部、右側(cè)、左側(cè)和底部，并允許您在單個(gè)命令中從所有四個(gè)側(cè)面查看元素的插入。CSS Inset 屬性需要添加所有四個(gè)命令來(lái)進(jìn)行定位。
瀏覽器支持：??90.29%
13. 可變字體
可變字體允許將字體的多種變體集成到單個(gè)文件中，而不是為每種寬度、粗細(xì)或樣式使用單獨(dú)的字體文件。它是 OpenType 字體規(guī)范的演進(jìn)版本。
盡管可變字體可以像常規(guī)字體一樣使用，但它們可以提供更多功能。標(biāo)準(zhǔn)字體的 font-weight 屬性接受 100 到 900 之間的值，而對(duì)于可變字體，它接受 1 到 999 之間的任何整數(shù)。
雖然常規(guī)字體的 font-style 屬性接受正常和斜體兩個(gè)值，但對(duì)于可變字體，您可以為可變字體指定范圍從 -90 度到 90 度的傾斜角度。可變字體具有字體拉伸功能，范圍從 50%（對(duì)于窄字體）到 200%（對(duì)于寬字體），其中標(biāo)準(zhǔn)比例為 100%。另一個(gè)屬性是 font-optical-sizing 屬性，它根據(jù)大小改變字體的外觀。
瀏覽器支持：?94.89%
14. 文本溢出
在 CSS 中，text-overflow 屬性用于指示特定文本已溢出并且現(xiàn)在被隱藏。添加此屬性時(shí)，溢出的內(nèi)容將被修剪，并且自定義字符串或省略號(hào)將在顯示上可見(jiàn)。
使用 text-overflow 屬性時(shí)要記住的一件事是空白屬性必須為 nowrap，并且溢出屬性必須設(shè)置為隱藏。
瀏覽器支持：?98.95%
15. 比較函數(shù)
使用比較功能可以用更少的代碼構(gòu)建響應(yīng)式網(wǎng)站。它具有“clamp()”、?“min()”和“max()”等函數(shù)，用于定義上限和下限值，計(jì)算并比較提供給函數(shù)的輸入值，然后應(yīng)用計(jì)算出的財(cái)產(chǎn)價(jià)值。
- lamp() 函數(shù)：該函數(shù)需要三個(gè)參數(shù)：中心值、首選值和最大值。鉗位（）根據(jù)中心值計(jì)算屬性的值。
如果計(jì)算值介于最小值和最大值之間，則將中心值應(yīng)用于元素。如果估計(jì)值低于最小值或超過(guò)最大值，則將使用最小值或最大值。
min() 和 max() 函數(shù)：?min() 確定并應(yīng)用范圍中最小的值。類似地， max() 函數(shù)確定并應(yīng)用給定值范圍中的最大值。
瀏覽器支持率：?92.26%
如何測(cè)試 CSS 屬性的瀏覽器兼容性？
隨著 CSS 庫(kù)推出新功能和屬性，它為 Web 開(kāi)發(fā)人員帶來(lái)了新的日常挑戰(zhàn)，以確保網(wǎng)站瀏覽器兼容。必須檢查您用于網(wǎng)站的每個(gè) CSS 屬性是否在每個(gè)瀏覽器中正常工作并受支持。
結(jié)論
這些只是我們?cè)?2023 年可能會(huì)看到的幾個(gè) CSS 趨勢(shì)。雖然也可能出現(xiàn)其他趨勢(shì)，但遵循這些趨勢(shì)應(yīng)該會(huì)對(duì)新手有所幫助。向多列布局的過(guò)渡已經(jīng)全面展開(kāi)，隨著我們進(jìn)入 2023 年及以后，向響應(yīng)式界面的轉(zhuǎn)變將迅速加快。
我們?cè)谶@里只強(qiáng)調(diào)了 CSS 頂級(jí)趨勢(shì)中的最佳趨勢(shì)，但如果我們?cè)谶M(jìn)入下一個(gè)十年時(shí)出現(xiàn)其他趨勢(shì)，請(qǐng)不要感到驚訝。無(wú)論發(fā)生什么，有一件事是確定的：CSS 永遠(yuǎn)不會(huì)過(guò)時(shí)。設(shè)計(jì)師可能會(huì)改變他們的觀點(diǎn)，但它們永遠(yuǎn)不會(huì)完全消失——這是一件好事！
以上就是15個(gè)CSS最佳趨勢(shì)，讓你的網(wǎng)頁(yè)項(xiàng)目一秒開(kāi)掛！的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
