本文转载自：众成翻译
译者：dainiel
链接：http://www.zcfy.cc/article/2360
原文：https://bitsofco.de/3-new-css-features-to-learn-in-2017/
新年快乐！ 🎊
随着新一年的到来，我们可以学习的干活又多了好多。新特性虽然有很多，但有三个是今年最让我激动不已的。
1. Feature Queries
译者注：因为media query一样，大家习惯不翻译，所以这里也不直译为：特性查询
之前我写过了一篇关于Feature Queries的文章《我真正想要的CSS特性》。好吧，现在它已经来了！（包括Opera Mini在内的）所有主流浏览器，除了IE，都已经支持这个特性了。
Feature Queries，使用@supports规则，可以让大家在把CSS写在特定的代码块中，但是只有在当前用户代理支持特定的CSS键值对时其才会生效。这里有个简单的例子，对于支持display: flex的浏览器，下面的Flexbox的样式才会生效：
@supports ( display: flex ) {
.foo { display: flex; }
}
此外，使用像and 和 not的操作符，我们可以创造出更为复杂的feature queries。例如，我们可以检测出浏览器是否只支持旧的Flexbox语法：
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
支持情况
[
Data on support for the css-feature queries feature
](http://caniuse.com/#feat=css-featurequeries
2. 网格布局
CSS网格布局模块定义了一个用来创造基于网格的布局系统。它和弹性盒子布局模块相似，但其是专门为页面布局设计的，所以也会有许多不同的特性。
清晰的子项布置
网格是由网格容器（通过display: grid构建）和网格子项（其为网格的子元素）组成。在我们的CSS里，我们可以简单明了的组织网格子项的位置和次序，而不受其在代码中位置的影响。
例如，在我的文章 《使用CSS网格的圣杯布局》中，我演示了我们可以怎么使用这个模块来书写出臭名昭著的“圣杯布局”。
Holy Grail Layout Demo
下面的CSS只有31行：
.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }
.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px
1fr
30px;
min-height: 100vh;
}
@media screen and (max-width: 600px) {
.hg {
grid-template-areas: "header"
"navigation"
"main"
"ads"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px
50px
1fr
50px
30px;
}
}
灵活的长度
CSS网格模块引入了一个新的长度单位fr，其表示在网格容器里剩余空间的部分。
这就可以让我们根据网格容器的可用空间来分配网格子项的宽高。例如，在圣杯布局中，我想让 main区域占据除两个边栏外的空间。为了实现这个，我简单地写了：
.hg {
grid-template-columns: 150px 1fr 150px;
}
间隔
我们使用grid-row-gap， grid-column-gap， 和 grid-gap 属性可以去具体地定义间隔。这些属性接受`` data type作为值，其比例与内容区域的尺寸一致。
例如，为了有5%的间隔，你可以这样写：
.hg {
display: grid;
grid-column-gap: 5%;
}
支持情况
CSS网格模块最早今年三月会在浏览器上可用。
Can I Use css-grid?
3. 原生变量
终于等到你，CSS本地变量(Custom Properties for Cascading Variables Module)。此模块引入了一个方法，可以用其创造作为CSS属性值的自定义变量。
例如，如果我们有一个在样式表里多处使用的主题颜色，我们可以把其提取出来放入一个变量中，同时引用此变量，而不是把实际值去写好多遍。
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
这和我们之前用像SASS这样的CSS预处理器很像，但是CSS变量有浏览器原生支持的优势。这也就意味着其可以实时更新。例如，为了改变上面的--theme-colour值，我们需要做的是：
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
支持情况
Can I Use css-variable?
支持情况怎么样呢？
正如你所见，目前这些功能并没有在所有浏览器上获得充分支持，那么我们怎么在产品中使用才合适呢？额，当然是渐进增强！去年我就在前端大会上发表了关于怎么把渐进增强运用到CSS中的演讲。你可以在下面看到当时的演讲：
JavaScript Array Methods - Mutator
2017又有什么CSS特性是会让你激动不已的呢？
网友评论