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


但是什么技術正在發展？ 接下來你應該學習什么呢？ 我們對今年最新發展的技術有一些想法。 讓我們來深入研究一下，看看有什么熱門，然后嘗試一些新的CSS技巧和技術，為你的下一個項目帶來令人興奮的優勢。


1.使用更具響應性的CSS網格技術（Make CSS Grids Responsive）



設計中的其他所有內容都應該是響應式的，請確保你的網格也不例外。 你需要知道，有多種方法可以使用通過CSS設置的網格更加靈活，并始終以統一且和諧的方式呈現，而與設備大小無關。

響應式CSS網格可用于大小相等或不相等的列。 你可以使用不同的斷點，高度（下）和項目放置位置（這是一項非常酷的技術，其中包含各種選項，可讓你對設計進行控制）。

從分數（fr）單位開始，分數是一種靈活的單位，可以根據你的規則劃分出開放空間。 每個fr聲明都是一列； 然后你可以添加間隙組織一個網格。


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



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

盡管沒有大量可使用的可變字體，但它的數量正在增長，這就是我們在網絡上使用字體的地方。 上面BBC的Doctor Who的新徽標甚至使用了定制的可變字體。

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


3.創建文字動畫（Create Text Animations）



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

曾經只是靜態元素的文字現在可以具有動態顯示的功能。 對于沒有太多其他藝術元素來吸引用戶的網站設計來說，這是一個非常受歡迎的選擇。


4.實時滾動捕捉（Implement Scroll Snapping）



對于大多數用戶來說都希望自己可以控制滾動。 你希望用戶一次看到設計的特定部分。

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


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

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

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


總結

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

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