The CSS rendering pipeline explained

ComposePaintLayoutStyleDOM
Content
Parsing
Network
{the pipeline}@gregwhitworth

JS
Content
Parsing
Network
@gregwhitworth {the pipeline}

JS
Input
Content
Parsing
Network

JS
Input
ComposePaintLayoutStyleDOMNetwork
Content
Parsing

.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;
}
@gregwhitworth {style}
Selector
.fancy-button

.fancy-button {
background: green;
font-size: 1em;
}
Selector Property Value
.fancy-button background-color rgb(0,255,0)

.fancy-button border-size 3px
.fancy-button border-color rgb(255,0,0)
.fancy-button border-style solid
.fancy-button {
background: green;
font-size: 1em;
}

.fancy-button {
background: green;
font-size: 1em;
}
.fancy-button border-size 3px
.fancy-button border-color rgb(255,0,0)
.fancy-button border-style solid
.fancy-button font-size 1em

Declared: What the author wrote
Value Types
width: 506.456789132456489787px

Specified: Declared + defaults
Value Types
width: auto

Computed: Resolution of specified
Value Types
font-size: 1em16px

Used: Result of layout calculations
Value Types
width: 50%300px

Actual: UA specific adjustments
Value Types
width: 506.456789132456489787px506.45px

DOM Tree
Collection of
styles
Collection of
styles
Collection of
styles
Matching
Algorithm

The User Agent should have
everything resolved except
what requires layout

width: 1in;
Before After
width: 50%;
height: calc(10px + 2em);
border-color: currentColor;
height: 50vh;
width: 96px;
width: 50%;
height: 42px;
border-color: rgb(0,255,0);
height: 540px;

A score awarded to a selector
based on the count of tags,
classes, id’s, !important, &
attribute selectors used
Specificity

Inline styles win out over all
selectors unless an !important
was used
Specificity

• !Important
• Style Attribute
• ID
• Classes, Psuedo Classes, attr
• Elements & Psuedo Elements
Specificity

li 0 0 0 0 1

li 0 0 0 0 1
li.foo 0 0 0 1 1

li 0 0 0 0 1
li.foo 0 0 0 1 1
#comment li.foo.bar 0 0 1 2 1

li 0 0 0 0 1
li.foo 0 0 0 1 1
<li style=“color: red”> 0 1 0 0 0

li 0 0 0 0 1
li.foo 0 0 0 1 1
<li style=“color: red”> 0 1 0 0 0
color: red !important 1 0 0 0 0

bit.ly/css-short-selectors
“Keep your CSS selectors short”
by Harry Roberts

An origin is what determines
where the stylesheet is placed
within the cascade
Style Origins

User Agent
Author
User
3 currently specified origins
: Renders CSS
: Web Developer
: Person using site

1. User
2. Author
3. User Agent
Ordering in the cascade

.fancy-button {
background: green;
font-size: 1em;
}
Origin Selector Property Value Specificity
Author .fancy-button background-color rgb(0,255,0) 0,0,0,1,0
Author .fancy-button border-style Solid 0,0,0,1,0
Author .fancy-button border-size 3px 0,0,0,1,0
Author .fancy-button border-color rgb(255,0,0) 0,0,0,1,0
Author .fancy-button font-size 16px 0,0,0,1,0
Author div .fancy-button background-color rgb(255,255,0) 0,0,0,1,1
User * font-size 25px 1,0,0,0,0
div .fancy-button {
background: yellow;
}

.fancy-button {
background: green;
font-size: 1em;
}
div .fancy-button {
background: yellow;
}

Property Value
border-style Solid
border-size 3px
border-color rgb(255,0,0)
background-color rgb(255,255,0)
font-size 25px
.fancy-button

Block formatting context (BFC)
Floats, absolutely positioned elements, block
containers (such as inline-blocks, table-cells, and
table-captions) that are not block boxes, and block
boxes with 'overflow' other than 'visible' (except
when that value has been propagated to the
viewport) establish new block formatting contexts
for their contents.
@gregwhitworth {layout}

Block formatting context (BFC)
Absolute
Positioned Box
This box creates a
new BFC

Containing block
The ancestor block that styles
are resolved against

http://bit.ly/containing-block
W3C CSS 2.2 Definition of
Containing Block

Containing Block
position: fixed

Initial Containing block (ICB)
A rectangle that is computed
based on the top-most box or
page box.

Initial Containing Block (ICB)
The red dashed
box is the ICB

LTR/RTL Writing Mode
INLINE
DIRECTION
INLINE
DIRECTION
Vertical Writing Mode

LTR/RTL Writing Mode
BLOCK
DIRECTION
BLOCK
DIRECTION
Vertical Writing Mode

Box Model
Padding Box
Content Box
Border Box
Margin Box

The flow
You move in document order
laying out each child in the
direction of the boxes
writing mode

Float
<body>
<div> <p>
DOM Tree
float: left;
text
node
<p>
text
node

For each element in the DOM
there will be 0 or more boxes
in the box tree

<body>
<div> <div>
DOM Tree
CSS Box
CSS Box
Box Tree
CSS Box

<body>
<div> <div>
visibility: hidden;
DOM Tree
CSS Box
CSS Box
Box Tree
CSS Box

<body>
<div> <div>
display: none;
DOM Tree
CSS Box
CSS Box
Box Tree

<body>
<div> <div>
DOM Tree
CSS Box
CSS Box
Box Tree
CSS Box
visibility: hidden;

When necessary, boxes will be
generated that are not in the
DOM, these are known as
anonymous boxes

<body>
<div>
display: table-cell;
DOM Tree
CSS Box
Table Box
Box Tree
Table Grid
Box
CSS Box

<body>
<p>
Hello World
</p>
</body>
HTML CSS
body {
width: 50px;
}
Basic Example

DOM Tree
Basic Example
<body>
<p>
width: 50px
text
node
Box Tree
CSS Box
CSS Box
Line Box Line Box
Why are there 2 line boxes for
the 1 text node?

Basic Example
Box Tree
CSS Box width: 50px
<body>

Basic Example
Box Tree
CSS Box
CSS Box
<body>
<p>

Basic Example
Box Tree
CSS Box
CSS Box
Line Box
Hello World
<body>
<p>

Basic Example
Box Tree
CSS Box
CSS Box
Line Box
Hello
World
Line Box
<body>
<p>

When your your inline
dimensions depends on its
contents.
Shrink-to-fit Context

Lorem ipsum dolor sit
amet, consectetur ad
adipiscing elit. Nullam pellentesq
SHARE IT

<article>
<button>
SHARE IT
</button>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam
pellentesq
</p>
</article>
HTML
CSS
article {
min-width: 400px;
max-width: 800px;
background: rgb(191,191,191);
padding: 5px;
}
button {
float: left;
background: orange;
padding: 3px 10px;
border: 2px solid blue;
margin: 5px;
}
p {margin: 0;}

DOM Tree
<article>
<button> <p>
Box Tree
Text
node
Text
node
CSS Box
CSS Box CSS Box
Line Box LB LB LB

min-width: 400px
max-width: 800px
padding: 5px
Box Tree
CSS Box
<article>

Box Tree
CSS Box
CSS Box
Line Box
float: left
<article>
<button>

Box Tree
CSS Box
Line Box
float: left
background: orange
padding: 3px 10px;
margin: 5px;

Box Tree
CSS Box
Line Box
SHARE IT
Max Width
SHARE
IT
Min Width
115px
86px

Box Tree
CSS Box
CSS Box
Line Box
SHARE IT
<article>
<button>

Box Tree
CSS Box
CSS Box CSS Box
Line Box Line Box
SHARE IT
<article>
<button> <p>

Box Tree
CSS Box
CSS Box CSS Box
Line Box Line Box
SHARE IT
amet, consectetur adi
<article>
<button> <p>

Box Tree
CSS Box
CSS Box CSS Box
Line Box LB LB
amet, consectetur
SHARE IT
adipiscing elit. Nullam pell<article>
<button> <p>

Box Tree
CSS Box
CSS Box CSS Box
Line Box LB LB LB
amet, consectetur
adipiscing elit. Nullam pellentesq
SHARE IT
<article>
<button> <p>

A box—such as a page box,
column box, or region—that
contains a portion (or all) of a
fragmented flow.
Fragmentainer

<body>
<div>
consectetur adipiscing elit. Cras nibh
orci, tincidunt eget enim et,
pellentesque condimentum risus. Aenean
sollicitudin risus velit, quis tempor
leo malesuada vel. Donec consequat
aliquet mauris. Vestibulum ante ipsum
primis in faucibus
</div>
</body>
HTML
CSS
div {
columns: 2;
column-fill: auto;
height: 300px;
}
velit, quis tempor leo
malesuada vel. Donec
consequat aliquet mauris.
Vestibulum ante ipsum primis
in faucibus
consectetur adipiscing elit. Cras
nibh orci, tincidunt eget enim et,
pellentesque condimentum risus.
Aenean sollicitudin risus

DOM Tree
<body>
<div>
Text
node
Box Tree
CSS Box
MultiCol
Box
CSS Box
LB LB LB
LBLB LB
CSS Box
LB LB LB
LB LB

Box Tree
CSS Box
<body>

Box Tree
CSS Box
MultiCol
Box
<body>
<div>
columns: 2
column-fill: auto;
height: 300px

Box Tree
CSS Box
MultiCol
Box
CSS Box
Fragmentainer created
<body>
<div>
columns: 2
column-fill: auto;
height: 300px

Box Tree
CSS Box
MultiCol
Box
CSS Box
LB LB LB
LB LB
<body>
<div>
columns: 2
column-fill: auto;
height: 300px

Box Tree
CSS Box
MultiCol
Box
CSS Box
LB LB LB
LBLB LB
CSS Box
<body>
<div>
columns: 2
column-fill: auto;
height: 300px

velit, quis tempor leo
malesuada vel. Donec
consequat aliquet mauris.
Vestibulum ante ipsum primis
in faucibus
Box Tree
CSS Box
MultiCol
Box
CSS Box
columns: 2
column-fill: auto;
height: 300px
LB LB LB
LBLB LB
CSS Box
LB LB LB
LB LB
<body>
<div>

@gregwhitworth {paint}
SHARE IT

Step 1: Paint the elements background

Step 2: Paint the element’s border

Step 3: Paint the element’s content

Stacking Context (SC)
The order in which the
rendering tree is painted onto
the canvas is described by
stacking contexts

Stacking context layers
Actually it
sort of does
though?

¯_(ツ)_/¯

<body>
<div id="one">
Item 1
</div>
<div id="two">
Item 2
</div>
</body>
HTML CSS
div {
width: 300px;
height: 300px;
position: absolute;
background: blue;
z-index: 2;
}
#two {
background: green;
z-index: 1;
}

Box Tree
CSS Box
CSS Box CSS Box
Line Box
Line Box
Item 1
Root Stacking Context
Stacking Context
<body>
<div> <div>
z-index: 2; z-index: 1;

Box Tree
CSS Box
CSS Box CSS Box
Line Box
Line Box
Stacking Context
<body>
<div> <div>

Box Tree
CSS Box
CSS Box CSS Box
Line Box
Line Box
Item 2
Stacking Context
<body>
<div> <div>

Box Tree
CSS Box
CSS Box CSS Box
Line Box
Line Box
Item 1
Stacking Context
<body>
<div> <div>

<div></div>
HTML
CSS
div {
width: 400px;
height: 400px;
background: red;
box-shadow: black 20px 20px;
}

Box Tree
CSS Box
width: 400px
height: 400px
box-shadow: black 20px 20px
Display Node
Disp Node
width: 420px
height: 420px
420px
420px

@gregwhitworth {compose}
Large Heading

<div class="clippy">
</div>
HTML CSS
.clippy {
width: 100px;
height: 100px;
animation: pulse 1s infinite;
background: green;
}
@keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(2, 2)
}
100% {
transform: scale(1, 1);
}
}

@gregwhitworth {compose}
Large Heading
Root Composite Layer

{invalidation}
ComposeDOM
Content
Parsing
Network Style Layout Paint
JS
Input

@gregwhitworth {invalidation}
SHARE IT
CSS
button {
float: left;
background: orange;
padding: 3px 10px;
}
button:hover {
background: green;
color: white;
}

Hit Testing
Algorithm
Mouse
movement
Box Tree
button:hoverSHARE ITCompose

Mouse move
Content
Parsing
Network
Hit Testing
Algorithm

var moved = 0;
var tooFar = 500;
function move(el) {
if(moved <= tooFar) {
moved++;
el.style.marginLeft = moved + "px";
}
}
JS

Content
Parsing
Network
JS

#move {
width: 300px;
height: 300px;
background: blue;
animation: move 1s;
}
@keyframes {
to {
transform: translateX(500px);
}
}
CSS

Content
Parsing
Network

{questions}
@gregwhitworth {questions}

The CSS rendering pipeline explained

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The CSS rendering pipeline explained

Similar to The CSS rendering pipeline explained (20)

Recently uploaded

Recently uploaded (20)

The CSS rendering pipeline explained

Editor's Notes