Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@gregwhitworth
{the pipeline}
ComposePaintLayoutStyleDOM
Content
Parsing
Network
{the pipeline}@gregwhitworth
JS
ComposePaintLayoutStyleDOM
Content
Parsing
Network
@gregwhitworth {the pipeline}
JS
Input
ComposePaintLayoutStyleDOM
Content
Parsing
Network
@gregwhitworth {the pipeline}
JS
Input
ComposePaintLayoutStyleDOMNetwork
@gregwhitworth {the pipeline}
Content
Parsing
{parsing}
.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...
@gregwhitworth {style}
Selector Property Value
.fancy-button background-color rgb(0,255,0)
.fancy-button border-size 3px
....
.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;
}
@gregwhitworth {style}
Selector Property Value...
{style}
{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: 1em16px
@gregwhitworth {style}
Used: Result of layout calculations
Value Types
width: 50%300px
@gregwhitworth {style}
Actual: UA specific adjustments
Value Types
width: 506.456789132456489787px506.45px
{style:computation}
DOM Tree
Collection of
styles
Collection of
styles
Collection of
styles
Matching
Algorithm
@gregwhitworth {style}
The User Agent should have
everything resolved except
what requires layout
@gregwhitworth {style}
width: 1in;
Before After
@gregwhitworth {style}
width: 50%;
height: calc(10px + 2em);
border-color: currentColor;
height: ...
{style:cascade}
A score awarded to a selector
based on the count of tags,
classes, id’s, !important, &
attribute selectors used
@gregwhitw...
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}
Sp...
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 ...
bit.ly/css-short-selectors
@gregwhitworth {style}
“Keep your CSS selectors short”
by Harry 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 s...
1. User
2. Author
3. User Agent
Ordering in the cascade
@gregwhitworth {style}
.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;
}
Origin Selector Property Value Specificity
Aut...
.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;
}
Origin Selector Property Value Specificity
Use...
.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;
}
Origin Selector Property Value Specificity
Use...
.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;
}
Origin Selector Property Value Specificity
Use...
Property Value
border-style Solid
border-size 3px
border-color rgb(255,0,0)
background-color rgb(255,255,0)
font-size 25px...
{layout}
{layout:terminology}
Block formatting context (BFC)
Floats, absolutely positioned elements, block
containers (such as inline-blocks, table-cell...
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
Box Model
Padding Box
Content Box
Border Box
Margin Box
@gregwhitworth {layout}
{layout:flow}
The flow
You move in document order
laying out each child in the
direction of the boxes
writing mode
@gregwhitworth {layou...
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}
<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 necessary, 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 bo...
Basic Example
Box Tree
CSS Box width: 50px
@gregwhitworth {layout}
<body>
Basic Example
Box Tree
CSS Box
CSS Box
@gregwhitworth {layout}
<body>
<p>
Basic Example
Box Tree
CSS Box
CSS Box
Line Box
Hello World
@gregwhitworth {layout}
<body>
<p>
Basic Example
Box Tree
CSS Box
CSS Box
Line Box
Hello World
@gregwhitworth {layout}
<body>
<p>
Basic Example
Box Tree
CSS Box
CSS Box
Line Box
Hello
World
Line Box
@gregwhitworth {layout}
<body>
<p>
{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>
...
DOM Tree
<article>
<button> <p>
Box Tree
Text
node
Text
node
CSS Box
CSS Box CSS Box
Line Box LB LB LB
@gregwhitworth {lay...
min-width: 400px
max-width: 800px
padding: 5px
Box Tree
CSS Box
@gregwhitworth {layout}
<article>
Box Tree
CSS Box
CSS Box
Line Box
float: left
@gregwhitworth {layout}
<article>
<button>
Box Tree
CSS Box
Line Box
float: left
background: orange
padding: 3px 10px;
border: 2px solid blue;
margin: 5px;
@gregwhit...
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}
<article>
<button>
Box Tree
CSS Box
CSS Box CSS Box
Line Box Line Box
SHARE IT
@gregwhitworth {layout}
<article>
<button> <p>
Box Tree
CSS Box
CSS Box CSS Box
Line Box Line Box
@gregwhitworth {layout}
Lorem ipsum dolor sit
SHARE IT
amet, consectetu...
Box Tree
CSS Box
CSS Box CSS Box
Line Box LB LB
@gregwhitworth {layout}
Lorem ipsum dolor sit
amet, consectetur
SHARE IT
a...
Box Tree
CSS Box
CSS Box CSS Box
Line Box LB LB LB
@gregwhitworth {layout}
Lorem ipsum dolor sit
amet, consectetur
adipisc...
{layout:fragmentation}
A box—such as a page box,
column box, or region—that
contains a portion (or all) of a
fragmented flow.
Fragmentainer
@greg...
<body>
<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras nibh
orci, tincidunt eget enim et,
pellentesque...
@gregwhitworth {layout}
DOM Tree
<body>
<div>
Text
node
Box Tree
CSS Box
MultiCol
Box
CSS Box
LB LB LB
LBLB LB
CSS Box
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: a...
Box Tree
CSS Box
MultiCol
Box
CSS Box
@gregwhitworth {layout}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cra...
Box Tree
CSS Box
MultiCol
Box
CSS Box
@gregwhitworth {layout}
LB LB LB
LBLB LB
CSS Box
<body>
<div>
Lorem ipsum dolor sit ...
@gregwhitworth {layout}
velit, quis tempor leo
malesuada vel. Donec
consequat aliquet mauris.
Vestibulum ante ipsum primis...
{paint}
@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
@...
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: 300p...
Box Tree
CSS Box
CSS Box CSS Box
Line Box
@gregwhitworth {paint}
Line Box
Item 1
Root Stacking Context
Stacking Context
<b...
Box Tree
CSS Box
CSS Box CSS Box
Line Box
@gregwhitworth {paint}
Line Box
Root Stacking Context
Stacking Context
z-index: ...
Box Tree
CSS Box
CSS Box CSS Box
Line Box
@gregwhitworth {paint}
Line Box
Root Stacking Context
Stacking Context
z-index: ...
Box Tree
CSS Box
CSS Box CSS Box
Line Box
@gregwhitworth {paint}
Line Box
Root Stacking Context
Item 2
Stacking Context
z-...
Box Tree
CSS Box
CSS Box CSS Box
Line Box
@gregwhitworth {paint}
Line Box
Root Stacking Context
Item 2
Stacking Context
z-...
Box Tree
CSS Box
CSS Box CSS Box
Line Box
@gregwhitworth {paint}
Line Box
Root Stacking Context
Item 1
Stacking Context
z-...
{paint:bounds}
<div></div>
HTML
CSS
div {
width: 400px;
height: 400px;
background: red;
box-shadow: black 20px 20px;
}
@gregwhitworth {pa...
Box Tree
CSS Box
width: 400px
height: 400px
box-shadow: black 20px 20px
Display Node
Disp Node
width: 420px
height: 420px
...
{compose}
@gregwhitworth {compose}
Large Heading
@gregwhitworth {paint}
<div class="clippy">
</div>
HTML CSS
.clippy {
width: 100px;
height: 100px;
animation: pulse 1s inf...
@gregwhitworth {compose}
Large Heading
Root Composite Layer
@gregwhitworth {compose}
Large Heading
@gregwhitworth {compose}
Large Heading
{invalidation}
ComposeDOM
Content
Parsing
Network Style Layout Paint
JS
Input
@gregwhitworth {invalidation}
SHARE IT
CSS
button {
float: left;
background: orange;
padding: 3px 10px;
border: 2px solid ...
@gregwhitworth {invalidation}
Hit Testing
Algorithm
Mouse
movement
Box Tree
button:hoverSHARE ITCompose
@gregwhitworth {invalidation}
Mouse move
ComposePaintLayoutStyleDOM
Content
Parsing
Network
Hit Testing
Algorithm
@gregwhitworth {invalidation}
@gregwhitworth {paint}
var moved = 0;
var tooFar = 500;
function move(el) {
if(moved <= tooFar) {
moved++;
el.style.margin...
@gregwhitworth {paint}
var moved = 0;
var tooFar = 500;
function move(el) {
if(moved <= tooFar) {
moved++;
el.style.margin...
@gregwhitworth {invalidation}
ComposePaintLayoutStyleDOM
Content
Parsing
Network
JS
@gregwhitworth {paint}
#move {
width: 300px;
height: 300px;
background: blue;
animation: move 1s;
}
@keyframes {
to {
tran...
@gregwhitworth {invalidation}
ComposePaintLayoutStyleDOM
Content
Parsing
Network
{questions}
@gregwhitworth {questions}
Braces to Pixels - CSS Day 2016
Braces to Pixels - CSS Day 2016
Upcoming SlideShare
Loading in …5
×

Braces to Pixels - CSS Day 2016

2,210 views

Published on

Go on a journey with your CSS and learn what it takes for the engine to get your creations in front of your users.

Published in: Software
  • Be the first to comment

Braces to Pixels - CSS Day 2016

  1. 1. @gregwhitworth
  2. 2. {the pipeline}
  3. 3. ComposePaintLayoutStyleDOM Content Parsing Network {the pipeline}@gregwhitworth
  4. 4. JS ComposePaintLayoutStyleDOM Content Parsing Network @gregwhitworth {the pipeline}
  5. 5. JS Input ComposePaintLayoutStyleDOM Content Parsing Network @gregwhitworth {the pipeline}
  6. 6. JS Input ComposePaintLayoutStyleDOMNetwork @gregwhitworth {the pipeline} Content Parsing
  7. 7. {parsing}
  8. 8. .fancy-button { background: green; border: 3px solid red; font-size: 1em; } @gregwhitworth {style} Selector .fancy-button
  9. 9. .fancy-button { background: green; border: 3px solid red; font-size: 1em; } @gregwhitworth {style} Selector Property Value .fancy-button background-color rgb(0,255,0)
  10. 10. @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; }
  11. 11. .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
  12. 12. {style}
  13. 13. {style:terminology}
  14. 14. @gregwhitworth {style} Declared: What the author wrote Value Types width: 506.456789132456489787px
  15. 15. @gregwhitworth {style} Specified: Declared + defaults Value Types width: auto
  16. 16. @gregwhitworth {style} Computed: Resolution of specified Value Types font-size: 1em16px
  17. 17. @gregwhitworth {style} Used: Result of layout calculations Value Types width: 50%300px
  18. 18. @gregwhitworth {style} Actual: UA specific adjustments Value Types width: 506.456789132456489787px506.45px
  19. 19. {style:computation}
  20. 20. DOM Tree Collection of styles Collection of styles Collection of styles Matching Algorithm @gregwhitworth {style}
  21. 21. The User Agent should have everything resolved except what requires layout @gregwhitworth {style}
  22. 22. width: 1in; Before After @gregwhitworth {style} 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;
  23. 23. {style:cascade}
  24. 24. A score awarded to a selector based on the count of tags, classes, id’s, !important, & attribute selectors used @gregwhitworth {style} Specificity
  25. 25. Inline styles win out over all selectors unless an !important was used @gregwhitworth {style} Specificity
  26. 26. • !Important • Style Attribute • ID • Classes, Psuedo Classes, attr • Elements & Psuedo Elements @gregwhitworth {style} Specificity
  27. 27. li 0 0 0 0 1 @gregwhitworth {style}
  28. 28. li 0 0 0 0 1 li.foo 0 0 0 1 1 @gregwhitworth {style}
  29. 29. li 0 0 0 0 1 li.foo 0 0 0 1 1 #comment li.foo.bar 0 0 1 2 1 @gregwhitworth {style}
  30. 30. 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}
  31. 31. 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}
  32. 32. bit.ly/css-short-selectors @gregwhitworth {style} “Keep your CSS selectors short” by Harry Roberts
  33. 33. An origin is what determines where the stylesheet is placed within the cascade @gregwhitworth {style} Style Origins
  34. 34. User Agent Author User 3 currently specified origins @gregwhitworth {style} : Renders CSS : Web Developer : Person using site
  35. 35. 1. User 2. Author 3. User Agent Ordering in the cascade @gregwhitworth {style}
  36. 36. .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}
  37. 37. .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}
  38. 38. .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}
  39. 39. .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}
  40. 40. 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}
  41. 41. {layout}
  42. 42. {layout:terminology}
  43. 43. 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}
  44. 44. Block formatting context (BFC) @gregwhitworth {layout} Absolute Positioned Box This box creates a new BFC
  45. 45. Containing block The ancestor block that styles are resolved against @gregwhitworth {layout}
  46. 46. http://bit.ly/containing-block @gregwhitworth {layout} W3C CSS 2.2 Definition of Containing Block
  47. 47. Containing Block @gregwhitworth {layout} position: fixed
  48. 48. Initial Containing block (ICB) A rectangle that is computed based on the top-most box or page box. @gregwhitworth {layout}
  49. 49. Initial Containing Block (ICB) @gregwhitworth {layout} The red dashed box is the ICB
  50. 50. @gregwhitworth {layout} LTR/RTL Writing Mode INLINE DIRECTION INLINE DIRECTION Vertical Writing Mode
  51. 51. @gregwhitworth {layout} LTR/RTL Writing Mode BLOCK DIRECTION BLOCK DIRECTION Vertical Writing Mode
  52. 52. Box Model Padding Box Content Box Border Box Margin Box @gregwhitworth {layout}
  53. 53. {layout:flow}
  54. 54. The flow You move in document order laying out each child in the direction of the boxes writing mode @gregwhitworth {layout}
  55. 55. Float @gregwhitworth {layout} <body> <div> <p> DOM Tree float: left; text node <p> text node
  56. 56. Float @gregwhitworth {layout} <body> <div> <p> DOM Tree float: left; text node <p> text node
  57. 57. Float @gregwhitworth {layout} <body> <div> <p> DOM Tree float: left; text node <p> text node
  58. 58. {layout:box generation}
  59. 59. For each element in the DOM there will be 0 or more boxes in the box tree @gregwhitworth {layout}
  60. 60. <body> <div> <div> DOM Tree CSS Box CSS Box Box Tree CSS Box @gregwhitworth {layout}
  61. 61. <body> <div> <div> visibility: hidden; DOM Tree @gregwhitworth {layout} CSS Box CSS Box Box Tree CSS Box
  62. 62. <body> <div> <div> display: none; DOM Tree CSS Box CSS Box Box Tree @gregwhitworth {layout}
  63. 63. <body> <div> <div> DOM Tree CSS Box CSS Box Box Tree CSS Box visibility: hidden; @gregwhitworth {layout}
  64. 64. When necessary, boxes will be generated that are not in the DOM, these are known as anonymous boxes @gregwhitworth {layout}
  65. 65. <body> <div> display: table-cell; DOM Tree CSS Box Table Box Box Tree Table Grid Box CSS Box @gregwhitworth {layout}
  66. 66. {layout:basic}
  67. 67. <body> <p> Hello World </p> </body> HTML CSS body { width: 50px; } Basic Example @gregwhitworth {layout}
  68. 68. 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}
  69. 69. Basic Example Box Tree CSS Box width: 50px @gregwhitworth {layout} <body>
  70. 70. Basic Example Box Tree CSS Box CSS Box @gregwhitworth {layout} <body> <p>
  71. 71. Basic Example Box Tree CSS Box CSS Box Line Box Hello World @gregwhitworth {layout} <body> <p>
  72. 72. Basic Example Box Tree CSS Box CSS Box Line Box Hello World @gregwhitworth {layout} <body> <p>
  73. 73. Basic Example Box Tree CSS Box CSS Box Line Box Hello World Line Box @gregwhitworth {layout} <body> <p>
  74. 74. {layout:content measure}
  75. 75. When your your inline dimensions depends on its contents. Shrink-to-fit Context @gregwhitworth {layout}
  76. 76. Lorem ipsum dolor sit amet, consectetur ad adipiscing elit. Nullam pellentesq SHARE IT @gregwhitworth {layout}
  77. 77. <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}
  78. 78. DOM Tree <article> <button> <p> Box Tree Text node Text node CSS Box CSS Box CSS Box Line Box LB LB LB @gregwhitworth {layout}
  79. 79. min-width: 400px max-width: 800px padding: 5px Box Tree CSS Box @gregwhitworth {layout} <article>
  80. 80. Box Tree CSS Box CSS Box Line Box float: left @gregwhitworth {layout} <article> <button>
  81. 81. Box Tree CSS Box Line Box float: left background: orange padding: 3px 10px; border: 2px solid blue; margin: 5px; @gregwhitworth {layout}
  82. 82. Box Tree CSS Box Line Box SHARE IT @gregwhitworth {layout} Max Width SHARE IT Min Width 115px 86px
  83. 83. Box Tree CSS Box CSS Box Line Box SHARE IT @gregwhitworth {layout} <article> <button>
  84. 84. Box Tree CSS Box CSS Box CSS Box Line Box Line Box SHARE IT @gregwhitworth {layout} <article> <button> <p>
  85. 85. Box Tree CSS Box CSS Box CSS Box Line Box Line Box @gregwhitworth {layout} Lorem ipsum dolor sit SHARE IT amet, consectetur adi <article> <button> <p>
  86. 86. 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<article> <button> <p>
  87. 87. 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 <article> <button> <p>
  88. 88. {layout:fragmentation}
  89. 89. A box—such as a page box, column box, or region—that contains a portion (or all) of a fragmented flow. Fragmentainer @gregwhitworth {layout}
  90. 90. <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
  91. 91. @gregwhitworth {layout} 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
  92. 92. Box Tree CSS Box @gregwhitworth {layout} <body>
  93. 93. Box Tree CSS Box MultiCol Box @gregwhitworth {layout} <body> <div> columns: 2 column-fill: auto; height: 300px
  94. 94. Box Tree CSS Box MultiCol Box CSS Box @gregwhitworth {layout} Fragmentainer created <body> <div> columns: 2 column-fill: auto; height: 300px
  95. 95. 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
  96. 96. Box Tree CSS Box MultiCol Box CSS Box @gregwhitworth {layout} LB LB LB LBLB 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
  97. 97. @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 LBLB 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
  98. 98. {paint}
  99. 99. @gregwhitworth {paint} SHARE IT
  100. 100. @gregwhitworth {paint} Step 1: Paint the elements background
  101. 101. @gregwhitworth {paint} Step 2: Paint the element’s border
  102. 102. @gregwhitworth {paint} Step 3: Paint the element’s content
  103. 103. @gregwhitworth {paint} SHARE IT
  104. 104. Stacking Context (SC) The order in which the rendering tree is painted onto the canvas is described by stacking contexts @gregwhitworth {paint}
  105. 105. Stacking Context (SC) Stacking context layers Actually it sort of does though? @gregwhitworth {paint}
  106. 106. Stacking Context (SC) ¯_(ツ)_/¯ @gregwhitworth {paint}
  107. 107. @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; }
  108. 108. 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;
  109. 109. 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; <body> <div> <div>
  110. 110. 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; <body> <div> <div>
  111. 111. 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; <body> <div> <div>
  112. 112. 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; <body> <div> <div>
  113. 113. 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; <body> <div> <div>
  114. 114. {paint:bounds}
  115. 115. <div></div> HTML CSS div { width: 400px; height: 400px; background: red; box-shadow: black 20px 20px; } @gregwhitworth {paint}
  116. 116. 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}
  117. 117. {compose}
  118. 118. @gregwhitworth {compose} Large Heading
  119. 119. @gregwhitworth {paint} <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); } }
  120. 120. @gregwhitworth {compose} Large Heading Root Composite Layer
  121. 121. @gregwhitworth {compose} Large Heading
  122. 122. @gregwhitworth {compose} Large Heading
  123. 123. {invalidation} ComposeDOM Content Parsing Network Style Layout Paint JS Input
  124. 124. @gregwhitworth {invalidation} SHARE IT CSS button { float: left; background: orange; padding: 3px 10px; border: 2px solid blue; } button:hover { background: green; color: white; }
  125. 125. @gregwhitworth {invalidation} Hit Testing Algorithm Mouse movement Box Tree button:hoverSHARE ITCompose
  126. 126. @gregwhitworth {invalidation} Mouse move ComposePaintLayoutStyleDOM Content Parsing Network Hit Testing Algorithm
  127. 127. @gregwhitworth {invalidation}
  128. 128. @gregwhitworth {paint} var moved = 0; var tooFar = 500; function move(el) { if(moved <= tooFar) { moved++; el.style.marginLeft = moved + "px"; } } JS
  129. 129. @gregwhitworth {paint} var moved = 0; var tooFar = 500; function move(el) { if(moved <= tooFar) { moved++; el.style.marginLeft = moved + "px"; } } JS
  130. 130. @gregwhitworth {invalidation} ComposePaintLayoutStyleDOM Content Parsing Network JS
  131. 131. @gregwhitworth {paint} #move { width: 300px; height: 300px; background: blue; animation: move 1s; } @keyframes { to { transform: translateX(500px); } } CSS
  132. 132. @gregwhitworth {invalidation} ComposePaintLayoutStyleDOM Content Parsing Network
  133. 133. {questions} @gregwhitworth {questions}

×