CSS新特性

前段时间有个关于CSS的话题“既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢”?其实这样的话题一直都存在。不过这里我要说的不是能不能写好CSS,我想和大家一起分享几个CSS的新特性。这个也是上周在天津在线回声公司分享的一个话题。整理一下有关于PPT中的内容,希望对大家有所帮助。

CSS新特性

点击这里,可以下载PPT,不过自备天梯。

聊CSS新特性现状

印象中,每次聊到CSS的新特性,大家都比较会排斥,觉得这些新属性对于大家平时的工作没有任何的帮助,因为都不知道这些属性什么时候才能被浏览器支持。其实我想说的是,这是一个误区,也是自己给自己找借口的一种声音。

早在2010年的时候,说到CSS3,国内类似的声音非常的多,了解和学习CSS3有卵用,一句话“然并卵”。但是不到两年时间,很多人都觉得自己没有早点学习这方面的CSS属性。为什么变化会这么快呢?技术就是如此,当有新东西出来之时,你没有一定的预知感,没有一定的好奇感,没有一定的尝试心,那么注定你将跟着人家的屁股后面追赶,而且追的好累,还不一定能追上。

其实开篇不想说这么多的废话,只想告诉大家,应该不断的去学习新的东西,哪怕现在使用不上,但总有一天你的所学会被用上。开始今天的话题之前,先告诉大家,文章中提到的用例,建议您采用最新版本的Chrome浏览器浏览。

要聊的CSS新特性

对于前端而言,最深的体会就是“贵圈真乱”。不停的在变,而且变得很快。其实对于技术而言,他将一直是会向前发展的,所以做为前端的我们需要保持一颗热爱学习的心态。下面我们要聊的CSS新特性主要有:

CSS新特性

CSS Box Alignment

CSS Box Alignment主要是用来控制元素在容器中对齐方式的模块。众说周知,控制元素在容器中的对齐方式是件特别痛苦的事情,比如水平方向的两端对齐,垂直方向的垂直居中

拿一个垂直居中的来说,自从有了Flexbox模块相对而言,实现一个垂直居中效果并不是件难事,比如下面的这个示例:

简单的两句代码就让图片在容器中水平垂直居中了:

.box {
 display:flex;
 align-items: center;
 justify-content: center;
}

实现思路就不多说了,感兴趣的可以先了解Flexbox。这里要说的是align-itemsjustify-content属性。大家常看到这两个属性配合flex一起使用,能帮助我们很好的实现各种对齐方式。或许你和我一样认为这些属性是属于Flexbox属性之一。今天我要告诉大家的是,这些属性是属于CSS Box Alignment模块的,至少现在是。在CSS Box Alignment模块中提供了六个属性,用来控制元素在水平和垂直方向的对齐方式:

上面示例看到的是这些属性运用在Flex容器,其实除了应用在大家常见的Flex容器上之外,还可以运用在块容器(Block container)多列容器(Multicol Container)网格容器(Grid Container)。比如下面的这个示例,就是结合CSS的Grid模块一起使用的:

上面示例,第一个li使用的是默认对齐方式,第二个至第四个,都通过align-self做了重置:

.wrapper li:nth-child(2) {
 align-self: center;
}
.wrapper li:nth-child(3) {
 align-self: start;
}
.wrapper li:nth-child(4) {
 align-self: end;
}

CSS Grid Layout

CSS Grid Layout指的不是以前大家熟悉的Grid系统(栅格系统),它是CSS的一个有关于布局的新模块(CSS Grid Layout Module Level 1)。它和以前的任何一种布局方式都不一样。以前我们接触过的CSS 布局都是一种单维布局,而CSS Grid布局是一种双维布局(两个维度布局),实现两个维度对齐方式。

如果想要深入的学习或者了解CSS的Grid布局模块,那么它有一些专业术语有必要先进行了解:

有关于这方面术语介绍的文章,可以看看下面这些文章:

有关于CSS Grid Layout更多的介绍可以点击这里进行了解。

来看一个简单的示例:

使用下面的一段代码,就给.cards容器创建了一个网格布局,其子元素.card将按网格布局来渲染:

.cards {
 display:grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-gap: 10px;
}

如果上面的这个布局示例,要是我们改用Flexbox来布局的话,看到的效果将会是这样:

是不是有点不一样。当然,我们这里并不是说,要使用CSS Grid Layout来替代Flexbox的布局。往往两者结合在一起,能达到更好的效果。比如《使用CSS Grid和Flexbox制作Card》一文中介绍的一样。

另外,CSS Grid Layout的使用方式非常的多,不同的组合得到不同的布局。比如下面的两个示例:

.cards {
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
 grid-gap: 10px;
}

看到的效果如下:

上面的看到的示例,我们都只看到了对网格容器使用网格属性,下面的代码和前面的略有不同:

.cards {
 display:grid;
 grid-template-columns: repeat(12,1fr);
 grid-gap: 10px;
}
.card:nth-child(1) {
 grid-column: 1 / 4;
}
.card:nth-child(2) {
 grid-column: 1 / 4;
 grid-row: 2;
}
.card:nth-child(3) {
 grid-column: 10 / 13;
 grid-row: 2;
}
.card:nth-child(4) {
 grid-column: 4 / 10;
}
.card:nth-child(5) {
 grid-column: 10 / 13;
}

你看到的效果将是这样的:

有关于CSS Grid的使用示例太多了,这里就不一一列出来了。而且有关于CSS Grid布局也不是仅仅这么点篇幅能说完。如果你对这方面感兴趣的话,建议你关注这里的相关更新,你将获取到有关于CSS Grid 布局的最新信息。

可以说,CSS Grid布局才是Web中的布局模块,随着浏览器对其支持度越来越强的情况下,它将更会受到青眯。也将成为未来Web布局中的霸主。

正因为如此,我要像@Rachel Andrew一样,在国内推广此模块,让更多的同学知道这个模块,甚至尝试着试玩这个模块。所以我选择在中国CSS开发者大会(第三届)上分享这方面的一个主题《CSS Grid Layout》。如果你也想了解CSS Grid Layout的强大之处,欢迎关注在大会上分享的Topic。

CSS Shapes

大家的世界里,Web布局都是中规中矩,你所看到的排版方式都是矩形的。那是因为,Web中的任何一个元素都是矩形盒子,哪怕你的元素外形看上去是个圆(或者其它图形)。这也造成了布局都是矩形方块的,要做到类似杂志,报纸这样流体式的布局是非常困难的。甚至说是不可能的。比如要实现下面这样的一个布局:

CSS Shapes

CSS Shapes(CSS Shapes Module Level 1)的出现,将打破这样的格局。可以让你的排版本布局具有更多的想象空间和创意。比如,让文本绕着一个圆形的图片进行排列:

.balloon {
 float: left;
 width: 429px;
 shape-outside: circle(50%);
}

仅仅上面的几行代码就实现了上面示例的效果,你是不是觉得不可思议。以前要实现这样的一个效果是多么的难,现在使用shape-outside这样的一个属性就轻而易举的完成了。

当然,除了配合图片之外,还可以配合CSS绘制的图形,也能达到类似的效果,比如下面的这个示例,采用一个伪元素::before绘制一个圆,然后结合shape-outside

.box::before {
 content: "";
 display: block;
 float: left;
 width: 429px;
 height: 409px;
 shape-outside: circle(50%);
}

除了上面的方法之外,还可以配合CSS中的clip-path一起使用,这样你可以让文本排版围绕着任何你想要的图形排列,比如说六边形,八边形,不规则的图形等等。下面的示例是一个绕着一个椭圆:

如果你从示接触过CSS的clip-path属性,建议你点击这里先进行相关的了解。

有关于CSS Shapes更多的介绍,可以阅读早前整理的一些相关教程,我想对你应该会有帮助的。

Conditional CSS

Conditional CSS指的是CSS中的Conditional Rules模块。它提供了三种@rules

有关于@media@viewport在这里不做讨论,咱们来说说@supports

回到最初的话题,使用CSS新特性的时候,大家最担心的就是浏览器支不支持该属性。为了能安全使用这些CSS新特性,大家都希望给其做一些降级处理。早期的做法是使用@lea写的Modernizr这个JavaScript库。其实CSS这个@supports做的事情类似于Modernizr这个脚本库,可以通过一定的条件语句,用来判断浏览器(客户端)是否支持CSS的属性规则。

比如前面的说到的grid,我们就可以这样写:

@supports (display:grid) {
 display: grid;
 background-color: #284c6d;
 color: #fff;
}

告诉浏览器,如果支持display:grid就渲染{}里面的CSS属性规则。

来看一个CSS混合模式的示例:

@supports(mix-blend-mode: overlay) {
 .artwork img {
 mix-blend-mode: overlay;
 }
}
@supports not (mix-blend-mode: overlay) {
 .artwork img {
 opacity: 0.5;
 }
}

如查你的浏览器支持mix-blend-mode,将看到下图中间的效果(也就是上面Demo出来的效果),如果不支持,则会看到下图中最右边的效果(图片的opacity变成了0.5):
CSS新特性

@supports也支持与(and)、或(or)和非(not)这样的条件判断的组合,比如下面的这个示例:

@supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip-path:ellipse()))) {
 .balloon {
 border: none;
 padding: 0;
 float: right;
 width: 640px;
 min-width: 640px;
 height: 427px;
 shape-outside: ellipse(33% 50% at 460px);
 -webkit-clip-path: ellipse(28% 50% at 460px);
 clip-path: ellipse(28% 50% at 460px);
 }
}

支持shape-outsideclip-path的浏览器将看到下图左侧的效果,不支持的话将看到下图右侧的效果:

CSS新特性

是不是觉得Conditional CSS非常有意思,如果你对这方面感兴趣,可以看看@Tiffany B. Brown分享的《Conditional CSS》。

如果你想深入了解在CSS中怎么使用@supports,可以点击这里进行了解或者学习。

CSS自定义属性(CSS变量)

记得大家以前说CSS比较鸡肋之处就是CSS不能像其它的语言具有变量之类的特性。不过值得庆幸的是,随着CSS处理器的使用频率越来越高,在CSS中也开始考虑添加CSS处理器的一些特性,最明显的就是CSS的变量,不过在规范中称之为CSS自定义属性

简单的来了解一下CSS自定义属性。在大家熟悉的JavaScript中定义变量是:

var str = "Hello qdskill!";
const PI = 3.14;
let obj = {}

在一些CSS处理器中定义变量和JavaScript这些程序语言都不同,它有其独特的方式:

//SCSS
$primary-color: #f36;
//LESS
@primary-color: #f36;

在CSS中定义变量跟上面的所说的方式都不一样,它采用的是--前缀来声明一个变量,比如:

:root {
 --primary: blue;
 --secondary: orange;
}

在调用变量的方式也是不同,CSS调用变量是采用var()函数:

h1 {
 color: var(--primary);
}

而且CSS的变量、var()函数常常配合CSS的calc()函数一起来使用,比如使用CSS的变量来创建一个网格系统(这里所说的网格系统,不是前面介绍的CSS Grid Layout):

:root{
 --color: #0C3934;
 --bg: #F8EBEE;
 /* Grid */
 --gutter: 10px;
 --columns: 12;
}
.container {
 max-width: 1140px;
 margin: 3em auto;
 padding: var(--gutter);
}
.row{
 display: flex;
 flex-wrap: wrap;
 margin: 0 calc(var(--gutter) - ( var(--gutter) * 2) ) 20px;
}
[class*="m--"]{ 
 padding-right: calc(var(--gutter));
 padding-left: calc(var(--gutter));
 flex-basis: calc((100% / var(--columns)) * var(--column-width)); 
 @for $i from 1 through 12 {
 &.m--#{$i} {
 --column-width: $i;
 }
 }
}

最后看到的效果如下:

有关于怎么使用CSS变量创建一个网格系统,详细介绍可以阅读早前整理的一篇文章《CSS变量创建网格系统》。

如果你从示接触过CSS变量相关的知识,建议你先阅读《深入学习CSS自定义属性(CSS变量)》一文,或者《Conditions for CSS Variables

在CSS中还提供了一个类似CSS处理器混合宏的一个属性@apply。这个属性也是非常有意思。感兴趣的话可以一起了解一下。

其它CSS新特性

除了上面介绍的几个CSS新特性之外,其实还有其它的一些新特性。这里就不做详细的介绍了,感兴趣的话可以阅读下面的相关文章。

特别是将background-blend-modemix-blend-modefilter混合在一起使用,可以做出一些设计软件处理图片的效果,比如在《使用CSS处理图像效果》一文中介绍的示例效果。

另外还有CSS的element()函数,可以让你轻易克隆HTML中的任何一个元素,比如使用它做一个倒影响效果:

到目前为止,支持element()函数的浏览器只有Firefox,如果想查看上面示例的效果,请使用Firefox打开示例。

element()函数可以帮助我们很好的实现倒影效果,在CSS中,除此之外还有一个box-reflect属性

最后给大家提一个制作Web动画相关的属性。在制作路径动画的时候,大家一直都非常的痛苦,我指的是使用CSS制作路径动画。不过将来不会这么痛苦了,现在CSS直接提供了制作路径动画的相关属性(Motion Path Module Level 1)。

不过这几个属性将来会更名为offset-path(对应motion-path)、offset-distance(对应motion-offset)和offset(对应motion)。有关于这方面的介绍,可以看看《CSS Motion Path as of October 2016

这里就不对这些属性做详细的介绍,给大家看一个简单的示例:

有关于这方面的详细介绍,可以阅读早前整理的一篇文章《CSS的motion-path属性》。

总结

上面主要是上周分享的PPT的对应的内容,介绍了一些CSS的新特性,虽然这些新特性目前还无法安全的运用于生产环境,或者说实际项目当中,但这一点都不会影响我们去学习新的知识,以及对这些新特性的探究与尝试。当然这些新特性,说不定哪一天会变成另外一个属性名,但只要我们在持续关注,我们就能很快的掌握这些新特性。当有一天这些属性可以用到实际项目中时,你将是第一个。最后,如果您还有其他CSS的新特性,欢迎一起与我们分享。

原文链接:https://www.w3cplus.com/css/css-future.html

发表评论

登录后才能评论