那些暖人心却鲜为人知的CSS属性

前端桃园 | 2 2020-01-13 23:28 0 1 1

ecec63ac062d0bfa767b925b8643f69c.webp


CSS中有很多设计很体贴但很少有人知道的属性,今天就总结一下这些属性。

1a7c2a386714ca1a85351d4033353f03.webp



attr

CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。


例子:

b0b6c03cab5e8ab7f873b7325c0ea239.webp3447ecde05d34f1af0ac713dff0d12df.webp

运行结果:

16fab043003c1482fa3756a31a94cd2b.webp

浏览器支持情况:

IE只有IE11才支持,其他浏览器可以安全使用

1f2bb05403c9bedc85a2c22443de228d.webp


currentColor

currentColor不是一个css属性,而是color的属性值。它返回当前的标签所继承的文字颜色。


例子:

0942f0e17f66c9a4d4d947f3f10a2fae.webp08606caa76b8c163b8a564313cae9e95.webp

运行结果:

77f78438b08353aab4e8ba12990659b2.webp

可以看出,最终.inside的border颜色为red,即当前元素的color值。


兼容性:

7b3aa0b0df597abc99acc4dd7e0b381d.webp


user-select

控制选取能否被选择. (可以禁止用户选中内容)


例子:

f6452ae67ca72b6d7f62d87692c8dc1f.webp

浏览器兼容:

590c115001dd2d1e96a7f501f74ec3c8.webp


selection

::selection CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。


例子:

5409b67ed59156664d8eb7ed3424fac7.webp3bdbf1a3bcad1d1d0b2f35ebbff40e41.webp

运行结果:

9e7fa912b0651be09c21a3d6d70c26a8.webp

浏览器兼容:

12614f242b68ea1be873bb6f2aec55af.webp



will-change

CSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。


扩展阅读:

具体使用实践,大家可以看张鑫旭的博客

使用CSS3 will-change提高页面滚动、动画等渲染性能

http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/


浏览器兼容:

ebc37e7ed13d31981e1083f7ed2fc529.webp


推荐阅读




我的公众号能带来什么价值?(文末有送书规则,一定要看)

每个前端工程师都应该了解的图片知识(长文建议收藏)

为什么现在面试总是面试造火箭?

ad2b54cdd7b2bfcea389a3280ef90fdb.webp

good-icon 1
favorite-icon 1
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter