8102年，这些 CSS 特性还没用上？

- 2018年的文，搬运存档用 -

讲个鬼故事，还有 160 天就要 2019 了

只有两个，网格布局和 CSS 变量。已有需求用起来了。

网格布局

CSS Grid 仿佛是在这一年持续爆炸，CSS 会议不提一提网格布局都不好意思（当然也有 CSS 更新太慢的原因）。和 Flexbox 的从 2009 年发布第一版草案到 2015 年终于进入 W3C lv1 候选经历相似，2011 年提出的 Grid 草案，到了 2017 年才得到主流浏览器的默认支持。（CSS 新特性的难兄难弟…）

Grid 主要用于多行多列的网格布局，弥补了当年 Flexbox 只能在单个方向上布局的遗憾：

兼容性如下：

在 iOS 上的兼容性较差，不过安卓平台 / X5 环境下是可以用起来了。为了兼容考虑一般使用 @supports，回退方案是 Flexbox。以手Q阅读中的充值页面为例：

网格布局中，最基本的语法就是先固定好某一个方向格子的个数和比例，在另一个方向上自适应内容：

grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: 200px;

还能根据实际情况自动填充空间：

甚至能在布局时给每个区域命名，通过区域的名字将结构和布局联系到一起：

网格布局是一个全新的布局理念，我们在使用它的时候思考方式会和平时的布局有些不同，应该说会更像 CSS 最开始的责任 — 排版。具体的感受还需要大家真切使用过后才能体会。

MDN 的文档 CSS Grid Layout 和 Grid 指南都能提供一些帮助。

CSS Variables

CSS 预编译语言最受欢迎的特性之一就是变量，代码健壮性、可维护性、语义性等等有点都基于变量的存在。从（xian）前（zai） CSS 作为“编程语言”的存在一直受人质疑，它天然没有变量的劣势也为人诟病。

在 2012 年 W3C 就提出了 CSS 变量的草案，但彼时只有 Chrome 和 FF 实现了；在 2014 年 CSS 变量的语法得到进一步优化，FF 修改了底层实现，跟随草案的脚步，不过此时 Chrome 表示自己要等语法稳定下来再说，微软冷眼旁观中。直到 2015 年大部分主流平台尚未是想 CSS 变量。不过到了 2016 年除 Edge 外的平台都实现这一特性。 — 翻译自CSS Variables — No, really!

到今天，移动端的 CSS 变量的全球支持率超过了 90%，TBS 内核也全面支持。不过 iOS 9.1 (不包括)以下和安卓 4.4.4 (包括)以下并不支持这一特性，需要做好回退方案。

CSS 变量比起预编译语言中的变量最大的一点优势就在不需要重复定义一遍属性，因为它是动态的。非常适合类似换肤这样的场景：

过往我们编写不同皮肤/主题时，不仅需要重复定义一系列色值，还需要把相关的背景色、字色等属性重新赋值一遍。有了 CSS 变量后，能以不同的 class 作为作用域，重新定义一遍变量值就行了：

CSS 变量的声明方式即两个横杠，需要指定作用域，作用域层级关系和 html 结构相关（此时真的很希望 nested 的原生实现），顶级作用域就是 ::root：

::root {
    --font-color: #222;
}

无论是在预编译语言中还是在原生 CSS 中，必须通过 var() 函数调用变量；CSS 变量也可以和 calc 等函数结合使用：

.info {
    margin-bottom: calc(4 * var(--grid-gap));
    color: var(--font-color);
}

当然最厉害的还是，是可以通过 getProperty 和 setProperty 改变 CSS 变量，一些动画不再需要 JS 更新内联样式，而是直接更新样式变量完成：

const container = document.querySelector('.container');
container.addEventListener('click', evt => {
  container.style.setProperty('--clickX', `${evt.clientX}px`);
  container.style.setProperty('--clickY', `${evt.clientY}px`);
});

更多相关知识可以访问 MDN文档 或者 CSS 自定义属性系列。

参考资料

1. Flexbox History
2. Getting started with CSS Grid Layout