阅读 2256

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

(本文完)