大多數(shù)網(wǎng)站設(shè)計(jì)師同前端開發(fā)人員一樣沉迷于嘗試新的CSS技術(shù)并希望突破目前CSS可以做的事。 通過精心設(shè)計(jì)的、定制類的CSS可以控制設(shè)計(jì)中的幾乎任何方面，并通過更干凈，更一致的代碼為更好的總體用戶體驗(yàn)做出貢獻(xiàn)。


但是什么技術(shù)正在發(fā)展？ 接下來你應(yīng)該學(xué)習(xí)什么呢？ 我們對今年最新發(fā)展的技術(shù)有一些想法。 讓我們來深入研究一下，看看有什么熱門，然后嘗試一些新的CSS技巧和技術(shù)，為你的下一個(gè)項(xiàng)目帶來令人興奮的優(yōu)勢。


1.使用更具響應(yīng)性的CSS網(wǎng)格技術(shù)（Make CSS Grids Responsive）



設(shè)計(jì)中的其他所有內(nèi)容都應(yīng)該是響應(yīng)式的，請確保你的網(wǎng)格也不例外。 你需要知道，有多種方法可以使用通過CSS設(shè)置的網(wǎng)格更加靈活，并始終以統(tǒng)一且和諧的方式呈現(xiàn)，而與設(shè)備大小無關(guān)。

響應(yīng)式CSS網(wǎng)格可用于大小相等或不相等的列。 你可以使用不同的斷點(diǎn)，高度（下）和項(xiàng)目放置位置（這是一項(xiàng)非常酷的技術(shù)，其中包含各種選項(xiàng)，可讓你對設(shè)計(jì)進(jìn)行控制）。

從分?jǐn)?shù)（fr）單位開始，分?jǐn)?shù)是一種靈活的單位，可以根據(jù)你的規(guī)則劃分出開放空間。 每個(gè)fr聲明都是一列； 然后你可以添加間隙組織一個(gè)網(wǎng)格。


2.使用可變字體（Use Variable Fonts）



可變字體目前屬于一種比較新的技術(shù)。 它是一個(gè)文件，其中包含用戶查看你的設(shè)計(jì)所需的每種字體版本。

盡管沒有大量可使用的可變字體，但它的數(shù)量正在增長，這就是我們在網(wǎng)絡(luò)上使用字體的地方。 上面BBC的Doctor Who的新徽標(biāo)甚至使用了定制的可變字體。

要使用可變字體，必須選擇支持該功能的字體以及通過已實(shí)現(xiàn)font-variation-settings屬性支持的瀏覽器（目前在瀏覽器的支持方面盡管有一些阻礙，但是整體上很好并且正在不斷增長）。


3.創(chuàng)建文字動(dòng)畫（Create Text Animations）



從懸停效果到浮動(dòng)或滾動(dòng)的單詞，CSS正在影響用戶閱讀和使用文本元素的方式。

曾經(jīng)只是靜態(tài)元素的文字現(xiàn)在可以具有動(dòng)態(tài)顯示的功能。 對于沒有太多其他藝術(shù)元素來吸引用戶的網(wǎng)站設(shè)計(jì)來說，這是一個(gè)非常受歡迎的選擇。


4.實(shí)時(shí)滾動(dòng)捕捉（Implement Scroll Snapping）



對于大多數(shù)用戶來說都希望自己可以控制滾動(dòng)。 你希望用戶一次看到設(shè)計(jì)的特定部分。

簡而言之，這意味著你需要支持可以在垂直和水平方向上控制滾動(dòng)點(diǎn)（主要是桌面模式），以便用戶確切地看到你想要他們了解的內(nèi)容。


5.使用CSS測試瀏覽器支持（Test Browser Support with CSS）

CSS甚至可以幫助你測試并確定某些瀏覽器是否支持新的CSS技術(shù)或功能。

它基于“Feature Queries”規(guī)則，該規(guī)則允許你可以基于瀏覽器功能創(chuàng)建聲明。 請注意，此功能不適用于Internet Explorer 11之前的任何版本，但如今使用該瀏覽器的用戶并不多。


總結(jié)

了解CSS并學(xué)習(xí)新技巧可能是一件很有趣的事情，并且這樣做可以使你脫穎而出。 你今年想學(xué)些什么？ 你準(zhǔn)備在哪里集中精力？

我們希望這些想法能提供足夠的啟發(fā)來幫助你更好更快的入門。 祝好運(yùn)！