CSS attr()新语法可以让HTML属性以任意的CSS属性值类型呈现,足矣对现有的web开发产生颠覆,但是可惜这么好用的东西目前没有任何浏览器支持,本文会介绍我自己找到的一种Polyfill方法,可以让所有支持CSS变量的浏览器都可以使用attr()新语法。
“CSS相关”目录存档
Polyfill吊炸天的CSS attr()新语法
2020年10月10日,星期六flex:0 flex:1 flex:none flex:auto应该在什么场景下使用?
2020年10月6日,星期二flex:initial适合小部件元素的分布布局,flex:0适合用到替换元素的场景,flex:none适合按钮等不换行的小控件,flex:1适合等分布局,flex:auto适合基于内容动态适配的布局,具体的剖析可以点击链接进行查看。
研究了下Houdini中的CSS Layout API
2020年09月13日,星期日目前关于CSS Layout API最详细最深入的文章,内有简单易学全新的自定义布局案例,案例代码有详细的注释描述,彻底弄懂CSS Layout API。
CSS overflow-anchor属性与滚动锚定
2020年08月12日,星期三带大家了解下滚动锚定概念以及对应overflow-anchor属性的作用和特性,虽然不是常用CSS,但是,关键时候说不定就救命了。
颠覆,原来background-image也是支持CSS动画的
2020年08月6日,星期四在我以前的认知里,background-image是不能有动画或过渡效果的,但是,今天发现并不是这样的,CSS animation
动画和transition
过渡都可以触发A背景图到B背景图淡入淡出效果。
深入理解CSS background-blend-mode的作用机制
2020年07月22日,星期三CSS mix-blend-mode属性比较好理解,效果都符合预期,然而background-blend-mode属性的混合效果常出乎意料,那是因为背景混合模式的作用机制有一点特殊,本文就带大家深入理解background-blend-mode的作用机制。
巧用CSS cross-fade()实现背景图像半透明效果
2020年07月6日,星期一虽然CSS新特性非常多,但所有这些新特性,没有任何特性可以实现元素的背景图像半透明,但是元素中的文字内容依然不透明的效果,除了一个例外,那就是cross-fade()图像函数。
CSS变量对JS交互组件开发带来的提升与变革
2020年07月1日,星期三CSS变量带来的提升绝不仅仅是节约点CSS成本,其可以颠覆目前JS组件交互开发的思路,把原来的JS负责的UI层的东西全部转移到了CSS层,组件代码更简洁,视觉表现实现更灵活,本文会举若干例子展示这种提升与变革。
使用CSS text-emphasis对文字进行强调装饰
2020年06月16日,星期二过去想要强调文字,做法是加粗,或者使用高亮颜色,现在可以使用text-emphasis
属性进行强调装饰,我们可以指定任意的装饰字符,很实用的一个CSS新属性。
CSS gap属性进化史
2020年06月7日,星期日带大家了解下gap
属性的前世今生,了解gap
属性在CSS世界3大布局中的过往和现状。