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

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

聊CSS新特性现状

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

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

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

要聊的CSS新特性

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

CSS Box Alignment

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

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

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

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

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

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

上面示例看到的是这些属性运用在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布局：图解网格布局中术语之一
• CSS Grid布局：图解网格布局中术语二
• CSS Grid布局：图解网格布局中术语三
• 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 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
• @supports
• @viewport

有关于@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）:

@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-outside和clip-path的浏览器将看到下图左侧的效果，不支持的话将看到下图右侧的效果:

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

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

CSS自定义属性（CSS变量）

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

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

var str = "Hello W3cplus!";
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 @apply rule (native CSS mixins)
• CSS mixins with @apply rule

其它CSS新特性

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

• CSS混合模式
• CSS滤镜

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

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

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

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

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

• motion-path
• motion-offset
• motion-rotation
• motion

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

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

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

总结

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

如需转载，烦请注明出处：http://www.w3cplus.com/css/css-future.html