那些暖人心卻鮮為人知的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開發(fā)者提供了一種告知瀏覽器該元素會有哪些變化的方法,這樣瀏覽器可以在元素屬性真正發(fā)生變化之前提前做好對應的優(yōu)化準備工作。?這種優(yōu)化可以將一部分復雜的計算工作提前準備好,使頁面的反應更為快速靈敏。
擴展閱讀:
具體使用實踐,大家可以看張鑫旭的博客
《使用CSS3 will-change提高頁面滾動、動畫等渲染性能》
http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/
瀏覽器兼容:

推薦閱讀
我的公眾號能帶來什么價值?(文末有送書規(guī)則,一定要看)
每個前端工程師都應該了解的圖片知識(長文建議收藏)
為什么現(xiàn)在面試總是面試造火箭?
評論
圖片
表情
