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

隨著新的一年到來，我們有一整套新的東西要開始學習。雖然今年的新特性有很多，但有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上使用漸進增加的演講。你可以看一下下面這個：

https://player.vimeo.com/video/194815985

 

來自：http://www.jianshu.com/p/ce5360d63533