2017年要学习的3个CSS新特性

   <p>新年快乐！ :confetti_ball:</p>    <p>随着新一年的到来，我们可以学习的干活又多了好多。新特性虽然有很多，但有三个是今年最让我激动不已的。</p>    <h2>1. Feature Queries</h2>    <p>之前我写过了一篇关于Feature Queries的文章 《我真正想要的CSS特性》 。好吧，现在它已经来了！（包括Opera Mini在内的）所有主流浏览器，除了IE，都已经支持这个特性了。</p>    <p>Feature Queries，使用 @supports 规则，可以让大家在把CSS写在特定的代码块中，但是只有在当前用户代理支持特定的CSS键值对时其才会生效。这里有个简单的例子，对于支持 display: flex 的浏览器，下面的Flexbox的样式才会生效：</p>    <pre>  <code class="language-css">@supports ( display: flex ) {    .foo { display: flex; }  }</code></pre>    <p>此外，使用像 and 和 not 的操作符，我们可以创造出更为复杂的feature queries。例如，我们可以检测出浏览器是否只支持旧的Flexbox语法：</p>    <pre>  <code class="language-css">@supports ( display: flexbox )             and             ( not ( display: flex ) ) {    .foo { display: flexbox; }  }</code></pre>    <h3>支持情况</h3>    <p><img src="https://simg.open-open.com/show/bbe220501882b17ea5a460d36e6451b8.png"></p>    <h2>2. 网格布局</h2>    <p>CSS网格布局模块 定义了一个用来创造基于网格的布局系统。它和 弹性盒子布局模块 相似，但其是专门为页面布局设计的，所以也会有许多不同的特性。</p>    <h3>清晰的子项布置</h3>    <p>网格是由网格容器（通过 display: grid 构建）和网格子项（其为网格的子元素）组成。在我们的CSS里，我们可以简单明了的组织网格子项的位置和次序，而不受其在代码中位置的影响。</p>    <p>例如，在我的文章 《使用CSS网格的圣杯布局》 中，我演示了我们可以怎么使用这个模块来书写出臭名昭著的“圣杯布局”。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f9130e40860bd9bfceeaf5eed71aa5eb.gif"></p>    <p>下面的CSS只有31行：</p>    <pre>  <code class="language-css">.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;      }  }</code></pre>    <p>###灵活的长度</p>    <p>CSS网格模块引入了一个新的长度单位 fr ，其表示在网格容器里剩余空间的部分。</p>    <p>这就可以让我们根据网格容器的可用空间来分配网格子项的宽高。例如，在圣杯布局中，我想让 main 区域占据除两个边栏外的空间。为了实现这个，我简单地写了：</p>    <pre>  <code class="language-css">.hg {      grid-template-columns: 150px 1fr 150px;  }</code></pre>    <h3>间隔</h3>    <p>我们使用 grid-row-gap ， grid-column-gap ， 和 grid-gap 属性可以去具体地定义间隔。这些属性接受 `` data type 作为值，其比例与内容区域的尺寸一致。</p>    <p>例如，为了有5%的间隔，你可以这样写：</p>    <pre>  <code class="language-css">.hg {      display: grid;      grid-column-gap: 5%;  }</code></pre>    <h3>支持情况</h3>    <p>CSS网格模块最早今年三月会在浏览器上可用。</p>    <p><img src="https://simg.open-open.com/show/961c20736514dbcd5500c427af041666.png"></p>    <h2>3. 原生变量</h2>    <p>终于等到你，CSS本地变量( Custom Properties for Cascading Variables Module )。此模块引入了一个方法，可以用其创造作为CSS属性值的自定义变量。</p>    <p>例如，如果我们有一个在样式表里多处使用的主题颜色，我们可以把其提取出来放入一个变量中，同时引用此变量，而不是把实际值去写好多遍。</p>    <pre>  <code class="language-css">:root {    --theme-colour: cornflowerblue;  }    h1 { color: var(--theme-colour); }    a { color: var(--theme-colour); }    strong { color: var(--theme-colour); }</code></pre>    <p>这和我们之前用像SASS这样的CSS预处理器很像，但是CSS变量有浏览器原生支持的优势。这也就意味着其可以实时更新。例如，为了改变上面的 --theme-colour 值，我们需要做的是：</p>    <pre>  <code class="language-css">const rootEl = document.documentElement;    rootEl.style.setProperty('--theme-colour', 'plum');</code></pre>    <h2>支持情况</h2>    <p><img src="https://simg.open-open.com/show/0888fe8eb5563e714d6a70ad65c5df5d.png"></p>    <h2>支持情况怎么样呢？</h2>    <p>正如你所见，目前这些功能并没有在所有浏览器上获得充分支持，那么我们怎么在产品中使用才合适呢？额，当然是渐进增强！去年我就在前端大会上发表了关于怎么把渐进增强运用到CSS中的演讲。你可以在下面看到当时的演讲：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/51c3a997e5f9192543ef9de962eb42d3.png"></p>    <p>2017又有什么CSS特性是会让你激动不已的呢？</p>    <p> </p>    <p>来自：http://www.zcfy.cc/article/3-new-css-features-to-learn-in-2017-2360.html</p>    <p> </p>