2020年你应该将掌握的5种CSS新技术

大多数网站设计师同前端开发人员一样沉迷于尝试新的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并学习新技巧可能是一件很有趣的事情，并且这样做可以使你脱颖而出。 你今年想学些什么？ 你准备在哪里集中精力？

我们希望这些想法能提供足够的启发来帮助你更好更快的入门。 祝好运！

图文来自：design shack 

由深圳网站建设公司-Clh翻译编辑整理