2017 年值得學習的 3 個 CSS 新特性
在眾多的 CSS 新特性中，有 3 個今年采用的新特性讓我抑制不住地激動。
1. 特性查詢
不久前，我寫了 我真心期望的一個 CSS 特性 ，就是關于特性查詢，現在基本上可以說它已經存在了！它支持除 Internet Exploer 之外的主流瀏覽器(包括 Opera Mini)。
特性查詢，使用 @supports 規則，允許我們將 CSS 包含在一個條件塊中，這個條件塊中會檢查當前 user agent 是否支持一個 CSS 屬性鍵值對，在支持的情況下其中的內容才會生效。這里有一個簡單的例子，只在瀏覽器支持 Flexbox 的時候應用 display: flex -
@supports ( display: flex ) {
.foo { display: flex; }
}
另外，使用像 and 和 not 這樣的運算符，我們甚至可以創建更復雜的特性查詢。比如，我們可以檢測瀏覽器是否僅僅支持老的 Flexbox 語法 -
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
支持情況
2. 表格布局
CSS 表格布局模塊 所定義的系統用于創建基于表格的布局。它與 彈性盒布局 模塊相似，但它更明確地為頁面布局而設計，它們之間存在許多不同的特性。
明確項目定位
網格由表格容器(通過 display: grid 創建)和表格項(子組件)組成。在我們的 CSS 中，我們可以清楚的組織表格項的位置和順序，而這與它們的標記(指 HTML 標記)無關。
例如，我寫過一篇 使用 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 Grid 模塊引入了一個新的長度單位，fr，它代表了表格容器中剩余空間的一個等分。
它使得我們在表格容器根據可用空間來為表格項分配高度和寬度成為可能。例如在圣杯布局(Holy Grail Layout)中，我希望 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 Grid 模塊最早在今年三月被瀏覽器支持。
3. 原生變量
最后要說的是原生 CSS 變量。這個模塊引入了一種由創建作者定義變量的方法，這個變量可以像 CSS 屬性一樣賦值。
比如，假設在我們的樣式表中多處用到一個主題顏色，我們可以將其抽象出來保存到變量中，再引用變量，以此代替多次直接寫出實際的值。
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
目前在像 SASS 這樣 CSS 預處理器中已經可以做到這些事情，但 CSS 變量在瀏覽器中具有活性。也就是說，它們的值可以實時更新。例如，要改變上例中 --theme-color 屬性的值，我們只需要這樣做 -
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
支持情況
支持情況如何？
可以看到，目前沒有一個特性被所有瀏覽器支持，那么我們應該怎樣做才能高枕無憂地將其用于生產？答案是：漸進增強！去年我曾在前端開發大會(Fronteers Conference) 中談到如何進行與 CSS 相關的漸進增強。現在我把它放在這里 -
2017 年你有興趣學習什么樣的 CSS 特性呢？
來自：https://www.oschina.net/translate/3-new-css-features-to-learn-in-2017