2017年WEB程序员需要注意的三个CSS新特性
lveu2579
8年前
<p>这是翻译的一篇文章，原文是： <a href="https://bitsofco.de/3-new-css-features-to-learn-in-2017/?utm_source=frontendfocus&utm_medium=email" rel="nofollow,noindex">3 New CSS Features to Learn in 2017</a> ，翻译的不是很好，如有疑问欢迎指出。</p> <p>新的一年，我们有一系列新的东西要学习。尽管CSS有很多新的特性，但有三个特性令我最激动并进行学习。</p> <h2>1. Feature Queries（特性查询）</h2> <p>在这之前我写了一篇关于Feature Queries的文章 <a href="/misc/goto?guid=4959735556129991494" rel="nofollow,noindex">the one CSS feature I really want</a> 。现在，它已经在这里了！目前所有主流浏览器都支持特征查询（包括Opera Mini），IE浏览器除外。</p> <p><a href="/misc/goto?guid=4959735556216463767" rel="nofollow,noindex">Feature Queries</a> ，使用 @supports 规则，允许我们在它的条件区域内写入CSS规则，只有当当前的用户浏览器支持某个CSS属性-值对的时候，该CSS代码块才会生效。</p> <p>举一个简单的例子，下面的代码中，只有当浏览器支持 display: flex 的时候才会应用Flexbox样式。</p> <pre> <code class="language-css">@supports ( display: flex ) { .foo { display: flex; } }</code></pre> <p>另外也可以使用一些操作符，比如 and 与 not ，我们就可以创建更复杂的特征查询。例如，我们可以识别一个浏览器是否支持老版本的Flexbox语法。</p> <pre> <code class="language-css">@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; } }</code></pre> <h3>浏览器支持</h3> <h3>拓展</h3> <p>Feature Queries同样支持Javascript接口： CSS.supports() ，同样使用上面的例子，看下如何使用：</p> <pre> <code class="language-css">if ( CSS.supports( '(display: flex)') ) { console.log('支持flex') } else { console.log('不支持flex') } if ( CSS.supports( '(display: flexbox)' ) ) { console.log('支持flexbox') } else { console.log('不支持flexbox') }</code></pre> <h2>2. Grid Layout（栅格布局）</h2> <p><a href="/misc/goto?guid=4959732669244071185" rel="nofollow,noindex">CSS栅格布局模块</a> 定义了一个创建以网格为基础的布局系统。这和 <a href="/misc/goto?guid=4958996763339972676" rel="nofollow,noindex">弹性盒布局模块</a> 相似，但栅格布局是专门为页面布局设计，因此有很多不同的特性。</p> <h3>Explicit Item Placement</h3> <p>一个栅格系统是由栅格容器（Grid Containe，由 display: grid 创建）、栅格项（Grid Item）组成。在我们的CSS中，我们可以很容易且明确的组织布局以及栅格项的顺序、与标记中的布局相独立。</p> <p>例如，我在 <a href="/misc/goto?guid=4959732669875642283" rel="nofollow,noindex">用CSS栅格进行圣杯布局</a> 一文中如何使用栅格布局模块创建圣杯布局。</p> <p>主要的HTML代码：</p> <pre> <code class="language-css"><body class="hg"> <header class="hg__header">Title</header> <main class="hg__main">Content</main> <aside class="hg__left">Menu</aside> <aside class="hg__right">Ads</aside> <footer class="hg__footer">Footer</footer> </body></code></pre> <p>主要的CSS代码：</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> <h3>灵活的长度</h3> <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 属性可以完成这项工作，这些属性接受一个 <length-percentage> 百分比数据类型作为值，与内容区域的尺寸对应的百分比。</p> <p>例如，有5%的空隙，可以这样写：</p> <pre> <code class="language-css">.hg { display: grid; grid-column-gap: 5%; }</code></pre> <h3>浏览器支持</h3> <p>CSS网格模块将最早在今年三月在浏览器中可用（提供默认支持）。</p> <h3>现在想体验怎么办？</h3> <p>参考我的这篇记录： <a href="/misc/goto?guid=4959735556381891312" rel="nofollow,noindex">各个浏览器开启CSS Grid Layout的方式</a> 。</p> <h2>3、Native Variables</h2> <p>最后一个是 <a href="/misc/goto?guid=4958974719784078815" rel="nofollow,noindex">本地CSS变量</a> 。该模块介绍了创建用户自定义变量的方法，可以给一个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>这种效果在之前我们一般借助CSS预处理器来实现，比如SASS，但是CSS变量有个优点就是 一直存在于浏览器中 。这意味着这些变量值可以在线修改。例如，为了更新 --theme-colour 属性值，可以通过如下方式：</p> <pre> <code class="language-css">const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', 'plum');</code></pre> <h3> </h3> <p> </p> <p>来自：http://www.techug.com/3-new-css-features-to-learn-in-2017</p> <p> </p>