dainiel

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

dainiel · 2017-01-18翻译 · 1128阅读 原文链接

新年快乐! 🎊

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

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; }
}

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

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

支持情况

Data on support for the css-feature queries feature

2. 网格布局

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

清晰的子项布置

网格是由网格容器(通过display: grid构建)和网格子项(其为网格的子元素)组成。在我们的CSS里,我们可以简单明了的组织网格子项的位置和次序,而不受其在代码中位置的影响。

例如,在我的文章 《使用CSS网格的圣杯布局》中,我演示了我们可以怎么使用这个模块来书写出臭名昭著的“圣杯布局”。

Holy Grail Layout Demo

下面的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-gapgrid-column-gap, 和 grid-gap 属性可以去具体地定义间隔。这些属性接受`` data type作为值,其比例与内容区域的尺寸一致。

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

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

支持情况

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

Can I Use css-grid?

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');

支持情况

Can I Use css-variable?

支持情况怎么样呢?

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

JavaScript Array Methods - Mutator

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

相关文章