CSS技巧和工作总结

Posted on

工作确实是两点一线的生活。而且偶尔还加班,不过也算是正规的做一些东西了,个人成长来说也还不错。很多稍微有深度的知识也有所接触。于是想写点东西记录下自己的成长。以后再回顾的时候也算有所收获。

CSS层叠水平

CSS的层叠看起来很简单,可以通过z-index来进行调整,但是实际上并没有那么简单。层叠水平总共有7阶,我们实际在使用中的时候要充分考虑。

  1. 形成堆叠上下文环境的元素的背景与边框
  2. 拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)
  3. 正常流式布局,非 inline-block,无 position 定位(static除外)的子元素
  4. 无 position 定位(static除外)的 float 浮动元素
  5. 正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )
  6. 拥有 z-index:0 的子堆叠上下文元素
  7. 拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

这里有个重点概念是堆叠上下文,那么元素是如何形成堆叠上下文呢?

  1. 根元素 (HTML)
  2. z-index 值不为 "auto"的 绝对/相对定位
  3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex
  4. opacity 属性值小于 1 的元素
  5. transform 属性值不为 "none"的元素
  6. mix-blend-mode 属性值不为 "normal"的元素
  7. filter值不为“none”的元素
  8. perspective值不为“none”的元素
  9. isolation 属性被设置为 "isolate"的元素
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
  12. -webkit-overflow-scrolling 属性被设置 "touch"的元素

如果符合上面规则,会形成层叠上下文。层叠上下文的背景一定是最下面的,想要通过z-index来调整浮动在其他元素上方是不可能的。

DOM Ready

如果巧妙的在DOM加载完成之后来执行JS呢,最简单的方法是把JS放在body的最下方。但这样处理有些麻烦,最简单的方法是使用setTimeout方法,设置延迟时间为0。延迟时间为0并不意味着这段代码会立即执行,而是等到所有JS加载和执行完毕,DOM也加载完毕的时候才执行。

Safari Scroll

手机版Safari在滑动的时候如果有动画执行,会导致整个页面空白。当滑动结束的时候才会渲染。我们不得不采用给所有元素添加transform: translate3d(0,0,0)属性, 来使Safari强制使用GPU加速。

CSS动画性能加速

CSS动画尽量使用transform: translate3d(0,0,0)来实现,因为ransform3d api会强制开启GPU加速提高页面的流畅度。在公司的项目中,从使用background-position进行动画效果换成transform之后,动画流畅度得到了显著的改善。

参考:

Stack Overflow

The stacking context

层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

tagged: css
comments powered by Disqus