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

这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出。

新的一年,我们有一系列新的东西要学习。尽管CSS有很多新的特性,但有三个特性令我最激动并进行学习。

1. Feature Queries(特性查询)

在这之前我写了一篇关于Feature Queries的文章the one CSS feature I really want。现在,它已经在这里了!目前所有主流浏览器都支持特征查询(包括Opera Mini),IE浏览器除外。

Feature Queries,使用@supports规则,允许我们在它的条件区域内写入CSS规则,只有当当前的用户浏览器支持某个CSS属性-值对的时候,该CSS代码块才会生效。

举一个简单的例子,下面的代码中,只有当浏览器支持display: flex的时候才会应用Flexbox样式。

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

另外也可以使用一些操作符,比如andnot,我们就可以创建更复杂的特征查询。例如,我们可以识别一个浏览器是否支持老版本的Flexbox语法。

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

浏览器支持

拓展

Feature Queries同样支持Javascript接口:CSS.supports(),同样使用上面的例子,看下如何使用:

if ( CSS.supports( '(display: flex)') ) {
console.log('支持flex')
} else {
console.log('不支持flex')
} if ( CSS.supports( '(display: flexbox)' ) ) {
console.log('支持flexbox')
} else {
console.log('不支持flexbox')
}

2. Grid Layout(栅格布局)

CSS栅格布局模块定义了一个创建以网格为基础的布局系统。这和弹性盒布局模块相似,但栅格布局是专门为页面布局设计,因此有很多不同的特性。

Explicit Item Placement

一个栅格系统是由栅格容器(Grid Containe,由display: grid创建)、栅格项(Grid Item)组成。在我们的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-gapgrid-column-gap以及grid-gap属性可以完成这项工作,这些属性接受一个<length-percentage>百分比数据类型作为值,与内容区域的尺寸对应的百分比。

例如,有5%的空隙,可以这样写:

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

浏览器支持

CSS网格模块将最早在今年三月在浏览器中可用(提供默认支持)。

现在想体验怎么办?

参考我的这篇记录:各个浏览器开启CSS Grid Layout的方式

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特性最让你激动?


如果感兴趣,可以点击一下“推荐”哦~

转载文章,请标注来源,以及下方公众号链接。

如果感兴趣,也请关注一下公众号:前端基础研究

愿本文不会浪费你的时间,每次都有新收获。

2017 css新特性的更多相关文章

  1. ECMAScript 2017(ES8)新特性简介

    目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是ECMA ...

  2. 2017年学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  3. 【译】2017年要学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

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

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  5. 深入研究Visual studio 2017 RC新特性

    在[Xamarin+Prism开发详解三:Visual studio 2017 RC初体验]中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很 ...

  6. CSS新特性contain,控制页面的重绘与重排

    在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, ...

  7. CSS新特性之2D转换transform

    transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...

  8. CSS新特性之动画

    动画是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或者一组动画,常常用来实现复杂的动画效果.相比较过度,动画可以实现更多变化,更多控制,连续自动(不需要鼠标经过和鼠标离开来控制) ...

  9. css新特性 box-flex/flex 弹性盒状模型

    新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...

随机推荐

  1. Directive Controller And Link Timing In AngularJS

    I've talked about the timing of directives in AngularJS a few times before. But, it's a rather compl ...

  2. 虚拟机主流软件Vmware安装

    虚拟机主流软件vmware 官网:http://www.vmware.com Vmware8比较常用的稳定老版本 特点:1)不需要重新分区,只要有硬盘容量 2)模拟的操作系统可以和真正的电脑一样,可以 ...

  3. windowsclient开发--使用、屏蔽一些快捷键

    每一个windowsclient都有自己的一些快捷键,有的是windows系统提供的. 今天就要与大家分享一下.在windowsclient开发过程中对按键的处理. ESC按键 Duilib这个库中, ...

  4. 9.11排序与查找(三)——给定一个排序后的数组,包括n个整数,但这个数组已被旋转过多次,找出数组中的某个元素

    /**  * 功能:给定一个排序后的数组.包括n个整数.但这个数组已被旋转过多次,次数不详.找出数组中的某个元素.  * 能够假定数组元素原先是按从小到大的顺序排列的.  */ /** * 思路:数组 ...

  5. php中的 file_get_contents(‘php://input’)用法

    php中的 file_get_contents('php://input')用法: file_get_contents 获取php页面中input内容的值: eg: php: 页面提交了usernam ...

  6. Photoshop之学习笔记(2) - 常用快捷键

    1.1024x768常用桌面分辨率2.点阵图(像素图).矢量图3.PPI 分辨率  DPI 打印输出的分辨率4.选框工具5.拾色器(默认H恢复色条 色相)6.Ctrl+D 取消选框工具7.Ctrl+S ...

  7. linux命令之head、tail命令具体解释

    head 语法 样例 tail 语法 样例 head和tail组合使用方法举例 head 语法 head [-n -k ]... [FILE]... 样例 默认是显示开头前10行. head /etc ...

  8. PHP,mysql,Linux,CI框架学习总结

    PHP,mysql,CI框架学习总结 PHP标记 1.Xml风格<?php ?> 2.简短风格 <? ?> 需在php.ini中开启short_open_tag 3.asp风格 ...

  9. Android内存优化大全(中)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上 ...

  10. LeetCode 66 Plus One(加一)(vector)

    翻译 给定一个以一系列数字表示的非负数.将其加一并转换成数字. 数字存储的最高位在列的最前面. 原文 Given a non-negative number represented as an arr ...