Houdini - Explaining CSS

Size: px

Start display at page:

Download "Houdini - Explaining CSS"

Justina Sanders
5 years ago
Views:

1 Houdini - Explaining CSS Ian Kilpatrick - Google Software Engineer

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

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

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

6 Polyfill Track Implement Feature Use Feature!

7 DOM CSS User Script Style Layout (Rendering Pipeline) Style Layout Paint Composite

8 DOM CSS User Script Style Layout Style Layout Paint Composite

9 DOM CSS User Script Style Layout Style Layout Paint Composite

10 DOM CSS User Script Style Layout Style Layout Paint Composite

11 DOM CSS User Script Style Layout Style Layout Paint Composite

12 DOM CSS User Script Style Layout Style Layout Paint Composite

14 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); }

15 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); }

16 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); }

17 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); }

18 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); }

19 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); --my-scale: foo ; }

20 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); --my-scale: foo ; }

21 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); --my-scale: foo ; }

22 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); transition: --my-scale 4s; }

23 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); transition: --my-scale 4s; }

24 :root { --my-scale: 1; }.classname { --my-scale: 2; transform: scale(var(--my-scale)); transition: --my-scale 4s; }

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

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

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

28 .classname { --my-scale: 2; --my-scale: foo ; transform: scale(var(--my-scale)); transition: --my-scale 4s; }

29 DOM CSS User Script Style Layout Style Layout Paint Composite

30 DOM CSS User Script Style Layout Style Layout Paint Composite

31 DOM CSS User Script Style Layout Style Layout Paint Composite

41 DOM Tree Layout Computed Style Layout/Fragment Tree

42 DOM Tree Layout Computed Style Layout/Fragment Tree

43 DOM Tree Layout Computed Style Layout/Fragment Tree

44 DOM Tree Layout Computed Style Layout/Fragment Tree

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. */ } });

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. */ } });

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. */ } });

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. */ } });

49 DOM CSS User Script Style Layout Style Layout Paint Composite

50 DOM CSS User Script Style Layout Style Layout Paint Composite

55 Layout Information Paint Computed Style Pixels!

56 Layout Information Paint Computed Style Pixels!

57 Layout Information Paint Computed Style Pixels!

58 Layout Information Paint Computed Style Pixels!

59 // style.css.classname { background-image: paint(circle); --circle-color: red; transition: --circle-color 1s; } // paint.js registerpaint( circle, class { static inputproperties = [ --circle-color ]; overflow(stylemap) { /* stuff */ return overflow; } paint(ctx, geom, stylemap) { /* stuff */ } });

60 // style.css.classname { background-image: paint(circle); --circle-color: red; transition: --circle-color 1s; } // paint.js registerpaint( circle, class { static inputproperties = [ --circle-color ]; overflow(stylemap) { /* stuff */ return overflow; } paint(ctx, geom, stylemap) { /* stuff */ } });

61 // style.css.classname { background-image: paint(circle); --circle-color: red; transition: --circle-color 1s; } // paint.js registerpaint( circle, class { static inputproperties = [ --circle-color ]; overflow(stylemap) { /* stuff */ return overflow; } paint(ctx, geom, stylemap) { /* stuff */ } });

62 // style.css.classname { background-image: paint(circle); --circle-color: red; transition: --circle-color 1s; } // paint.js registerpaint( circle, class { static inputproperties = [ --circle-color ]; overflow(stylemap) { /* stuff */ return overflow; } paint(ctx, geom, stylemap) { /* stuff */ } });

63 // style.css.classname { background-image: paint(circle); --circle-color: red; transition: --circle-color 1s; } // paint.js registerpaint( circle, class { static inputproperties = [ --circle-color ]; overflow(stylemap) { /* stuff */ return overflow; } paint(ctx, geom, stylemap) { /* stuff */ } });

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

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

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

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

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

69 DOM CSS User Script Style Layout Style Layout Paint Composite

70 DOM CSS User Script Style Layout Style Layout Paint Composite

71 DOM CSS User Script Style Layout Style Layout Paint Composite

72 DEMOS!

73 Questions?

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

Visualizing Information with

Visualizing Information with HTML5 @synodinos 35,000 years ago Chauvet cave, southern France By far the oldest paintings ever discovered Hundreds of paintings At least 13 different species Viubk source