10月11月写的十几篇CSS文章综述

1. CSS :visited伪类选择器隐秘往事回忆录

主要介绍CSS :visited伪类选择器，由于安全方面的限制，很多你以为可以使用的CSS属性，在:visited这里都是不能使用的，当然，很多很多其他怪异的特性。如有兴趣，可以点击这里阅读原文。

2. CSS scroll-behavior与页面滚动平滑

这篇文章主要介绍通过添加一句简单的scroll-behavior属性，就可以让页面的滚动定位变得很平滑，渐进增强属性，实际项目可以使用，非常适合锚点导航，以及返回顶部这些功能。如有兴趣，可以点击这里阅读原文。

3. 有人考了我一道CSS题目

有人考了我一道CSS布局相关的问题，我觉得很有意思，便拿出来分享。如果你也想挑战一番，可以访问这里。

4. CSS margin-inline和margin-block区别是什么？

看标题似乎讲的是区别，实际上，就是介绍CSS margin-inline和margin-block这两个新CSS属性，以及，算是第一次比较正式介绍CSS逻辑属性。在CSS3中，inline, block都属于逻辑属性范畴，有可能表示x方向，也有可能表示y方向，与文档流方向有关，想了解相关知识，可以点击这里阅读原文。

5. 写给自己看的display:flex布局教程

如题，就是讲display:flex布局的，文中所有的属性的样式表现，都可以通过操作看到实时表现，而非静态图片，理解起来要更直观。同时，很多属性的规则描述要比现有的很多文章介绍的要更详尽，对于初学者一定是一个很不错的学习教程。如果之前没有学过display:flex布局，可以点击这里看看究竟有没有说的好。

6. 写给自己看的display:grid布局教程

讲display:grid布局的文章，各个属性值样式也是实时预览。display:grid布局比display:flex布局要复杂40%，有人对我这篇文章评价是，终于在这里看懂了display:grid布局。说明，相对来讲，教程内容还是比较通俗易懂的。display:grid布局可以说是一个二维布局，更适合大的主体结构的实现。属性较多，要想熟练使用，需要多多实践。如有兴趣，可以点击这里看看能不能学到写什么。

7. 如何HTML标签和JS中设置CSS3 var变量

这篇文章不纯粹是CSS文章，但主要还是讲CSS3 var变量相关的知识的。在CSS文件或者CSS语法中使用CSS原生变量驾轻就熟，但是如何通过JS代码动态创建或者改变CSS变量值怕是很多人就不知道了。需要用到不太常用的一个API，究竟是什么，可以点击这里阅读这篇短篇。

8. CSS filter:hue-rotate滤镜实现按钮快捷复制

传统按钮都是通过具体色值进行赋色的，但是有代码量大，开发维护成本高，且色值之间饱和度亮度存在差异问题。有没有什么简单的方法可以快速批量产生出各种颜色的按钮呢？有！就是借助CSS filter:hue-rotate色调旋转滤镜。如果是实现细节有兴趣，可以点击这里阅读原文。

9. CSS前景背景自动配色技术简介

这篇文章很有意思，让CSS有了编程语言的味道。

借助CSS3的边界特性和CSS3变量，已经可以实现根据不同的背景色显示不同的前景色进行匹配了。也就是，自动浅色背景使用深色文字，深色背景使用浅色文字，包括边框也可以自动配色呈现。对这种技术感兴趣的可以点击这里阅读原文。

10. 纯CSS实现任意格式图标变色的研究

既然CSS filter:hue-rotate可以通过改变色调复制按钮，那是不是可以使用filter滤镜把各种格式图标变成任意颜色呢？因为有这样的想法，我就研究了下如何使用纯CSS改变PNG图标SVG图标到指定颜色，并记录在这篇文章中，里面包含多种方法，相信你一定会有所收获，点击这里阅读原文。

11. CSS届的绘图板CSS Paint API简介

这是我第一次以文章的形式介绍CSS Houdini相关知识。CSS Paint API是CSS Houdini的一部分，是目前应用比较多的API之一，可以看成是CSS届的绘图板。看过这篇文章的人都认为CSS越来越有意思了。本文就将通过一个简单的案例，带你快速了解CSS Paint API，本文属于前端技术广度方面的学习，博闻强识。想增加自己CSS知识广度，走在CSS技术前沿的同学可以点击这里一探究竟。

12. 5分钟快速了解下CSS color-adjust属性

color-adjust就算没有兼容性问题，以后也不会大规模使用，属于有用但不常用的CSS属性。该属性已经加入了CSS Color 4规范，与色彩表现呈现有关，是个和用户体验走得比较近的CSS属性，究竟这个属性是干嘛的呢？哈哈，可以点击这里快速了解下，最多占用你5分钟时间，保不准以后可以用到它。

13. 要不过来了解下CSS Scroll Snap？

CSS Scroll Snap是CSS中一个独立的模块，包含多个CSS属性，例如scroll-snap-type，scroll-snap-align等，是一个和滚动有关的CSS属性，上面提到的CSS scroll-behavior属性虽然也是和滚动相关，但两者定位差异较大，Scroll Snap本质上是定位，只是定位时候顺便平滑；而scroll-behavior纯粹平滑滚动。

CSS Scroll Snap可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置。那种多屏H5，或者slide切换效果可以借助这个CSS实现。更多知识可以点击这里进行获取。

14. 还是说说position:sticky吧

我之前傻傻以为position:sticky就是position:relative和position:fixed的结合体，然后，一番研究下来，发现，position:sticky还是有很多特性和想的是不一样的，你不加以了解，你肯定会遇到“怎么sticky没有效果”这种问题；而且，利用position:sticky可以实现很精致的交互布局效果，这篇文章就介绍了，其他地方可不多见哦。

另外，有一段时间Chrome放弃了对position:sticky支持，我也就不关心这个声明了，最近偶然发现，卧槽，Chrome又支持了。看来这个声明以后成为标准是板上钉钉的事情了，因此，大家放心学习之，不要担心以后没用。学习请访问这里。

15. CSS蛋疼应用之：数据上报和HTML验证

这篇文章介绍了两个我觉得比较蛋疼但有意思的CSS应用，一个就是纯CSS实现数据上报，用户行为跟踪；另外一个就是纯CSS实现HTML验证，并且在页面上进行提示。比较有脑洞，有想法，虽然以后估计用不到，但是，其中新奇的思路说不定对于我们开阔眼界很有帮助。如有兴趣，请点击这里阅读原文。

16. CSS font-feature-settings 50+关键字属性值完整介绍

这篇文章非常长，介绍CSS font-feature-settings属性的，CSS font-feature-settings属性虽然算是兼容性比较好的属性了，但是，似乎大家见得少，用得也少，为什么呢？font-feature-settings属性可以让OpenType字体排版更精美，更符合实际开发需要，但是，往往需要自定义字体的支持，对于英文而言，造一个自定义字体成本太低了，无数多的字体可用，但是，对于中文，啧啧，光常见的简体中文汉字就好几千，这字体成本很高。没有了这些内置font特征的字体，自然CSS font-feature-settings属性也就没有效果了，这就是CSS font-feature-settings用得不多的原因之一。

但，我们平常开发，还是少不了和数字字母打交道，因此，了解CSS font-feature-settings还是有价值的，本文更像是一篇CSS科普，完整展示浏览器目前支持的50多个字体特征标签的作用和样式表现。

最后，忍不住称赞下自己，font-feature-settings这篇文章的工作量巨大，且注定不是个热门CSS属性，对于我个人而言，实际上是投入产出比很低的一件事情，有这个精力在掘金上写写小册这类付费阅读的东西肯定更划算啊。但是，如果我不把这篇文或者整理出来，那这方面的资料就真的稀缺了，写这篇文章之前我搜索了下，介绍font-feature-settings的中文文章寥寥无几，佛家有云，我不入地狱谁入地狱，只要能够帮到一部分人，哪怕只是行业的一小撮，也是很有价值的。

（本文完）