2017 css新特性
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; }
}
另外也可以使用一些操作符,比如and
与not
,我们就可以创建更复杂的特征查询。例如,我们可以识别一个浏览器是否支持老版本的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-gap
、grid-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新特性的更多相关文章
- ECMAScript 2017(ES8)新特性简介
目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是ECMA ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 【译】2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 深入研究Visual studio 2017 RC新特性
在[Xamarin+Prism开发详解三:Visual studio 2017 RC初体验]中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很 ...
- CSS新特性contain,控制页面的重绘与重排
在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, ...
- CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...
- CSS新特性之动画
动画是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或者一组动画,常常用来实现复杂的动画效果.相比较过度,动画可以实现更多变化,更多控制,连续自动(不需要鼠标经过和鼠标离开来控制) ...
- css新特性 box-flex/flex 弹性盒状模型
新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...
随机推荐
- python之web路径扫描工具
# coding: UTF-8 import sys, os, time, httplibimport relist_http=[] #http数组 def open_httptxt(): #打开 ...
- http://blog.csdn.net/hahalzb/article/details/5889545
http://blog.csdn.net/hahalzb/article/details/5889545
- Python实现局域网内屏幕广播的技术要点分析(转载)
转载:https://mp.weixin.qq.com/s?timestamp=1498531736&src=3&ver=1&signature=Eq6DPvkuGJi*G5s ...
- Node.js meitulu图片批量下载爬虫1.06版
//====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...
- centos 6.5 python2.6.6 zbar 安装
经过数次折腾,终于搞明白了这个zbar的安装顺序. 1.先安装http://zbar.sourceforge.net/download.html 下的zbar, 2.python 安装z ...
- centos7,py2和py3共存
1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...
- ubuntu挂载3T新硬盘并更换home分区
ubuntu添加一块新的硬盘,并更换home分区 1.将硬盘接入机箱,开机,查看是否现有的硬盘信息 从这里可以看出,共有两块硬盘,分别是sda和sdb 2.执行fdisk -l,确保我们要添加的就是s ...
- JAVA 的IO操作实例
实例要求: 1,加法操作: 键盘输入两个数字,完成加法操作.因为从键盘接收过来的内容都是通过字符串形式存放的,所以此时直接通过包装类 Integer将字符串变为基本数据类型. 2,菜单显示: 采用的知 ...
- Centos6.8 下 Node.js 的安装
思路:采用编译好的文件进行安装 一 使用 wget 下载 到 Node.js 官网(https://nodejs.org/en/download/) 选择要下载的编译版本(Source Code) / ...
- c++ builder xe2 字符串转日期
TFormatSettings * fmt = new TFormatSettings; fmt->ShortDateFormat = L"yy-mm-dd"; fmt-&g ...