Braces to Pixels

@ gregwhitworth

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

“Sorcerer's Apprentice

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

{ the pipeline }

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

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

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

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

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

.fancy

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

.fancy

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

.fancy

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

.fancy

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

.fancy

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

.fancy

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

colon!

.fancy

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

.fancy

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

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

button

.fancy

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

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

button

.fancy

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

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

button background

color rgb (0,255,0)

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

.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

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

{ style: terminology }

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

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

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

size: 1em 16px

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

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

{ style: computation }

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

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

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;

{ style: cascade }

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

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

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

li 0 0 0 0 1 @ gregwhitworth {style}

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

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

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}

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}

bit.ly/ css

short

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

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

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

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

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

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

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

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

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}

@ 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

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

{ layout: terminology }

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) @ gregwhitworth {layout} Absolute Positioned Box This box creates a new BFC

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

http://bit.ly/containing

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

Containing Block @ gregwhitworth {layout} position: fixed

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

most box or page box. @ gregwhitworth {layout}

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

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

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

{ layout: flow }

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

Float @ gregwhitworth {layout}

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

Float @ gregwhitworth {layout}

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

Float @ gregwhitworth {layout}

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

{ layout: box generation }

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

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

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

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

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

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

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

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

{ layout: basic }

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

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}

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

<body>

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

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

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

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

{ layout: content measure }

When your your inline dimensions depends on its contents. Shrink

to

fit Context @ gregwhitworth {layout}

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

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

DOM Tree

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

min

width: 400px max

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

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

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

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

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

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

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

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

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

{ layout: fragmentation }

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

<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

@ 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

Box Tree CSS Box @ gregwhitworth {layout}

<body>

Box Tree CSS Box MultiCol Box @ gregwhitworth {layout}

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

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

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

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

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

@ 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

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

@ gregwhitworth {paint} SHARE IT

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

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

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

@ gregwhitworth {paint} SHARE IT

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

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

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

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

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;

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;

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;

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;

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;

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;

{ paint: bounds }

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

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}

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

@ gregwhitworth {compose} Large Heading

@ 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) } }

@ gregwhitworth {compose} Large Heading Root Composite Layer

@ gregwhitworth {compose} Large Heading

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

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

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

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

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

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

@ gregwhitworth {invalidation}

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

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

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

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

{ take aways } @ gregwhitworth {take aways }

@ 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

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

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

@ gregwhitworth