原文：https://bitsofco.de/3-new-css-features-to-learn-in-2017/
譯文：http://caibaojian.com/3-new-css-features-to-learn-in-2017.html
譯者：前端開發(fā)博客（蔡寶堅）
未經(jīng)許可，禁止轉(zhuǎn)載膘魄，如有不妥之處，歡迎指正蜀肘。
新年快樂吗蚌！
隨著新的一年到來科吭，我們有一整套新的東西要開始學習。雖然今年的新特性有很多浑此，但有3個新的特性是最令我激動不已的累颂。
1.Feature Queries
前段時間，我寫過關(guān)于Feature Queries的一篇文章凛俱，叫“我最想要的CSS特性之一”紊馏。好了，現(xiàn)在它已經(jīng)出現(xiàn)在這里了蒲犬。它支持除了IE瀏覽器之外的所有主流瀏覽器（包括Opera Mini）朱监。
Feature Queries，使用這個 @supports 規(guī)則原叮，允許我們包含CSS在一個條件塊赫编，但只有當前用戶客戶端支持一個特別的CSS property-value 才有效。舉個簡單的例子奋隶，只支持 display:flex 的瀏覽器才用Flexbox樣式擂送。
@supports ( display:flex ){
.foo { display:flex; }
}
另外，使用像 and 和 not 的操作符唯欣，我們可以創(chuàng)建更加復雜的特性查詢嘹吨。例如，我們可以檢測一個瀏覽器只支持舊的Flexbox語法-
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
兼容情況
2.Grid 布局
CSS 網(wǎng)格布局模塊定義了一個以創(chuàng)建網(wǎng)格為基礎的布局系統(tǒng)境氢。它跟Flexbible Box 布局模塊很相似蟀拷，但它更多的是為頁面布局而設計，因此具有許多不同的特性产还。
清晰的項放置
一個網(wǎng)格是由Grid Container（用 display: grid 創(chuàng)建）匹厘，和Grid項（這是子項）構(gòu)成嘀趟。在我們的CSS中脐区，我們可以容易并且清晰的組織網(wǎng)格項的放置和順序，而不用管他們在標記中的放置她按。
舉個例子牛隅，在我的文章“使用CSS網(wǎng)格的圣杯布局，我展示一下我們?nèi)绾问褂眠@個組件來創(chuàng)建類似的“圣杯布局”酌泰。
下面這個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網(wǎng)格組件介紹了一個新的長度單位 fr 媒佣，它表示網(wǎng)格容器中剩下的自由空間的一小部分。
這允許我們根據(jù)網(wǎng)格容器中剩下的空間來分配網(wǎng)格子項目中的寬和高陵刹。例如默伍，在圣杯布局中，我想要 main 容器占據(jù)除了兩個側(cè)欄之外剩下的空間，為了實現(xiàn)這個也糊，我簡單的寫了：
.hg {
grid-template-columns: 150px 1fr 150px;
}
間距
我們可以使用 grid-row-gap, grid-column-gap和 grid-gap屬性為我們的網(wǎng)格布局具體定義間隔炼蹦。這些屬性接受一個length-percentage 數(shù)據(jù)類型作為值，百分比對應于內(nèi)容的區(qū)域狸剃。
舉個例子掐隐，有一個5%的間隙，我們可以這樣子寫：
.hg {
display: grid;
grid-column-gap: 5%;
}
兼容情況
CSS網(wǎng)格組件最早在今年3月份將可以使用在瀏覽器中
3.原生變量
最近钞馁，原生CSS變量（css變量組件自定義屬性）虑省。這個組件介紹一個創(chuàng)建自定義變量的方法，它可以賦值給CSS屬性僧凰。
舉個例子探颈，如果我們需要在樣式表中多個地方使用到colour,我們可以把它當做一個變量和并引用它，而不必多次寫它的實際值训措。
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
現(xiàn)在有很多CSS預處理器像SASS可以做到這一點膝擂，但CSS變量有瀏覽器支持的優(yōu)勢。這意味著它們的值可以實時更新隙弛。為了改變下面的屬性 --theme-colour 架馋，例如，我們需要做的就是下面這個了：
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
兼容情況
什么是兼容情況
如你所見全闷，不是所有的特性都被所有瀏覽器所支持叉寂，所以我們要如何合適使用它們在生產(chǎn)中？好吧总珠，用漸進增強屏鳍！上一年，我在Fronteers 會議上講了一個關(guān)于如何在CSS上使用漸進增加的演講局服。你可以看一下下面這個：
https://player.vimeo.com/video/194815985
