深藏的5个你可能不知道的CSS属性

2020-04-30 15:16:50易采站长站整理

听起来很酷,对吧?好消息是,Chrome 53+,Opera 43+,Firefox 52+,Safari 10和Android目前支持此属性。 (IE和Microsoft Edge不支持😂)。慢着,在继续之前,您应该注意一些事情:

您不应该将此属性应用于太多元素即使您的页面运行良好。它会减慢运行速度并消耗大量的资源和内存,这很不友好。

您应该在更改发生之前和之后使用脚本代码切换开启will-change。

这个属性不应该用来预测和解决潜在的性能问题。在出现问题后,它必须被视为最后的手段。

will-change属性可以用来避免我们多年来一直在使用的hack:使用translateZ()(或translate3d())来推动浏览器动画并转换成硬件加速。

will-change支持四个值:

auto:浏览器不会设置任何特殊的优化。 这与没有指定属性一样具有相同的效果。
scroll-position表示,顾名思义,您希望在不久的将来随时更改元素的滚动位置。 一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候,该值可用于提示浏览器准备渲染内容。
contents:指定要更改元素的内容。

<custom-indent>你期望改变的一个或多个CSS属性的名字,你可以使用逗号将这些属性隔开,比如说transform<font color="#373a3c" face="-apple-system, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif"><span style="font-size: 16px; background-color: rgb(255, 255, 255);">和</span></font>“opacity。

结论

在本文中,我已经描述了五种新的有趣的CSS属性,这些属性可能你以前都不知道。