Houdini - Explaining CSS Ian Kilpatrick - Google Software Engineer - - PowerPoint PPT Presentation

▶
houdini explaining css
SMART_READER_LITE
LIVE PREVIEW

Houdini - Explaining CSS Ian Kilpatrick - Google Software Engineer - - PowerPoint PPT Presentation

Jan 08, 2023 103 likes •861 views

Houdini - Explaining CSS Ian Kilpatrick - Google Software Engineer Twitter: @bfgeek Standards Track Wait for Write Browsers Propose Idea Browser Use Feature! Specification Implement Adoption Standards Track Wait for Write Browsers

slide-1
SLIDE 1

Houdini - Explaining CSS

Ian Kilpatrick - Google Software Engineer Twitter: @bfgeek

slide-2
SLIDE 2
slide-3
SLIDE 3

Standards Track

Propose Idea Write Specification Browsers Implement Wait for Browser Adoption Use Feature!

slide-4
SLIDE 4

Standards Track

Propose Idea Write Specification Browsers Implement Wait for Browser Adoption Use Feature!

slide-5
SLIDE 5

Standards Track

Propose Idea Write Specification Browsers Implement Wait for Browser Adoption Use Feature!

slide-6
SLIDE 6

Polyfill Track

Implement Feature Use Feature!

slide-7
SLIDE 7

DOM CSS Style Layout Style Layout Paint Composite User Script

(Rendering Pipeline)

slide-8
SLIDE 8

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-9
SLIDE 9

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-10
SLIDE 10

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-11
SLIDE 11

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-12
SLIDE 12

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-13
SLIDE 13
slide-14
SLIDE 14

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); }

slide-15
SLIDE 15

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); }

slide-16
SLIDE 16

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); }

slide-17
SLIDE 17

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); }

slide-18
SLIDE 18

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); }

slide-19
SLIDE 19

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale));

  • -my-scale: ‘foo’;

}

slide-20
SLIDE 20

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale));

  • -my-scale: ‘foo’;

}

slide-21
SLIDE 21

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale));

  • -my-scale: ‘foo’;

}

slide-22
SLIDE 22

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); transition: --my-scale 4s; }

slide-23
SLIDE 23

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); transition: --my-scale 4s; }

slide-24
SLIDE 24

:root {

  • -my-scale: 1;

} .className {

  • -my-scale: 2;

transform: scale(var(--my-scale)); transition: --my-scale 4s; }

slide-25
SLIDE 25

document.registerProperty({ name: ‘--my-scale’, syntax: ‘<number>’, inherits: false, initial: ‘1’, });

slide-26
SLIDE 26

document.registerProperty({ name: ‘--my-scale’, syntax: ‘<number>’, inherits: false, initial: ‘1’, });

slide-27
SLIDE 27

document.registerProperty({ name: ‘--my-scale’, syntax: ‘<number>’, inherits: false, initial: ‘1’, });

slide-28
SLIDE 28

.className {

  • -my-scale: 2;
  • -my-scale: ‘foo’;

transform: scale(var(--my-scale)); transition: --my-scale 4s; }

slide-29
SLIDE 29

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-30
SLIDE 30

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-31
SLIDE 31

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41

Layout

DOM Tree Computed Style

Layout/Fragment Tree

slide-42
SLIDE 42

Layout

DOM Tree Computed Style

Layout/Fragment Tree

slide-43
SLIDE 43

Layout

DOM Tree Computed Style

Layout/Fragment Tree

slide-44
SLIDE 44

Layout

DOM Tree Computed Style

Layout/Fragment Tree

slide-45
SLIDE 45

// style.css .className { display: layout(‘relative’); } // layout.js registerLayout(‘relative’, class { static inputProperties = [‘--above’, ‘--below’, /* etc */ ]; minInlineSize() { /* stuff */ return minSize; } maxInlineSize() { /* stuff */ return maxSize; } layout(constraints, children, styleMap) { /* layout alg. */ } });

slide-46
SLIDE 46

// style.css .className { display: layout(‘relative’); } // layout.js registerLayout(‘relative’, class { static inputProperties = [‘--above’, ‘--below’, /* etc */ ]; minInlineSize() { /* stuff */ return minSize; } maxInlineSize() { /* stuff */ return maxSize; } layout(constraints, children, styleMap) { /* layout alg. */ } });

slide-47
SLIDE 47

// style.css .className { display: layout(‘relative’); } // layout.js registerLayout(‘relative’, class { static inputProperties = [‘--above’, ‘--below’, /* etc */ ]; minInlineSize() { /* stuff */ return minSize; } maxInlineSize() { /* stuff */ return maxSize; } layout(constraints, children, styleMap) { /* layout alg. */ } });

slide-48
SLIDE 48

// style.css .className { display: layout(‘relative’); } // layout.js registerLayout(‘relative’, class { static inputProperties = [‘--above’, ‘--below’, /* etc */ ]; minInlineSize() { /* stuff */ return minSize; } maxInlineSize() { /* stuff */ return maxSize; } layout(constraints, children, styleMap) { /* layout alg. */ } });

slide-49
SLIDE 49

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-50
SLIDE 50

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55

Paint

Layout Information Computed Style Pixels!

slide-56
SLIDE 56

Paint

Layout Information Computed Style Pixels!

slide-57
SLIDE 57

Paint

Layout Information Computed Style Pixels!

slide-58
SLIDE 58

Paint

Layout Information Computed Style Pixels!

slide-59
SLIDE 59

// style.css .className { background-image: paint(circle);

  • -circle-color: red;

transition: --circle-color 1s; } // paint.js registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’];

  • verflow(styleMap) { /* stuff */ return overflow; }

paint(ctx, geom, styleMap) { /* stuff */ } });

slide-60
SLIDE 60

// style.css .className { background-image: paint(circle);

  • -circle-color: red;

transition: --circle-color 1s; } // paint.js registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’];

  • verflow(styleMap) { /* stuff */ return overflow; }

paint(ctx, geom, styleMap) { /* stuff */ } });

slide-61
SLIDE 61

// style.css .className { background-image: paint(circle);

  • -circle-color: red;

transition: --circle-color 1s; } // paint.js registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’];

  • verflow(styleMap) { /* stuff */ return overflow; }

paint(ctx, geom, styleMap) { /* stuff */ } });

slide-62
SLIDE 62

// style.css .className { background-image: paint(circle);

  • -circle-color: red;

transition: --circle-color 1s; } // paint.js registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’];

  • verflow(styleMap) { /* stuff */ return overflow; }

paint(ctx, geom, styleMap) { /* stuff */ } });

slide-63
SLIDE 63

// style.css .className { background-image: paint(circle);

  • -circle-color: red;

transition: --circle-color 1s; } // paint.js registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’];

  • verflow(styleMap) { /* stuff */ return overflow; }

paint(ctx, geom, styleMap) { /* stuff */ } });

slide-64
SLIDE 64

registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’]; paint(ctx, geom, styleMap) { var color = styleMap.get('--circle-color'); ctx.fillStyle = color; var x = geom.width / 2; var y = geom.height / 2; var radius = Math.min(x, y); ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); } });

slide-65
SLIDE 65

registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’]; paint(ctx, geom, styleMap) { var color = styleMap.get('--circle-color'); ctx.fillStyle = color; var x = geom.width / 2; var y = geom.height / 2; var radius = Math.min(x, y); ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); } });

slide-66
SLIDE 66

registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’]; paint(ctx, geom, styleMap) { var color = styleMap.get('--circle-color'); ctx.fillStyle = color; var x = geom.width / 2; var y = geom.height / 2; var radius = Math.min(x, y); ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); } });

slide-67
SLIDE 67

registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’]; paint(ctx, geom, styleMap) { var color = styleMap.get('--circle-color'); ctx.fillStyle = color; var x = geom.width / 2; var y = geom.height / 2; var radius = Math.min(x, y); ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); } });

slide-68
SLIDE 68

registerPaint(‘circle’, class { static inputProperties = [‘--circle-color’]; paint(ctx, geom, styleMap) { var color = styleMap.get('--circle-color'); ctx.fillStyle = color; var x = geom.width / 2; var y = geom.height / 2; var radius = Math.min(x, y); ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fill(); } });

slide-69
SLIDE 69

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-70
SLIDE 70

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-71
SLIDE 71

DOM CSS Style Layout Style Layout Paint Composite User Script

slide-72
SLIDE 72

DEMOS!

slide-73
SLIDE 73

Questions?

slide-74
SLIDE 74

Specs: drafts.css-houdini.org Github: github.com/w3c/css-houdini- drafts