2019年CSS的7大趋势与发展

翻译 | web前端开发

原文 | https://1stwebdesigner.com/7-top-css-trends-for-2019/

随着时间的推移，网页设计越来越具有创新性。网页不仅仅只是显示信息，而是艺术作品，它具有复杂的动画，独特的布局和微互动。这些东西都可以通过CSS实现。

CSS为普通，枯燥的网页提供了风格，并使所有能使网站内容与用户进行互动。2019年为网页设计带来了许多新的视野，而这7个关于CSS的发展趋势，将会定义CSS现在与未来的发展方向。

01、CSS Grid

基于网格的布局，目前主流标准是Flexbox。事实上，在2018年底的时候，Chrome上近83％的页面加载使用了Flexbox。但是有一个新的竞争者已经到来。

这个新的竞争者就是Grid。它很年轻，大约有2.25％的页面加载时在使用它，但它人气一直在飙升中，在2018年初页面加载只有0.25％。

CSS Grid会比Flexbox更好。Flexbox可让您控制垂直或水平对齐，但不能同时控制两者。但CSS Grid可以。

很多CSS专家认为，它不受欢迎的原因是因为很多网站没有使用它。但上面的数据基于页面视图，而不是使用Grid的原始页面数。现在网站主要还是采用Flexbox。

2019 CSS Grid继续增长，主要是因为它提供了一定程度的创作自由。

02、CSS Writing Mode

并非所有语言都是从左到右书写和阅读的。对于其他方向的语言，您可以使用写入模式CSS属性。

从上到下或从右到左流动文本并调整水平和垂直值。您甚至可以垂直侧向显示文本，旋转特定设计的文本以及混合脚本。

03、Mobile Animations

网站将开始使用越来越多的动画加载图标，设计有限的页面加载等，以吸引用户的注意力。

YouTube热门网站就是一个例子。打开YouTube移动应用并滚动视频。如果您停一秒钟，视频将自动播放并关闭声音并显示字幕。

动画也可用作动作或任务的指示符。动画按钮和列表也将变得普遍。

04、流行框架（Bulma，Tailwind，Bootstrap 4等）

CSS框架已经存在了一段时间，但它们近年来才越来越受欢迎。

Awwwards将框架定义为：

“框架是处理常见问题的一套标准化概念，实践和标准，可以作为参考，帮助我们处理和解决类似性质的新问题。”

随着我们转向更具移动性的网络，框架正在进行调整以进行补偿。样式和设计正在发生变化，动画和动作变得越来越普遍，对简单性和最终用户体验的关注比以往任何时候都更加重要！

2019年，许多精心设计的框架正在带头，帮助开发人员和设计人员以前所未有的速度发展。2019年在网络上使用的一些最着名的框架：

• 基础 - 响应式，移动优先框架，用作企业解决方案;

• Bootstrap 4  -  Bootstrap是全球最大的CSS框架之一，版本4带有颜色方案和实用程序类的新功能；

• 物化 - 流行的框架专注于材料设计风格;

05、单页，实验导航

随着社交网络的发展，很多人拥有了自己的个人主页，更多的用户转向使用更简单的解决方案和单页选项，将其发送到其他位置，获取浏览量。

常见例子包括：

• Linktree  - 简单页面，包含社交，产品等链接;

• Carrd  - 简单，免费，完全响应的单页网站，适用于任何事物;

• About.me  - 更专业的投资组合网站，类似于LinkedIn，但有创造空间;

• Instapage  - 面向企业和初创公司的顶级登录页面构建器;

这些单页网站正在进一步采用CSS和样式的创造性使用来增强体验。Next Web强调了“大型和实验性导航”作为他们在2019年无法隐藏的“十大激动人心的网页设计趋势”之一。那么为什么人们会转向这些有趣的布局呢？

因为通过聚焦的大按钮和导航，用户可以立即点击所需的位置。无论是商店，带有小时/细节的信息页面，还是只是一个新的视频/歌曲。

越来越多的网站被设置为公司，个人或团体发送流量，然后分发的指示点。音乐家使用Linktree和其他服务在所有流媒体平台上分享他们的新歌，并在此期间减少联盟营收。

06、可变字体

由Carrie Cousins为Designmodo的“2019年十大网页设计和UI趋势”突出显示，可变字体被定义为“主要样式的集合，具有一个中央'默认'主人（通常是常规字体样式）和多个注册”轴“ 它将中央主人与其他主人联系起来。

例如，Weight轴可能会将Light样式主文件连接到默认样式并连接到Bold样式主文件。可以沿此轴定位的各个样式称为“实例”。

这意味着字体在设备和平台之间响应更快，对接更无缝。您可以更轻松地缩放字体的宽度，大小和其他方面，而无需从字体粗细跳转到字体粗细或完全切换字体。

你可以在GitHub上查看变量字体'Amstelvar'的示例。另请，阅读有关可变字体的完整分析以及它们如何从Google更改网页。

07、滚动捕捉

最后但并非最不重要的是，滚动捕捉是一种相对较新的技术，用于将用户捕捉到某些滚动点。

您可以使页面以递增方式滚动，而不是沿页面向下或从左向右移动。

这种方法的流行用途是用于浏览页面上的产品或详细信息，滚动书籍/阅读体验，以及使用增量信息块向下滑动页面。

CSS Tricks上提供了一些有关CSS Scroll Snapping的精彩实例（地址：https://css-tricks.com/practical-css-scroll-snapping/）。

该实例提供了有关浏览器支持，最佳实践以及应该用于确保滚动捕捉按预期工作的属性的信息。

想知道滚动捕捉的工作原理吗？你可以在Webkit上查看这些示例（地址：https://webkit.org/demos/scroll-snap/）。

总结

关于2019年CSS的7大趋势和发展的总结归类，你最喜欢的趋势是什么？