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

新年快乐! :confetti_ball:

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

1. Feature Queries 特性查询

之前我写过了一篇关于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; }
}

支持情况

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

2.Grid Layout 网格布局

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

清晰的子项布置

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

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

主要的HTML代码:

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

主要的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;
    }
}

灵活的长度

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网格模块将最早在今年三月在浏览器中可用(提供默认支持)。

现在想体验怎么办?

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

3.Native Variables 原生变量

最后一个是本地CSS变量。该模块介绍了创建用户自定义变量的方法,可以给一个CSS属性分配一个变量。

例如,如果我有一个主题色,这个主题色被用在了好几个地方,这时候,就可以抽象这个主题色到一个变量中,并且在使用的时候引用这个变量,这样比把这个颜色写到多个地方更容易维护。

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

支持情况

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

支持情况怎么样呢?

正如你所见,目前这些功能并没有在所有浏览器上获得充分支持,那么我们怎么在产品中使用才合适呢?额,当然是渐进增强!概念可以了解这篇文章:优雅降级和渐进增强的区别


原文链接:HelloWeb前端网 » 2017年要学习的三个CSS新特性 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享