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的中文文章寥寥无几，佛家有云，我不入地狱谁入地狱，只要可以帮到一部分人，哪怕只是行业的一小撮，也是颇有价值的。

（本文完）