2017年要學習的3個CSS新特性
新年快樂！ :confetti_ball:
隨著新一年的到來，我們可以學習的干活又多了好多。新特性雖然有很多，但有三個是今年最讓我激動不已的。
1. Feature Queries
之前我寫過了一篇關于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; }
}
支持情況
2. 網格布局
CSS網格布局模塊 定義了一個用來創造基于網格的布局系統。它和 彈性盒子布局模塊 相似，但其是專門為頁面布局設計的，所以也會有許多不同的特性。
清晰的子項布置
網格是由網格容器（通過 display: grid 構建）和網格子項（其為網格的子元素）組成。在我們的CSS里，我們可以簡單明了的組織網格子項的位置和次序，而不受其在代碼中位置的影響。
例如，在我的文章 《使用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;
}
間隔
我們使用 grid-row-gap ， grid-column-gap ， 和 grid-gap 屬性可以去具體地定義間隔。這些屬性接受 `` data type 作為值，其比例與內容區域的尺寸一致。
例如，為了有5%的間隔，你可以這樣寫：
.hg {
display: grid;
grid-column-gap: 5%;
}
支持情況
CSS網格模塊最早今年三月會在瀏覽器上可用。
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');
支持情況
支持情況怎么樣呢？
正如你所見，目前這些功能并沒有在所有瀏覽器上獲得充分支持，那么我們怎么在產品中使用才合適呢？額，當然是漸進增強！去年我就在前端大會上發表了關于怎么把漸進增強運用到CSS中的演講。你可以在下面看到當時的演講：
2017又有什么CSS特性是會讓你激動不已的呢？
來自：http://www.zcfy.cc/article/3-new-css-features-to-learn-in-2017-2360.html