2017年要學習的三個CSS新特性
新的一年，我們有一系列新的東西要學習。儘管CSS有很多新的特性，但有三個特性令我最激動並進行學習。
1. Feature Queries（特性查詢）
在這之前我寫了一篇關於Feature Queries的文章the one CSS feature I really want。現在，它已經在這裡了！目前所有主流瀏覽器都支援特徵查詢（包括Opera Mini），IE瀏覽器除外。
Feature Queries，使用@supports規則，允許我們在它的條件區域內寫入CSS規則，只有噹噹前的使用者瀏覽器支援某個CSS屬性-值對的時候，該CSS程式碼塊才會生效。
舉一個簡單的例子，下面的程式碼中，只有當瀏覽器支援display:
flex
@supports ( display: flex ) {
.foo { display: flex; }
}
另外也可以使用一些操作符，比如and與not，我們就可以建立更復雜的特徵查詢。例如，我們可以識別一個瀏覽器是否支援老版本的Flexbox語法。
@supports ( display: flexbox ) and ( not ( display: flex ) ) {
.foo {
display: flexbox;
}
}瀏覽器支援
拓展
Feature Queries同樣支援Javascript介面：CSS.supports()
if ( CSS.supports( '(display: flex)') ) {
console.log('支援flex')
} else {
console.log('不支援flex')
}
if ( CSS.supports( '(display: flexbox)' ) ) {
console.log('支援flexbox')
} else {
console.log('不支援flexbox')
}2. Grid Layout（柵格佈局）
CSS柵格佈局模組定義了一個建立以網格為基礎的佈局系統。這和彈性盒佈局模組
Explicit Item Placement
一個柵格系統是由柵格容器（Grid Containe，由display:
grid建立）、柵格項（Grid Item）組成。在我們的CSS中，我們可以很容易且明確的組織布局以及柵格項的順序、與標記中的佈局相獨立。
例如，我在用CSS柵格進行聖盃佈局一文中如何使用柵格佈局模組建立聖盃佈局。
主要的HTML程式碼：
<body class="hg">
<header class="hg__header">Title</header>
<main class="hg__main">Content</main>
<aside class="hg__left">Menu</aside>
<aside class="hg__right">Ads</aside>
<footer class="hg__footer">Footer</footer>
</body>主要的CSS程式碼：
.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屬性可以完成這項工作，這些屬性接受一個<length-percentage>百分比資料型別作為值，與內容區域的尺寸對應的百分比。
例如，有5%的空隙，可以這樣寫：
.hg {
display: grid;
grid-column-gap: 5%;
}瀏覽器支援
CSS網格模組將最早在今年三月在瀏覽器中可用（提供預設支援）。
現在想體驗怎麼辦？
3、Native Variables
最後一個是本地CSS變數。該模組介紹了建立使用者自定義變數的方法，可以給一個CSS屬性分配一個變數。
例如，如果我有一個主題色，這個主題色被用在了好幾個地方，這時候，就可以抽象這個主題色到一個變數中，並且在使用的時候引用這個變數，這樣比把這個顏色寫到多個地方更容易維護。
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
這種效果在之前我們一般藉助CSS前處理器來實現，比如SASS，但是CSS變數有個優點就是一直存在於瀏覽器中。這意味著這些變數值可以線上修改。例如，為了更新--theme-colour屬性值，可以通過如下方式：
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum'); 瀏覽器支援
2017年什麼CSS特性最讓你激動？