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

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

attr

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

例子:

运行结果:

浏览器支持情况:

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

currentColor

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

例子:

运行结果:

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

兼容性:

user-select

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

例子:

浏览器兼容:

selection

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

例子:

运行结果:

浏览器兼容:

will-change

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

扩展阅读:

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

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

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

浏览器兼容:

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-12-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

编写高性能HTML网页应用

你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可...

3414
来自专栏Nian糕的私人厨房

HTML 基础

超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用来创建并以可视化方式来呈现网页,它确定了一个网...

9263
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 表单

三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。

4723
来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

2486
来自专栏進无尽的文章

绘图-视图遮罩MaskView的使用

可以这样理解,是将maskView每个point的alpha赋值给View的重叠部分相对应的point,这样view的重叠每个point都有个alpha值了,v...

1492
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

23710
来自专栏互联网软件技术

本地多图上传预览

2282
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

1282
来自专栏逸鹏说道

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

2988
来自专栏前端儿

layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

5281

扫码关注云+社区

领取腾讯云代金券