本文讲的是2017 年要去学的 3 个 CSS 新属性，
1. 特性查询（Feature Queries）
不久前，我写过一篇关于特性查询的文章 —— 《一个我十分期待的CSS特性 - the one CSS feature I really want》。如今果然出现了。除了 IE浏览器之外，所有主流浏览器（包括 Opera Mini）均已支持特性查询。
特性查询采用 @supports 规则，它使得我们可以将 CSS 代码包裹一个条件块中。只有当浏览器的用户代理（user agent）支持某个特定的 CSS 属性-值对时，该条件块中的样式代码才会生效。下面举个简单的例子来说：只有支持 display: flex 的浏览器才会应用 Flexbox 样式
@supports ( display: flex ) {
.foo { display: flex; }
}
另外，我们甚至可以使用像 and 和 not 这类操作符来创建更为复杂的特性查询。例如，检测一个浏览器是否只支持老式的 Flexbox 语法
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
兼容性
2. 栅格布局（Grid Layout）
CSS 栅格布局模块（CSS Grid Layout Module） 定义了一个用于创建基于栅格布局的系统。它和 弹性盒子布局模块（Flexbible Box Layout Module） 有些相似，但由于其专为页面布局而设计，因此拥有许多不同的特性。
显式定位元素
一个栅格由栅格容器（由 display: grid 所创建）和栅格项（子元素）组成。在 CSS 中，我们可以简单且显式地组织栅格项的位置及顺序，并独立于 markup 语言中元素的位置。
在《CSS栅格实现圣杯布局》这篇文章中，我演示了如何使用栅格布局模块来创建万恶的“圣杯布局”。
下列 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;
}
槽（Gutters）
我们可以使用 grid-row-gap，grid-column-gap，和 grid-gap 属性来为栅格布局明确地定义槽。这些属性接受一个<length-percentage> 数据类型 作为值，以表示内容区大小的相对百分比。
比如设置一个 5% 的槽，我们可以这样写
.hg {
display: grid;
grid-column-gap: 5%;
}
兼容性
CSS 栅格模块最早将在今年三月份被浏览器们支持。
3. 原生变量（Native Variables）
最后，原生 CSS 变量（层叠变量模块（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');
兼容性
关于兼容性？
如你所见，以上所有特性目前都没有被所有浏览器完全支持，那么我们如何在生产环境中舒服地用上他们呢？渐进增强（Progressive Enhancement）！去年的前端开发者大会上，我就曾就如何在 CSS 中进行渐进增强做过一次分享。点击下面可以看到
2017年有哪些 CSS 特性令你激动不已想要学习？
原文发布时间为：2017年2月3日
本文来自合作伙伴掘金，了解相关信息可以关注掘金网站。