Braces to Pixels

A presentation at CSS Dev Conf in October 2017 in New Orleans, LA, USA by Greg Whitworth

Slide 1

@ gregwhitworth

Slide 2

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 3

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 4

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 5

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 6

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 7

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 8

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 9

“Sorcerer's Apprentice

Fantasia” 1940 © Disney•Pixar . All rights reser ved.

Slide 10

{ the pipeline }

Slide 11

Compose Paint Layout Style DOM Content Parsing Network {the pipeline} @ gregwhitworth

Slide 12

Compose Paint Layout Style DOM Content Parsing Network @ gregwhitworth {the pipeline} JS

Slide 13

JS Input Compose Paint Layout Style DOM Content Parsing Network @ gregwhitworth {the pipeline}

Slide 14

Input Compose Paint Layout Style DOM Network @ gregwhitworth {the pipeline} Content Parsing JS

Slide 15

{ parsing } Compose Paint Layout Style DOM Content Parsing Network YOU ARE HERE

Slide 16

.fancy

button { background : green ; } @ gregwhitworth {style} I found a selector!

Slide 17

.fancy

button { background : green ; } @ gregwhitworth {style} I found an opening curly brace!

Slide 18

.fancy

button { background : green ; } @ gregwhitworth {style} I found a property

Slide 19

.fancy

button { background : green ; } @ gregwhitworth {style} I found a colon!

Slide 20

.fancy

button { background : green ; } @ gregwhitworth {style} I found a value!

Slide 21

.fancy

button { background : green ; } @ gregwhitworth {style} I found a semi

colon!

Slide 22

.fancy

button { background : green ; } @ gregwhitworth {style} I found a closing curly brace!

Slide 23

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } @ gregwhitworth {style} Selector .fancy

button

Slide 24

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } @ gregwhitworth {style} Selector .fancy

button

Slide 25

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } @ gregwhitworth {style} Selector Property Value .fancy

button background

color rgb (0,255,0)

Slide 26

@ gregwhitworth {style} 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 ; border : 3px solid red ; font

size : 1em; }

Slide 27

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } @ gregwhitworth {style} 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 font

size 1em

Slide 28

{ style } Compose Paint Layout Style DOM Content Parsing Network YOU ARE HERE

Slide 29

{ style: terminology }

Slide 30

@ gregwhitworth {style} Declared: What the author wrote Value Types width: 506.456789132456489787px

Slide 31

@ gregwhitworth {style} Specified: Declared + defaults Value Types width: auto

Slide 32

@ gregwhitworth {style} Computed: Resolution of specified Value Types font

size: 1em 16px

Slide 33

@ gregwhitworth {style} Used: Result of layout calculations Value Types width: 50% 300px

Slide 34

@ gregwhitworth {style} Actual: UA specific adjustments Value Types width: 506.456789132456489787px 506.45px

Slide 35

{ style: computation }

Slide 36

DOM Tree Collection of styles Collection of styles Collection of styles Matching Algorithm @ gregwhitworth {style}

Slide 37

The User Agent should have ever ything resolved except what requires layout @ gregwhitworth {style}

Slide 38

width: 1in; Before After @ gregwhitworth {style} width: 50%; line

height: calc (10px + 2em); border

color : currentColor ; height: 50vh; width: 96px; width: 50%; line

height: 42px; border

color : rgb (0,255,0); height: 540px;

Slide 39

{ style: cascade }

Slide 40

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

Slide 41

Inline styles win out over all selectors unless an !important was used @ gregwhitworth {style} Specificity

Slide 42

• !Important • Style Attribute • ID • Classes, Psuedo Classes, attr • Elements & Psuedo Elements @ gregwhitworth {style} Specificity

Slide 43

li 0 0 0 0 1 @ gregwhitworth {style}

Slide 44

li 0 0 0 0 1 li.foo 0 0 0 1 1 @ gregwhitworth {style}

Slide 45

li 0 0 0 0 1 li.foo 0 0 0 1 1 #comment li.foo.bar 0 0 1 2 1 @ gregwhitworth {style}

Slide 46

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

<li style=“color : red”> 0 1 0 0 0 @ gregwhitworth {style}

Slide 47

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

<li style=“color : red”> 0 1 0 0 0 color : red !important 1 0 0 0 0 @ gregwhitworth {style}

Slide 48

bit.ly/ css

short

selectors @ gregwhitworth {style} “Keep your CSS selectors short” by Harr y Roberts

Slide 49

An origin is what determines where the stylesheet is placed within the cascade @ gregwhitworth {style} Style Origins

Slide 50

User Agent Author User 3 currently specified origins @ gregwhitworth {style} : Renders CSS : Web Developer : Person using site

Slide 51

User
Author
User Agent Ordering in the cascade @ gregwhitworth {style}

Slide 52

.fancy

button { background : green ; border : 3px solid red ; 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 ;
} @ gregwhitworth {style}

Slide 53

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } Origin Selector Property Value Specificity User * font

size 25px 1,0,0,0,0 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 div .fancy

button { background : yellow ;
} @ gregwhitworth {style}

Slide 54

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } Origin Selector Property Value Specificity User * font

size 25px 1,0,0,0,0 Author div .fancy

button background

color rgb (255,255,0) 0,0,0,1,1 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 div .fancy

button { background : yellow ;
} @ gregwhitworth {style}

Slide 55

.fancy

button { background : green ; border : 3px solid red ; font

size : 1em; } Origin Selector Property Value Specificity User * font

size 25px 1,0,0,0,0 Author div .fancy

button background

color rgb (255,255,0) 0,0,0,1,1 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 div .fancy

button { background : yellow ;
} @ gregwhitworth {style}

Slide 56

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 @ gregwhitworth {style}

Slide 57

@ gregwhitworth {style} #document body header div p p #document body header div

{ background: red } div p { background: blue } p:last

of

type { background: orange }

{ background: red } div p p:last

of

type div p { background: blue }

{ background: red } p:last

of

type { background: orange } div p { background: blue } #document body header div p p p p

Slide 58

{ layout } Compose Paint Layout Style DOM Content Parsing Network YOU ARE HERE

Slide 59

{ layout: terminology }

Slide 60

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}

Slide 61

Block formatting context (BFC) @ gregwhitworth {layout} Absolute Positioned Box This box creates a new BFC

Slide 62

Containing block The ancestor block that styles are resolved against @ gregwhitworth {layout}

Slide 63

http://bit.ly/containing

block @ gregwhitworth {layout} W3C CSS 2.2 Definition of Containing Block

Slide 64

Containing Block @ gregwhitworth {layout} position: fixed

Slide 65

Initial Containing block (ICB) A rectangle that is computed based on the top

most box or page box. @ gregwhitworth {layout}

Slide 66

Initial Containing Block (ICB) @ gregwhitworth {layout} The red dashed box is the ICB

Slide 67

@ gregwhitworth {layout} LTR/RTL Writing Mode INLINE DIRECTION INLINE DIRECTION Vertical Writing Mode

Slide 68

@ gregwhitworth {layout} LTR/RTL Writing Mode BLOCK DIRECTION BLOCK DIRECTION Vertical Writing Mode

Slide 69

{ layout: flow }

Slide 70

The flow You move in document order laying out each child in the direction of the boxes writing mode @ gregwhitworth {layout}

Slide 71

Float @ gregwhitworth {layout}

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

Slide 72

Float @ gregwhitworth {layout}

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

Slide 73

Float @ gregwhitworth {layout}

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

Slide 74

{ layout: box generation }

Slide 75

For each element in the DOM there will be 0 or more boxes in the box tree @ gregwhitworth {layout}

Slide 76

Box Model Padding Box Content Box Border Box Margin Box @ gregwhitworth {layout}

Slide 77

<body> <div> <div> DOM Tree CSS Box CSS Box Box Tree CSS Box @ gregwhitworth {layout}

Slide 78

<body> <div> <div> visibility: hidden; DOM Tree @ gregwhitworth {layout} CSS Box CSS Box Box Tree CSS Box

Slide 79

<body> <div> <div> display: none; DOM Tree CSS Box CSS Box Box Tree @ gregwhitworth {layout}

Slide 80

<body> <div> <div> DOM Tree CSS Box CSS Box Box Tree CSS Box visibility: hidden; @ gregwhitworth {layout}

Slide 81

When necessar y, boxes will be generated that are not in the DOM, these are known as anonymous boxes @ gregwhitworth {layout}

Slide 82

<body> <div> display: table - cell; DOM Tree CSS Box Table Box Box Tree Table Grid Box CSS Box @ gregwhitworth {layout}

Slide 83

{ layout: basic }

Slide 84

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

Slide 85

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? @ gregwhitworth {layout}

Slide 86

Basic Example Box Tree CSS Box width: 50px @ gregwhitworth {layout}

<body>

Slide 87

Basic Example Box Tree CSS Box CSS Box @ gregwhitworth {layout}

Slide 88

Basic Example Box Tree CSS Box CSS Box Line Box Hello World @ gregwhitworth {layout}

Slide 89

Basic Example Box Tree CSS Box CSS Box Line Box Hello World @ gregwhitworth {layout}

Slide 90

Basic Example Box Tree CSS Box CSS Box Line Box Hello World Line Box @ gregwhitworth {layout}

Slide 91

{ layout: content measure }

Slide 92

When your your inline dimensions depends on its contents. Shrink

to

fit Context @ gregwhitworth {layout}

Slide 93

Lorem ipsum dolor sit
amet , consectetur ad adipiscing elit . Nullam pellentesq SHARE IT @ gregwhitworth {layout}

Slide 94

<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; } @ gregwhitworth {layout}

Slide 95

DOM Tree

<article> <button> <p> Box Tree Text node Text node CSS Box CSS Box CSS Box Line Box LB LB LB @ gregwhitworth {layout}

Slide 96

min

width: 400px max

width: 800px padding: 5px Box Tree CSS Box @ gregwhitworth {layout}

Slide 97

Box Tree CSS Box CSS Box Line Box float: left @ gregwhitworth {layout}

Slide 98

Box Tree CSS Box Line Box float: left background: orange padding: 3px 10px;
border: 2px solid blue; margin: 5px; @ gregwhitworth {layout}

Slide 99

Box Tree CSS Box Line Box SHARE IT @ gregwhitworth {layout} Max Width SHARE IT Min Width 115px 86px

Slide 100

Box Tree CSS Box CSS Box Line Box SHARE IT @ gregwhitworth {layout}

Slide 101

Box Tree CSS Box CSS Box CSS Box Line Box Line Box SHARE IT @ gregwhitworth {layout}

Slide 102

Box Tree CSS Box CSS Box CSS Box Line Box Line Box @ gregwhitworth {layout} Lorem ipsum dolor sit
SHARE IT amet , consectetur adi

Slide 103

Box Tree CSS Box CSS Box CSS Box Line Box LB LB @ gregwhitworth {layout} Lorem ipsum dolor sit
amet , consectetur SHARE IT adipiscing elit . Nullam pell

Slide 104

Box Tree CSS Box CSS Box CSS Box Line Box LB LB LB @ gregwhitworth {layout} Lorem ipsum dolor sit
amet , consectetur adipiscing elit . Nullam pellentesq SHARE IT

Slide 105

{ layout: fragmentation }

Slide 106

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

Slide 107

<body> <div> Lorem ipsum dolor sit amet , 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; } @ gregwhitworth {layout} velit , quis tempor leo malesuada vel. Donec consequat aliquet mauris . Vestibulum ante ipsum primis in faucibus Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras nibh orci , tincidunt eget enim et, pellentesque condimentum risus . Aenean sollicitudin risus

Slide 108

@ gregwhitworth {layout} DOM Tree

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

Slide 109

Box Tree CSS Box @ gregwhitworth {layout}

<body>

Slide 110

Box Tree CSS Box MultiCol Box @ gregwhitworth {layout}

<body> <div> columns: 2 column - fill: auto; height: 300px

Slide 111

Box Tree CSS Box MultiCol Box CSS Box @ gregwhitworth {layout} Fragmentainer created

<body> <div> columns: 2 column - fill: auto; height: 300px

Slide 112

Box Tree CSS Box MultiCol Box CSS Box @ gregwhitworth {layout} Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras nibh orci , tincidunt eget enim et, pellentesque condimentum risus . Aenean sollicitudin risus LB LB LB LB LB

<body> <div> columns: 2 column - fill: auto; height: 300px

Slide 113

Box Tree CSS Box MultiCol Box CSS Box @ gregwhitworth {layout} LB LB LB LB LB LB CSS Box

<body> <div> Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras nibh orci , tincidunt eget enim et, pellentesque condimentum risus . Aenean sollicitudin risus columns: 2 column - fill: auto; height: 300px

Slide 114

@ gregwhitworth {layout} 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 LB LB LB CSS Box LB LB LB LB LB

<body> <div> Lorem ipsum dolor sit amet , consectetur adipiscing elit . Cras nibh orci , tincidunt eget enim et, pellentesque condimentum risus . Aenean sollicitudin risus

Slide 115

{ paint } Compose Paint Layout Style DOM Content Parsing Network YOU ARE HERE

Slide 116

@ gregwhitworth {paint} SHARE IT

Slide 117

@ gregwhitworth {paint} Step 1: Paint the elements background

Slide 118

@ gregwhitworth {paint} Step 2: Paint the element’s border

Slide 119

@ gregwhitworth {paint} Step 3: Paint the element’s content

Slide 120

@ gregwhitworth {paint} SHARE IT

Slide 121

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

Slide 122

Stacking Context (SC) Stacking context layers Actually it sort of does though? @ gregwhitworth {paint}

Slide 123

Stacking Context (SC) ¯
( ツ )/¯ @ gregwhitworth {paint}

Slide 124

@ gregwhitworth {paint}

<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; }

Slide 125

Box Tree CSS Box CSS Box CSS Box Line Box @ gregwhitworth {paint} Line Box Item 1 Root Stacking Context Stacking Context

<body> <div> <div> z - index: 2; z - index: 1;

Slide 126

Box Tree CSS Box CSS Box CSS Box Line Box @ gregwhitworth {paint} Line Box Root Stacking Context Stacking Context z

index: 2; z

index: 1;

Slide 127

Box Tree CSS Box CSS Box CSS Box Line Box @ gregwhitworth {paint} Line Box Root Stacking Context Stacking Context z

index: 2; z

index: 1;

Slide 128

Box Tree CSS Box CSS Box CSS Box Line Box @ gregwhitworth {paint} Line Box Root Stacking Context Item 2 Stacking Context z

index: 2; z

index: 1;

Slide 129

Box Tree CSS Box CSS Box CSS Box Line Box @ gregwhitworth {paint} Line Box Root Stacking Context Item 2 Stacking Context z

index: 2; z

index: 1;

Slide 130

Box Tree CSS Box CSS Box CSS Box Line Box @ gregwhitworth {paint} Line Box Root Stacking Context Item 1 Stacking Context z

index: 2; z

index: 1;

Slide 131

{ paint: bounds }

Slide 132

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

Slide 133

Box Tree CSS Box width: 400px height: 400px box

shadow: black 20px 20px Display Node Disp Node width: 420px height: 420px 420px 420px @ gregwhitworth {paint}

Slide 134

{ compose } Compose Paint Layout Style DOM Content Parsing Network YOU ARE HERE

Slide 135

@ gregwhitworth {compose} Large Heading

Slide 136

@ gregwhitworth {paint}

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

Slide 137

@ gregwhitworth {compose} Large Heading Root Composite Layer

Slide 138

@ gregwhitworth {compose} Large Heading

Slide 139

@ gregwhitworth {compose} Large Heading

Slide 140

{ invalidation } Compose DOM Content Parsing Network Style Layout Paint JS Input

Slide 141

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

Slide 142

@ gregwhitworth {invalidation} Hit Testing Algorithm Mouse movement Box Tree button:hover SHARE IT Compose

Slide 143

@ gregwhitworth {invalidation} Mouse move Compose Paint Layout Style DOM Content Parsing Network Hit Testing Algorithm

Slide 144

@ gregwhitworth {layout} Modifying the box model on :hover

Slide 145

@ gregwhitworth {layout} Not modifying the box model on :hover

Slide 146

@ gregwhitworth {invalidation}

Slide 147

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

Slide 148

@ gregwhitworth {invalidation} Compose Paint Layout Style DOM Content Parsing Network JS

Slide 149

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

Slide 150

@ gregwhitworth {invalidation} Compose Paint Layout Style DOM Content Parsing Network

Slide 151

{ take aways } @ gregwhitworth {take aways }

Slide 152

@ gregwhitworth {take aways } • Audit your CSS at least twice a year • Remove unused CSS or redundant styles • !important should be a sign that it may be time for a CSS refactor

Slide 153

@ gregwhitworth {take aways } • Try and keep DOM structure as flat as possible • Try and use simple selectors ( eg : ID, classes, tags) • Limit Layout thrashing

Slide 154

@ gregwhitworth {take aways } • Make display only invalidations (layout is computationally heavy) • Elicit feedback on the way you solved the solution

Slide 155

@ gregwhitworth