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上使用渐进增长的演讲。你能够看一下下面这个：