图解CSS：CSS滚动捕捉这一章节分成两个部分，第一部分主要介绍了 CSS 滚动捕捉理论方面的知识，详细介绍了 CSS 滚动捕捉中的 scroll-snap-type 、scroll-snap-align 、scroll-margin 、scroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分，也就是接下来的内容中，从简单的示例着手（有些示例在第一部分也出现过），慢慢过渡到复杂的示例，比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话，请继续往下阅读。

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块，可以用来创建一个可滚动的容器，可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说，使用该特性（CSS 的滚动捕捉特性）是快速将元素制作成可滚动容器的一种简单快速的方法。另外，CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性，即 CSS 滚动捕捉。

在Web中制作动效姿势有很多种，比如说纯CSS制作动效，JavaScript制作动效等。但话又说回来，如果你使用CSS来制作动效的时候会有不少的限制，虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化，但还是有一定的缺陷在这里面。不过，CSS Houdini的到来，不说其自身的Animation API，就说他的自定义属性的出现，就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说，CSS Houdini的自定义属性 @property 可以扩展CSS的动效，也可以帮助我们提高CSS开发动效的能力。这篇文章，主要就是和大家一起来探讨，CSS Houdini的自定义属性是如何扩展动效开发的能力。

用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

最近在Codepen上看到了@Adir写的随机翻牌和找蛋蛋（可以想象是砸金蛋）效果，让我再次刷新了对CSS的认知。看到这两个效果之后我才知道，在CSS中除了可以实现 动态计算 ， 逻辑运算 和 状态切换 之外，也可以使用纯CSS实现随机效果。你是否和我一样，听到纯CSS实现随机效果有点不可思议，但这是事实，在CSS中，我们可以借助CSS动画的能力来模拟部分随机效果。如果你也想了解CSS如何实现随机效果的话，那阅读这篇文章你将知道其中的原委。

CSS自定义属性已是CSS中非常成熟的特性了，也是近两年非常受欢迎的特性。它的到来让CSS像其他编程语言一样，可以在编写CSS的时候变量，而且还可以在CSS具备动态计算、逻辑运算和状态切换等特性。特别是CSS Houdini的CSS自定义属性更进一步的扩展了CSS的能力。就我个人而言，在几年前CSS自定义属性就进入我的世界，而且相关的规范也阅读过好几次。但自从阅读了@Lea Verou的《The -​-var: ; hack to toggle multiple values with one custom property》一文之后，我才发现自己遗漏了CSS自定义属性中一个非常关键，而且非常强大的特性。那就是CSS自定义属性中的无效变量，即var()函数中使用了一个无效的变量。如果我们在使用CSS自定义属性的时候，要是有效的使用了无效变量，它可以帮助我们实现一些非常有意思的功能。比如说状态切换，主题切换等。在接下来，我们就一起来探讨这方面的话题。

自从CSS的calc()函数得到浏览器的支持起，在CSS中就可以做一些简单的数学运算。如果你阅读过 图解CSS系列 中的 《CSS函数》一文的话，你会发现现在或将来有更多的函数可以直接帮助我们在CSS做一些计算，比如颜色计算、三角函数的计算等。尤其是CSS的min()、max()、clamp()以及CSS Grid布局模块中的minmax()出现之后，网页布局带来了革命性的变化。除此之外，在一些特定的环境之下，还有一些其他的CSS函数可以帮助我们做一些动态计数和计算。今天在这篇文章中就来和大家聊聊这方面的话题。

最近看了一些设计相关的教程，看到几个有关于设计效果相关的专业术语，比如微软的 Fluent设计系统 中的亚克力效果（Acrylic Material），Mac OS的磨砂玻璃效果（Frosted Glass）。另外，记得去年 @Michal Malewicz的《Neumorphism in user interfaces》一文掀起了围绕“Neumorphism”设计风格的讨论，当时一度认为该设计风格将会是2020年的设计趋势，事实上去年并没有以这种设计风格为主流，而且很多人认为“Neumorphism”的UI风格是一种可怕的设计风格。不过，最近在Codepen上看到另一种设计风格，这种风格同样是@Michal Malewicz 提出来，并称之为“ 玻璃变形（Glassmorphism) ” 的UI风格，这种风格已在一些产品中出现，比如三星的一些广告和MKBHD的介绍视频。在设计圈很多设计师提出“玻璃变形（Glassmorphism）”设计风格运用得当，可以起到引人注目的效果。

2020年底@Una Kravets在CDS（Chrome Developer Summit 2020）分享了使用Houdini扩展CSS的话题，同时推出了 Houdini.how。让我们可以使用CSS Houdini的Paint API进行创作，并通过 CSS Paint Polyfill 让不支持CSS Houdini的Paint API的现代浏览器也能运行Paint API扩展的CSS能力。你或许和我一样，对此感到好奇是吧？如果是的话，请继续往下阅读。

过去一年来花了不少时间来研究CSS自定义属性相关的特性，而且在站上也发了多篇有关于CSS自定义属性相关的教程，其中有关于CSS自定义属性，也有涉猎CSS Houdini自定义属性相关的。但我想很多同学除了希望了解CSS自定义属性理论相关的知识之外还更想了解CSS自定义属性能做什么吧。在这篇文章中，我将整理一些有关于CSS自定义属性在实际开发中能做什么，并会在文章中提供相应的一些使用实际。希望能通过具体的实例帮助大家更好的理解和使用CSS自定义属性。