CSS-Tricks网站是一个非常优秀的网站，特别对于CSSer而言，该网站不断的在更新一些优秀的教程和技巧，为前端社区做出了具大的贡献。她一直是我的偶像，也是我学习的榜样，因为我从该网站上学到了很多新技术，让我在CSSer方面的眼界扩展的更大。今年1月份改版之后，整个社交媒体的响应非常的热烈，很多人都为新版赞赏。而我这次参加中国第五届CSS Conf大会之前和@裕波聊过，该和社区的同学聊什么样的话题呢？经过讨论下来，要不就聊聊CSS-Tricks网站这次改版运用的一些新特性，这些新特性又为用户体验带来什么样的改变，甚至为前端开发者又带来什么样的改变？所以借此机会，以我自己的视角来聊聊相关的话题。

CSS-Trick 设计改版本的变更

时至今日，CSS-Tricks网站的改版已经经历了17个版本的变更，每个版本都有其独之处，特别是今年（2019年1月发布的版本）在整个前端社区得到热烈的反响，不管是在Twitter还是Facebook针对改版后的讨论都非常地多。先上一下最早发布版本的视觉截图：

你可以现在访问的版本和所看到的最初版本略有不同，因为该设计（版本）一直在不断的更新。

当然从设计稿上看，只能看出来设计稿和以往版本有何不同的外观效果，但做为技术人员，还是喜欢看看新版的设计运用了什么样的新特性，这些新特性又给用户和我们带来什么样的变化。那么接下来，我们一起来聊了新版用了哪些CSS方面的特性。

V17. 版本技术亮点

前面也提到了，接下来要聊的技术亮点是有关于CSS的，在新版中运用的到技术亮点，主要总结起来有以下几点：

• SVG的使用
• 滚动特性
• 自定义属性
• Web Layout
• 混合模式和滤镜
• 其他(^_^)

这仅仅是从我自己的角度出发的，或许有很多遗漏的，如果您有更多的见解，欢迎在下面的评论中与我们一起讨论和分享。

SVG

对于SVG而言，她是一套独立而又成熟的体系，也有自己的相关规范（Scalable Vecgtor Graphics 2），即 SVG2。虽然该规范已经存在很久了，但很多有关于SVG相关的特性在不同的浏览器中得到的支持度也是有所不一致的。特别是SVG中的渐变和滤镜相关的特性。不过，随着技术的革新，在Web的应用当中SVG的使用越来越多，特别是SVG 图标相关的方面的运用。

在CSS-Tricks新版中，好几个地方都使用了SVG的技术，特别是SVG的图标。比如：

可以说，站上有关于图标都是通过SVG来完成的，而且采用的是SVG Sprites相关的技术。而且该方面的技术也算不上是什么新技术，早久之前就有相关方面的介绍，比如：

• SVG Sprite
• 如何实现跨浏览器的SVG Sprites

Web自1989年到2019年也算是走过了30年的历程了，那么Web上面有关于图标的使用也经历了相应的发展：

• 最早通过<img>标签来引用图标（每个图标一个文件）
• 为了节省请求，提出了Sprites的概念，即将多个图标合并在一起，使用一个图片文件，借助background相关的属性来实现图标
• 图片毕竟是位图，面对多种设备终端，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标
• 当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题，比如说跨域问题，字体加载问题
• 随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显
• SVG和img有点类似，我们也可以借助<symbol>标签和<use>标签，将所有的SVG图标拼接在一起，有点类似于Sprites的技术，只不过在此称为SVG Sprites

有关于这方面更详细的介绍，可以阅读《Web中的图标》一文。

既然SVG Sprites有这么的优势，那么在Web中使用也就理所当然。估计也正因为这些原因，CSS-Tricks网站也使用了该技术。使用该技术并不复杂，比如：

<!-- HTML -->
<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="half-circle" viewBox="0 0 106 57">...</symbol>
    <!-- .... -->
    <symbol id="icon-burger" viewBox="0 0 24 24">...</symbol>
</svg>

SVG Sprites和img Sprites有所不同，SVG Sprites就是一些代码（类似于HTML一样），估计没有接触过的同学会问，SVG Sprites对应的代码怎么来获取呢？其实很简单，可以借助一些设计软件来完成，比如Sketch。当然也可以使用一些构建工具，比如说svg-sprite。有了这个之后，在该使用的地方，使用<use>标签，指定<symbol>中相应的id值即可，比如：

<svg class="icon-nav-articles" width="26px" height="26px">
    <use xlink:href="#icon-nav-articles"></use>
</svg>

使用SVG的图标还有一优势，我们可以在CSS中直接通过代码来控制图标的颜色：

.site-header .main-nav .main-sections>li>a>svg {
    // ...
    fill: none;
    stroke-width: 2;
    stroke: #c2c2c2;
}
.site-header .main-nav:hover>ul>li:nth-child(1) svg {
    stroke: #ff8a00;
}

是不是很简单。如果你是使用类似像Vue或React之类的JavaScript框架之类的，还可以将该特性封装成一个组件，只需要将需要使用的图标存入到指定的位置，借助Webpack构建能力就可以自动生成相应的SVG Sprites代码，使用封装好的组件，在另何需要使用的地方调用即可。比如《如何在Vue项目中使用SVG Icon》一文所介绍的，在Vue中使用SVG图标就非常的容易。

在新版的CSS-Tricks中，除了使用了SVG的图标之外，还使用了SVG的渐变，制作一些渐变的效果。不过这里就不做过多的阐述，感兴趣的同学可以自己的探讨。

有关于SVG更多的内容，可以点击这里进行了解。

滚动特性

有关于容器滚动方面的CSS新特性其实有很多个，比如：

• 自定义滚动条的外观
• scroll-behavior指容容器滚动行为，让滚动效果更丝滑
• overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透
• 滚动捕捉

早前在《改变用户体验的滚动新特性》一文针对滚动特性带来的用户体验改变做过详细的探讨。而在CSS-Tricks新版中，运用了自定义动条的外观和滚动捕捉的特性。

先来看一下自定义滚动条。

在不同的系统和平台下，滚动条的外观都是有所不同的：

虽然不同的平台上滚动条的外观有所不同，但它们对应的关键部分是一样的：

在CSS中，我们可以使用-webkit-scrollbar来自定义滚动条的外观。该属性提供了七个伪元素：

• ::-webkit-scrollbar：整个滚动条
• ::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
• ::-webkit-scrollbar-thumb：滚动条上的滚动滑块
• ::-webkit-scrollbar-track：滚动条轨道
• ::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
• ::-webkit-scrollbar-corner：当同时有垂直和水平滚动条时交汇的部分
• ::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮）

比如上面的视频中，整个页面的滚动条外观就是自定义的，在html中使用-webkit-scrollbar相应的伪元素来完成的：

html {
    --maxWidth:1284px;scrollbar-color: linear-gradient(to bottom,#ff8a00,#da1b60);
    scrollbar-width: 30px;
    background: #100e17;
    color: #fff;
    overflow-x: hidden
}

html::-webkit-scrollbar {
    width: 30px;
    height: 30px
}

html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to bottom,#ff8a00,#da1b60);
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
}

html::-webkit-scrollbar-track {
    background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17)
}

是不是很简单。通过这几个伪元素，可以实现你自己喜欢的滚动条外观效果，比如下面这个示例：

另外，上面的视频还展示了另一个滚动特特，即滚动捕捉。该特性可以为我们提供一个流式精确的滚动体验。比如Swiper的效果：

对于这样的效果，我们都想为触控以及输入设备的用户提供一个流式、精确的滚动体验。而这样的效果，被称为Scroll Snap效果，而早前实现类似的效果需要借助JavaScript库来完成。如今可以使用CSS Scroll Snap Points来实现。

CSS Scroll Snap Points工作原理很简单：