2017年值得學習的3個CSS特性

原文：https://bitsofco.de/3-new-css-features-to-learn-in-2017/
譯文：http://caibaojian.com/3-new-css-features-to-learn-in-2017.html
譯者：前端開發博客（蔡寶堅）

未經許可，禁止轉載，若有不妥之處，歡迎指正。

新年快樂！
隨着新的一年到來，咱們有一整套新的東西要開始學習。雖然今年的新特性有不少，但有3個新的特性是最令我激動不已的。

1.Feature Queries

前段時間，我寫過關於Feature Queries的一篇文章，叫「我最想要的CSS特性之一」。好了，如今它已經出如今這裏了。它支持除了IE瀏覽器以外的全部主流瀏覽器（包括Opera Mini）。

Feature Queries，使用這個 @supports 規則，容許咱們包含CSS在一個條件塊，但只有當前用戶客戶端支持一個特別的CSS property-value 纔有效。舉個簡單的例子，只支持 display:flex 的瀏覽器才用Flexbox樣式。

@supports ( display:flex ){
    .foo { display:flex; }
}

另外，使用像 and 和 not 的操做符，咱們能夠建立更加複雜的特性查詢。例如，咱們能夠檢測一個瀏覽器只支持舊的Flexbox語法-

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

兼容狀況

2.Grid 佈局

CSS 網格佈局模塊定義了一個以建立網格爲基礎的佈局系統。它跟Flexbible Box 佈局模塊很類似，但它更多的是爲頁面佈局而設計，所以具備許多不一樣的特性。

清晰的項放置

一個網格是由Grid Container（用 display: grid 建立），和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屬性爲咱們的網格佈局具體定義間隔。這些屬性接受一個length-percentage 數據類型做爲值，百分比對應於內容的區域。

舉個例子，有一個5%的間隙，咱們能夠這樣子寫：

.hg {
    display: grid;
    grid-column-gap: 5%;
}

兼容狀況

CSS網格組件最先在今年3月份將可使用在瀏覽器中

3.原生變量

最近，原生CSS變量（css變量組件自定義屬性）。這個組件介紹一個建立自定義變量的方法，它能夠賦值給CSS屬性。

舉個例子，若是咱們須要在樣式表中多個地方使用到colour,咱們能夠把它當作一個變量和並引用它，而沒必要屢次寫它的實際值。

: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');

兼容狀況

什麼是兼容狀況

如你所見，不是全部的特性都被全部瀏覽器所支持，因此咱們要如何合適使用它們在生產中？好吧，用漸進加強！上一年，我在Fronteers 會議上講了一個關於如何在CSS上使用漸進增長的演講。你能夠看一下下面這個：