我以为我对 CSS 变量了解够多够深入了,没想到还是有知识的盲区,今天这个小技巧小特性就是其中之一,并且是相当实用的一个特性。
文章关键字 ‘css var’
介绍一种CSS变量未定义语法也OK的小妙招
2022年06月12日,星期日纯CSS实现未读消息超过100自动显示为99+
2022年01月14日,星期五未读消息超过100显示为99+是常见的交互,目前主流实现一定是通过 JS 逻辑判断,其实纯 CSS 就能实现一模一样的功能,兼容性还不赖,进来看看吧。
巧借CSS var变量实现任意的CSS自定义语法
2020年10月11日,星期日本文介绍一种自定义任意CSS语法、以及Polyfill CSS新特性的技术,这个技术的精华之处就是巧用CSS变量var让这些浏览器本不应该识别的语法也认为是合法的,从而让JS进行解析识别与转化成为了可能,本文通过3个案例演示该技术,希望可以对您的学习有所帮助。
Polyfill吊炸天的CSS attr()新语法
2020年10月10日,星期六CSS attr()新语法可以让HTML属性以任意的CSS属性值类型呈现,足矣对现有的web开发产生颠覆,但是可惜这么好用的东西目前没有任何浏览器支持,本文会介绍我自己找到的一种Polyfill方法,可以让所有支持CSS变量的浏览器都可以使用attr()新语法。
研究了下Houdini中的CSS Layout API
2020年09月13日,星期日目前关于CSS Layout API最详细最深入的文章,内有简单易学全新的自定义布局案例,案例代码有详细的注释描述,彻底弄懂CSS Layout API。
CSS变量对JS交互组件开发带来的提升与变革
2020年07月1日,星期三CSS变量带来的提升绝不仅仅是节约点CSS成本,其可以颠覆目前JS组件交互开发的思路,把原来的JS负责的UI层的东西全部转移到了CSS层,组件代码更简洁,视觉表现实现更灵活,本文会举若干例子展示这种提升与变革。
我是如何通过CSS向JS传参的
2020年02月13日,星期四介绍两种我常用的将CSS媒体查询信息传递给JS的方法,一种是伪元素+content属性发,一种是CSS var自定义属性方法,这样传参有助于降低开发成本,让CSS和JS在一些条件信息上保持一致。