资讯

精准传达 • 有效沟通

从品牌到营销,从策略到执行的一站式服务

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

来源:博瑞思网站建设公司 | 2020-01-07| 打印

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

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







----图文来自:design shack 

----由青岛网站建设公司-博瑞思翻译编辑整理,为您提供更多有关青岛网站建设网站设计网页设计及其他互联网应用服务


—— 博瑞思微信公众号 ——

Tag标签热门标签

    无标签
十三年 行业经验

多一份参考,总有益处

联系博瑞思,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:0532-6898-5151 / 大客户专线:18615320368