網頁設計師著迷于嘗試新CSS技術的方法，并突破了CSS可以做的界限。精心策劃的CSS幾乎可以控制設計的任何方面，并通過更清晰，更一致的代碼為更好的整體用戶體驗做出貢獻。
但是趨勢是什么技術？接下來你應該學什么？我們對今年的最新發展有一些想法。潛入，看看有什么熱門，并嘗試一些新的CSS技巧和技巧，為您的下一個項目提供一個令人興奮的優勢。
 
1.使CSS網格響應
 
您設計中的其他所有內容都具有響應性，請確保您的網格也不例外。最棒的是，使用CSS Grid有多種方法可以創建一個靈活的網格，無論設備大小如何，它總是呈現您想要的方式。
 
好消息是響應式CSS網格適用于大小相等或不相等的列。您可以使用不同的斷點，高度（下方）和項目展示位置。（這是非常酷的技術，包含了一些選項，可以為您提供所需的控制權。）
 
從分數（fr）單位開始，這是一個根據您的規則劃分開放空間的靈活單位。每個fr聲明都是一個列; 然后你可以添加間隙，你有一個網格。
 
2.使用可變字體
 
可變字體很新。它是一個單獨的文件，包含用戶查看設計所需的每種字體版本。
 
雖然沒有大量可變字體可供使用，但它正在增長，這就是我們在網絡上使用類型的地方。BBC上面的Doctor Who的新標識，甚至使用了定制的可變字體。
 
要使用可變字體，必須選擇支持該功能的字體和已實現font-variation-settings屬性的瀏覽器。（支持很好并且在不斷發展。）
 
3.創建文本動畫
 
從懸停更改到浮動或滾動頁面的單詞，CSS會影響用戶閱讀和使用文本元素的方式。
 
什么曾經只是一個靜態元素，可以動態顯示。對于那些沒有很多其他藝術元素吸引用戶的網站來說，這是一個非常受歡迎的選擇。
 
4.實現Scroll Snapping
 
有很多次你希望你可以控制滾動，對嗎？您希望用戶一次看到設計的某個部分。
 
CSS Scroll Snap就是答案。以下是Google對其的描述：
 
CSS Scroll Snap功能允許Web開發人員通過聲明滾動捕捉位置來創建良好控制的滾動體驗。分頁物品和圖像轉盤是兩個常用的例子。
 
簡而言之，這意味著您可以控制滾動點 - 垂直和水平（大多數只是桌面模式） - 以便用戶準確地看到您想要的內容。
 
5.使用CSS測試瀏覽器支持
CSS甚至可以幫助您確定某些瀏覽器是否支持新的CSS功能。
 
它植根于Feature Queries @supports規則，該規則允許您根據瀏覽器功能創建聲明。一個警告是，這對于早于Internet Explorer 11的任何東西都不起作用，但是現在這個瀏覽器上沒有太多用戶。
 
了解更多：您可以獲取代碼片段并理解語法并從Mozilla獲取示例。
 
CSS網格資源
CSS Grid Layout是目前最受關注的內容之一。如果你不在循環中，那么就該開始學習了。
 
“CSS Grid是一個強大的工具，允許在網絡上創建二維布局，” Jonathan Suh在其豐富的資源指南中進行了描述。
 
結論：
 
玩CSS和學習新技巧可以帶來很多樂趣 - 如果它不會讓你拉扯你的頭發。你今年想學什么？你在哪里集中精力？
 
我們希望這些想法能夠提供足夠的靈感來幫助您入門。祝好運！