网页设计师总是很着迷于尝试新的CSS技术，希望可以突破CSS的界限以及给他们的网站设计带来更多新的交互体验以及视觉亮点。 精心策划的CSS几乎可以控制设计的任何方面，并通过更清晰，更一致的代码为更好的整体用户体验做出贡献。
但是最新的趋势技术是什么呢？ 接下来你应该学什么呢？ 我们对今年有最新发展的一些CSS技术有一些自己的想法。 继续阅读，看看有什么热门，并尝试一些新的CSS技巧和技术，为你的下一个项目提供一个令人兴奋的优势。
1.响应式CSS网格技术（Make CSS Grids Responsive）
设计中的其他所有内容都具有响应性，请确保你的网格也不例外。 你可以通过使用CSS Grid的多种方法来创建一个灵活的网格，无论设备大小如何，它总是会以你想要的方式呈现。
响应式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 @supports规则，该规则允许你根据浏览器功能创建声明。 需要注意的一点是，新的CSS技术对于早于Internet Explorer 11的任何浏览器都不具有兼容性，但是放心的是，现在这个版本以下的浏览器几乎没有太多的用户。
总结
尝试CSS和学习新技巧可以带来很多乐趣（如果新技术不至于让你抓狂的话）。 你今年想学什么？ 你整在哪个领域或技术上集中精力？
我们希望这些想法能够提供足够的灵感来帮助你入门。 祝好运！
----图文来自：design shack