几乎所有的网页设计师和前端交互师们都着迷于尝试新CSS技术的方法，并尝试突破CSS可以做的界限。 精心策划的CSS几乎可以控制设计的任何方面，并通过更清晰，更一致的代码为更好的整体用户体验做出贡献。
但是最近的趋势是什么技术？ 接下来你应该学什么？ 以下是我们对今年的CSS最新发展的一些想法。 看看有什么热门，并尝试一些新的CSS技巧，为你的下一个项目提供一个令人兴奋的优势。
1.响应（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）
有很多次你希望你可以控制滚动？ 对于内容性质比较多的站点来说，你一定希望用户一次可以完整的看到设计的某个部分。
CSS的滚动捕捉就是答案。 以下是Google对其的描述：
“CSS滚动捕捉功能允许Web开发人员通过声明滚动捕捉位置来创建良好控制的滚动体验。 分页物品和图像转盘是两个常用的例子。"
简而言之，这意味着你可以控制滚动点 - 垂直和水平（大多数只是桌面模式） - 以便用户准确地看到你想要的内容。
5.使用CSS测试浏览器支持（Test Browser Support with CSS）
CSS甚至可以帮助你确定某些浏览器是否支持新的CSS功能。
它植根于Feature Queries @supports规则，该规则允许你根据浏览器功能创建声明。 对于早于Internet Explorer 11的任何浏览器都不起作用，但是现在使用这些版本的浏览器的用户并没有太多。
总结
尝试使用新的CSS技术和学习新技巧可以带来很多乐趣 - 不过，不要因为它给你带来不必要的烦恼。 你今年想学什么？ 你将在哪里集中精力？
我们希望这些想法能够提供足够的灵感来帮助你入门。 祝你好运！
热门标签
