2020 年 CSS 的 5 个预测

差距

预测：样式表中的边距将随着样式表中间隙的增加而下降

将间距所有权移交给父容器，可以将间距逻辑集中到一处，而不是分散在各个子容器中。间距随 CSS Grid 一起出现，让我们大开眼界，现在已成为 Flexbox 规范的一部分。我预见到 2020 年，间距将成为我们在 Web 上设置间距的主要方式。此外，Flexbox 网格系统也将转向基于间距的语法。

逻辑属性

预测：margin/padding/border 属性会下降，而逻辑属性则会上升

你们所有人都将在 2020 年进入新的维度：块和内联维度。😂

既然全面支持逻辑属性，您的团队完全可以调整他们的肌肉记忆来适应新的关键字。切换到逻辑属性语法，团队可以获得太多好处。我调整习惯所花的时间比我想象的要少得多，所以就这么做吧！

以下是为大家准备的内容的简短介绍：

• 高度/宽度👉块大小/内联大小
• 边距/填充 👉 边距块/边距内联 & 填充块/填充内联
• 边框 👉 border-block/border-inline
• 溢出 👉 overflow-block/overflow-inline
• 文本对齐👉开始/结束
• 浮动👉块启动/内联启动/等

子网格

预测：subgrid 将取代 flexbox hacks 和 javascript 干预

Firefox本周刚刚发布了 subgrid ！2020 年，其他浏览器也需要加快步伐，支持它。这是 Web 网格生态系统的一大亮点。这注定是另一个将在 2020 年对 CSS 网格框架产生重大影响的功能。

媒体查询

预测：更多人喜欢-*媒体查询，设计师使用率更高

2019 年，网页上引入了操作系统级别的偏好设置。这些功能受到了用户和开发者的一致好评，而我预计 2020 年这种势头不会减弱。目前已经有更多规格正在制定中，并且您已经可以在操作系统级别预览某些功能。Windows 在这些方面确实处于领先地位。

以下是一些即将出现的现象的预览：

• 偏好对比
• 倾向于降低透明度
• 强制颜色
• 光照水平
• 可折叠设备

胡迪尼

预测：将发布更多绘画/布局/动画作品

谁不想教 CSS 新技巧呢！？过去几年，我们已经见识过许多出色的 Paint Worklet，而且我预计这种势头不会减弱。期待 2020 年会有更多有趣、有意义的 Paint Worklet 被创造出来。当然，动画 Worklet 和布局 Worklet 也同样值得期待。Houdini 是网络上最具实验性和高性能的视觉效果处理工具，听起来是不是很有趣？

这也是“偏离主线”的另一个趋势，我预测它将在 2020 年变得重要并不断上升。这个预测在多个层面上都很有趣，因此获得了一些双重交叉点。

万福玛利亚/危险的预测

最后，我想说一句，我认为有人会开发一个 CSS 包管理器。它将分发并使其可供使用：传统的 CSS 文件、CSS-in-JS 模块、Houdini 工作单元等等。就像 NPM 使 JavaScript 代码片段可搜索、可共享、可消费一样，CSS 也将会有一个这样的包管理器。

荣誉提名

以下是我发现的正在渗透和/或一直很热门的 CSS 内容：

• 自定义属性
• 原子 CSS-in-JS
• 设计令牌