The Z dimension

This talk is about browsers

Browsers paint

• Painter's algorithm

• Back-to-front

• Every element independently

• There is no depth only order

<div class="a">
  A
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="b">B</div>

Glen's pro-tip #1 for navigating the Z dimension

box-shadow ftw!

div:hover, span:hover { box-shadow: 0 0 40px 40px black; }
<div class="a">
  A
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="b">B</div>
html { color: red; }
<div class="a">
  A
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<div class="b">B</div>
span { background-color: hsl(45,80%,80%); }
<div class="a">
  A
  <div class="c">C</div>
  <div class="d">
  <span>INLINE</span>
  </div>
</div>
<div class="b">B</div>
.fl { float: left; }
<div class="a">
  A
  <div class="c">C</div>
<div class="fl">FLOATED</div>
  <div class="d">
    <span>INLINE</span>
  </div>
</div>
<div class="b">B</div>
.pos { position: relative; }
<div class="a">
  A
  <div class="c">C</div>
  <div class="fl">FLOATED</div>
<div class="pos">POSITIONED</div>
  <div class="d">
    <span>INLINE</span>
  </div>
</div>
<div class="b">B</div>
.neg {
position: absolute; z-index: -1;
top: 250px; right: 20px; }
<div class="a">
  A
  <div class="c">C</div>
  <div class="fl">FLOATED</div>
  <div class="pos">POSITIONED</div>
  <div class="d">
    <span>INLINE</span>
  </div>
<div class="neg">NEGATIVE</div>
</div>
<div class="b">B</div>
.pve {
position: absolute; z-index: 1;
top: 20px; right: 20px; }
<div class="pve">POSITIVE</div>
<div class="a">
  A
  <div class="c">C</div>
  <div class="fl">FLOATED</div>
  <div class="pos">POSITIONED</div>
  <div class="d">
    <span>INLINE</span>
  </div>
  <div class="neg">NEGATIVE</div>
</div>
<div class="b">B</div>

CSS

Drawn back-to-front:

• Positioned + neg z-index

• Block elements

• Floated elements

• Inline elements

• Positioned + z-index auto,0

• Positioned + z-index > 0

Stacking contexts

Stacking contexts:

• Encapsulates an element & its children

• Seems to 'flatten' an element

• Element & children drawn together

.a { position: relative;
     z-index: auto; }
<div class="pve">POSITIVE</div>
<div class="a">
  A
  <div class="c">C</div>
  <div class="fl">FLOATED</div>
  <div class="pos">POSITIONED</div>
  <div class="d">
    <span>INLINE</span>
  </div>
  <div class="neg">NEGATIVE</div>
</div>
<div class="b">B</div>
.a { position: relative;
   z-index: 0; }
<div class="pve">POSITIVE</div>
<div class="a">
  A
  <div class="c">C</div>
  <div class="fl">FLOATED</div>
  <div class="pos">POSITIONED</div>
  <div class="d">
    <span>INLINE</span>
  </div>
  <div class="neg">NEGATIVE</div>
</div>
<div class="b">B</div>

Stacking contexts:

• Opacity < 1

• Position: fixed (Chrome & Mobiles)

• Position: !static && z-index: !auto

• -webkit-transform

• -webkit-filter

• CSS regions & pages

Learn the theory and apply it.

Measure the browser and reason about it.

Chrome is amazing

DEMO #1

Google Chrome Canary:
--enable-threaded-compositing
--force-compositing-mode
--enable-impl-side-painting
--enable-skia-benchmarking
--allow-webui-compositing

Layers

• Drawn separately by the GPU

• Like a 'super' stacking context

• Big performance implications

• Up to the browser

DEMO #2

• CSS animations (for opacity & transforms)

• 3D transforms & perspective

• Video, Canvas or Plugin w/ GPU acceleration

• CSS filters

• A stacking context drawn on top of another layer

Tooling is getting much better

DEMO #3

Don't fear the Z dimension

• hover + box-shadow

• Chrome tracing

Layers panel