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

来源:原创时间:2020-10-12浏览:370

大多数网站设计师同前端开发人员一样沉迷于尝试新的CSS技术并希望突破目前CSS可以做的事。 通过精心设计的、定制类的CSS可以控制设计中的几乎任何方面,并通过更干净,更一致的代码为更好的总体用户体验做出贡献。


但是什么技术正在发展? 接下来你应该学习什么呢? 我们对今年最新发展的技术有一些想法。 让我们来深入研究一下,看看有什么热门,然后尝试一些新的CSS技巧和技术,为你的下一个项目带来令人兴奋的优势。


1.使用更具响应性的CSS网格技术(Make CSS Grids Responsive)

Make CSS Grids Responsive

设计中的其他所有内容都应该是响应式的,请确保你的网格也不例外。 你需要知道,有多种方法可以使用通过CSS设置的网格更加灵活,并始终以统一且和谐的方式呈现,而与设备大小无关。

响应式CSS网格可用于大小相等或不相等的列。 你可以使用不同的断点,高度(下)和项目放置位置(这是一项非常酷的技术,其中包含各种选项,可让你对设计进行控制)。

从分数(fr)单位开始,分数是一种灵活的单位,可以根据你的规则划分出开放空间。 每个fr声明都是一列; 然后你可以添加间隙组织一个网格。

Make CSS Grids Responsive


2.使用可变字体(Use Variable Fonts)

Use Variable Fonts

可变字体目前属于一种比较新的技术。 它是一个文件,其中包含用户查看你的设计所需的每种字体版本。

尽管没有大量可使用的可变字体,但它的数量正在增长,这就是我们在网络上使用字体的地方。 上面BBC的Doctor Who的新徽标甚至使用了定制的可变字体。

要使用可变字体,必须选择支持该功能的字体以及通过已实现font-variation-settings属性支持的浏览器(目前在浏览器的支持方面尽管有一些阻碍,但是整体上很好并且正在不断增长)。

Use Variable Fonts


3.创建文字动画(Create Text Animations)

Create Text Animations

从悬停效果到浮动或滚动的单词,CSS正在影响用户阅读和使用文本元素的方式。

曾经只是静态元素的文字现在可以具有动态显示的功能。 对于没有太多其他艺术元素来吸引用户的网站设计来说,这是一个非常受欢迎的选择。

Create Text Animations


4.实时滚动捕捉(Implement Scroll Snapping)

Implement Scroll Snapping

对于大多数用户来说都希望自己可以控制滚动。 你希望用户一次看到设计的特定部分。

简而言之,这意味着你需要支持可以在垂直和水平方向上控制滚动点(主要是桌面模式),以便用户确切地看到你想要他们了解的内容。

Implement Scroll Snapping


5.使用CSS测试浏览器支持(Test Browser Support with CSS)

CSS甚至可以帮助你测试并确定某些浏览器是否支持新的CSS技术或功能。

它基于“Feature Queries”规则,该规则允许你可以基于浏览器功能创建声明。 请注意,此功能不适用于Internet Explorer 11之前的任何版本,但如今使用该浏览器的用户并不多。


总结

了解CSS并学习新技巧可能是一件很有趣的事情,并且这样做可以使你脱颖而出。 你今年想学些什么? 你准备在哪里集中精力?

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




相关推荐