2017 年值得學習的 3 個 CSS 新特性（推薦）

height: 1.76em;">在眾多的 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 行 -

.hgheader { grid-area: header; }.hgfooter { grid-area: footer; }.hgmain { grid-area: main; }.hgleft { grid-area: navigation; }.hgright { 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 相關的漸進增強。現在我把它放在這裡 -