剖析CSS-Trick,为我所用

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相关的技术。而且该方面的技术也算不上是什么新技术,早久之前就有相关方面的介绍,比如:

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工作原理很简单:

通过在 x 以及 y 轴上定义“捕捉”来控制滚动容器的滚动行为。当用户在水平或者垂直方向滚动时,利用捕捉点,滚动容器会捕捉到内容区域的某一点。

Scroll Snap Points主要提供了以下几个属性:

  • scroll-snap-type:定义在滚动容器中的一个捕捉点如何被严格的执行
  • scroll-snap-type-x:定义在滚动容器中水平轴上捕捉点如何被严格的执行
  • scroll-snap-type-y:定义在滚动容器中垂直轴上捕捉点如何被严格的执行
  • scroll-snap-coordinate:结合元素的最近的祖先元素滚动容器的 scroll-snap-destination 定义的轴,定义了元素中 xy 坐标偏移的位置。如果元素已经变型,捕捉坐标也以相同的方式进行变型,为了使元素的捕捉点向元素一样被显示
  • scroll-snap-destination:定义滚动容器的可视化 viewport 中元素捕捉点的 xy 坐标位置
  • scroll-snap-points-x:定义滚动容器中内容的捕捉点的水平位置
  • scroll-snap-points-y:定义滚动容器中内容的捕捉点的垂直位置
  • scroll-snap-align:元素相对于其父元素滚动容器的对齐方式。它具有两个值 xy。如果你只使用其中的一个,另外一个值默认相同
  • scroll-snap-padding:与视觉窗口的滚动容器有关。工作原理也相近与正常的内边距,值设置一致。此属性具有动画效果,所以如果你想要对齐捕捉点进行滚动,这将是一个很好的而选择

随着技术的变更,该特性相关的属性也发生了相应的变化:

其中scroll-snap-alignscroll-snap-destinationscroll-snap-coordinatescroll-snap-type是其中较为重要的几个属性,简单的用下图来向大家描述:

比如CSS-Tricks上就使用了相关的特性:

该特性如果应用得好,效果会更有意思,比如下面这个示例:

自定义属性

CSS自定义属性对于很多前端同学可能并没有接触过,甚至没有听说过,但如果说CSS的变量,估计就很多同学有听说过。但这里再次强调,我们应该纠正这样的说法:

CSS没有变量,没有变量,没有变量;只有自定义属性,只有自定义属性,只有自定义属性!

CSS自定义属性在W3C规范是独立的一个模块,目前是 Level 1版本(CSS Custom Properties for Cascading Variables Module Level),另外还有一个Level 2版本(目前处于ED阶段)。该特性虽然在CSS中的历史不长,但很多开发者都非常这个特性,在Youtuebe和Facebook页面上都可以看到它们的影子:

在CSS-Tricks这次改版后的代码中,同样也看到了CSS自定义属性:

而且在互联网上,有关于CSS 自定义属性的教程和案例特别的多。这里推荐大家阅读@Michael Riethmuller在SmashingMagazine上的一篇博文《A Strategy Guide To CSS Custom Properties》(注,中文可以点击这里阅读)。如果你从未接触过CSS自定义属性的话,我建议你先花点时间阅读《是时候开始使用自定义属性》一文。

回到我们的主题中来,CSS 自定义属性使用非常的简单,但就是这些简单的使用可以帮助我们构建出非常优秀的东东出来。当然,还能让我们更好的编写和维护CSS代码。接下来通过几个小示例来向大家简单的介绍一下。

为了让新接触的同学对CSS自定义属性有点概念或印象,简单的来看一下他的基本使用。当然,如果接触过CSS处理器的同学,过渡过来还是非常快的。比如你曾经使用过Sass或LESS这样的处理器,你编写代码的时候可能会像下面这样:

/* SCSS */
$color: red;
a {
    color: $color;
}

/* LESS */
@color: red;
a {
    color: @color;
}

而CSS自定义属性的声明也非常的类似,先用--properyName: value这样的形式来声明一个自定义属性,然后通过var()函数来调用:

:root {
    --color: red;
}

a {
    color: var(--color)
}
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-css-conf-5.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部