在眾多的CSS新特性中，有 3 個今年采用的新特性讓我抑制不住地激動。

1. 特性查詢

不久前，我寫了 我真心期望的一個 CSS 特性 ，就是關(guān)于特性查詢，現(xiàn)在基本上可以說它已經(jīng)存在了！它支持除 Internet Exploer 之外的主流瀏覽器(包括 Opera Mini)。

特性查詢，使用 @supports 規(guī)則，允許我們將 CSS 包含在一個條件塊中，這個條件塊中會檢查當(dāng)前 user agent 是否支持一個 CSS 屬性鍵值對，在支持的情況下其中的內(nèi)容才會生效。這里有一個簡單的例子，只在瀏覽器支持 Flexbox 的時候應(yīng)用 display: flex -

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

另外，使用像 and 和 not 這樣的運算符，我們甚至可以創(chuàng)建更復(fù)雜的特性查詢。比如，我們可以檢測瀏覽器是否僅僅支持老的 Flexbox 語法 -

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

支持情況

2. 表格布局

CSS 表格布局模塊 所定義的系統(tǒng)用于創(chuàng)建基于表格的布局。它與 彈性盒布局 模塊相似，但它更明確地為頁面布局而設(shè)計，它們之間存在許多不同的特性。

明確項目定位

網(wǎng)格由表格容器(通過 display: grid 創(chuàng)建)和表格項(子組件)組成。在我們的 CSS 中，我們可以清楚的組織表格項的位置和順序，而這與它們的標(biāo)記(指 HTML 標(biāo)記)無關(guān)。

例如，我寫過一篇 使用 CSS 表格進(jìn)行圣懷布局 ，這篇文章中展示了通過這個模塊如果創(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 Grid 模塊引入了一個新的長度單位，fr，它代表了表格容器中剩余空間的一個等分。

它使得我們在表格容器根據(jù)可用空間來為表格項分配高度和寬度成為可能。例如在圣杯布局(Holy Grail Layout)中，我希望 main 分區(qū)占據(jù)兩個邊欄之外的所有空間。我寫了一段簡單的代碼來做這個事情 -

.hg {     grid-template-columns: 150px 1fr 150px; }

間距

我們可以使用 grid-row-gap、grid-column-gap 和 grid-gap 屬性來明確定義間距。這些屬性的值是 <length-percentage(長度百分比)> 數(shù)據(jù)類型 ，是內(nèi)容區(qū)域尺寸的百分比。

比如，需要 %5 的間距，可以這樣寫 -

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

支持情況

CSS Grid 模塊最早在今年三月被瀏覽器支持。

3. 原生變量

***要說的是原生 CSS 變量。這個模塊引入了一種由創(chuàng)建作者定義變量的方法，這個變量可以像 CSS 屬性一樣賦值。

比如，假設(shè)在我們的樣式表中多處用到一個主題顏色，我們可以將其抽象出來保存到變量中，再引用變量，以此代替多次直接寫出實際的值。

:root {   --theme-colour: cornflowerblue; }  h1 { color: var(--theme-colour); }   a { color: var(--theme-colour); }   strong { color: var(--theme-colour); }

目前在像 SASS 這樣 CSS 預(yù)處理器中已經(jīng)可以做到這些事情，但 CSS 變量在瀏覽器中具有活性。也就是說，它們的值可以實時更新。例如，要改變上例中 --theme-color 屬性的值，我們只需要這樣做 -

const rootEl = document.documentElement;   rootEl.style.setProperty('--theme-colour', 'plum');

支持情況

支持情況如何？

可以看到，目前沒有一個特性被所有瀏覽器支持，那么我們應(yīng)該怎樣做才能高枕無憂地將其用于生產(chǎn)？答案是：漸進(jìn)增強(qiáng)！去年我曾在前端開發(fā)大會(Fronteers Conference) 中談到如何進(jìn)行與 CSS 相關(guān)的漸進(jìn)增強(qiáng)。現(xiàn)在我把它放在這里 -

2017 年你有興趣學(xué)習(xí)什么樣的 CSS 特性呢？