CSS3：2017几个让人激动不已的新特性

Posted 2021-04-09 千锋教育

随着新一年的到来，我们可以学习的干活又多了好多。新特性虽然有很多，但有三个是今年最让我激动不已的。

1. Feature Queries

注：因为media query一样，大家习惯不翻译，所以这里也不直译为：特性查询

之前我写过了一篇关于Feature Queries的文章《我真正想要的CSS特性》。好吧，现在它已经来了！（包括Opera Mini在内的）所有主流浏览器，除了IE，都已经支持这个特性了。

Feature Queries，使用@supports规则，可以让大家在把CSS写在特定的代码块中，但是只有在当前用户代理支持特定的CSS键值对时其才会生效。这里有个简单的例子，对于支持display: flex的浏览器，下面的Flexbox的样式才会生效：

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

此外，使用像and 和 not的操作符，我们可以创造出更为复杂的feature queries。例如，我们可以检测出浏览器是否只支持旧的Flexbox语法：

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

支持情况

2. 网格布局

CSS网格布局模块定义了一个用来创造基于网格的布局系统。它和弹性盒子布局模块相似，但其是专门为页面布局设计的，所以也会有许多不同的特性。

清晰的子项布置

网格是由网格容器（通过display: 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 属性可以去具体地定义间隔。这些属性接受`` data type作为值，其比例与内容区域的尺寸一致。

例如，为了有5%的间隔，你可以这样写：

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

支持情况

CSS网格模块最早今年三月会在浏览器上可用。

3. 原生变量

终于等到你，CSS本地变量(Custom Properties for Cascading Variables Module)。此模块引入了一个方法，可以用其创造作为CSS属性值的自定义变量。

例如，如果我们有一个在样式表里多处使用的主题颜色，我们可以把其提取出来放入一个变量中，同时引用此变量，而不是把实际值去写好多遍。

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

这和我们之前用像SASS这样的CSS预处理器很像，但是CSS变量有浏览器原生支持的优势。这也就意味着其可以实时更新。例如，为了改变上面的--theme-colour值，我们需要做的是：

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

支持情况

支持情况怎么样呢？

正如你所见，目前这些功能并没有在所有浏览器上获得充分支持，那么我们怎么在产品中使用才合适呢？额，当然是渐进增强！去年我就在前端大会上发表了关于怎么把渐进增强运用到CSS中的演讲。你可以在下面看到当时的演讲：

2017又有什么CSS特性是会让你激动不已的呢？

大数据开发学习群518811984
android开发交流群480637276
html5学习交流群314548237
php学习交流群518146831
VR技术学习交流群474438840
JavaEE学习交流群343013298
UI技术学习交流群159532533
ios开发交流群419863868

小程序学习交流群             597473515

长按二维码分享更多精彩