A presentation at Codemotion Madrid in in Madrid, Spain by Joan León
Houdini programming in CSS Madrid | Nov 30 - Dec 1, 2018
CSS
.CSS { } @nucliweb
.CSS { } @nucliweb
CSS Houdini
.CSS-Houdini { } The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web. - CSS Houdini @nucliweb
.CSS-Houdini { } @nucliweb
.CSS-Houdini { } Box Tree API Parser API Layout API Paint API Properties & Values API Worklets Typed OM API Animation Worklet Font Metrics API @nucliweb
Extends CSS
.Extends-CSS .Worklets { } Worklet connects to the browser engine Is a Javascript Module Without control over execution It has no impact on performance @nucliweb
.Extends-CSS .Worklets { } @nucliweb
.Extends-CSS .Worklets { } js if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('PlaceholderBoxPainter.js'); } worklet class PlaceholderBoxPainter { paint(ctx, size) { // Magic } } registerPaint('placeholder-box', PlaceholderBoxPainter); @nucliweb
.Extendes-CSS { } Paint API @nucliweb
.Extends-CSS .Paint-API{ } js if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('PlaceholderBoxPainter.js'); } css @supports (background: paint(slanted-bg)) { .el span { background: paint(slanted-bg); } } @nucliweb
.Extends-CSS .Paint-API{ } worklet class SlantedBg { constructor () { this.hue = 110; } paint (ctx, geom, props, args) { // draw random colors ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)'; this.hue += 10; ... } } registerPaint('slanted-bg', SlantedBg) @nucliweb
.Extends-CSS .Paint-API{ } worklet registerPaint('slanted-bg', class SlantedBg { class { constructor () { this.hue = 110; } paint (ctx, geom, props, args) { // draw random colors ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)'; this.hue += 10; ... } } }) registerPaint('slanted-bg', SlantedBg) @nucliweb
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles https://codesandbox.io/embed/yqm0y9v42v?fontsize=16 @nucliweb
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-props https://codesandbox.io/embed/r74pzln91q @nucliweb
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-args https://codesandbox.io/embed/044vkz1k6w @nucliweb
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-props-JS https://codesandbox.io/embed/zxyzr4l61l @nucliweb
.Extends-CSS { } Properties & Values API @nucliweb
.Extends-CSS .Properties-Values-API { } js CSS.registerProperty({ name: '--line-with', syntax: '<number>', inherits: false, initialValue: 1 }); @nucliweb
.Extends-CSS .Properties-Values-API { } CSS Properties Syntax '<length>' accepts length values. '<length> | <percentage>' accepts lengths, percentages, percentage calc expressions, and length calc expressions, but not calc expressions containing a combination of length and percentage values. '<length-percentage>' accepts all values that "<length> | <percentage>" would accept, as well as calc expressions containing a combination of both length.. 'big | bigger | BIGGER' accepts the ident "big", or "bigger", or "BIGGER". '<length>+' accepts a space-separated list of length values. @nucliweb
.Extends-CSS .Properties-Values-API { } '<length>' '<number>' '<percentage>' '<length-percentage>' '<length>' accepts length values. '<color>' '<length> | <percentage>' accepts lengths, percentages,'<image>' percentage calc expressions, and length calc expressions, but not calc expressions '<url>' containing a combination of length and percentage values. '<integer>' '<length-percentage>' accepts all values that "<length> '<angle>' | <percentage>" would accept, as well as calc expressions containing a combination of both length.. '<time>' 'big | bigger | BIGGER' accepts the ident "big", or "bigger", or "BIGGER". '<resolution>' '<length>+' accepts a space-separated list of length values. '<transform-function>' '<custom-ident>' CSS Properties Syntax css-properties-values-api/#supported-syntax-strings @nucliweb
.Extends-CSS .Properties-Values-API { } https://codesandbox.io/embed/92znj0j9ow @nucliweb
.Extends-CSS .Properties-Values-API { } //codepen.io/thebabydino/embed/MrZvNm/?height=265&themeid=light&default-tab=css,result @nucliweb
.Extends-CSS .Properties-Values-API { } @nucliweb
.Extends-CSS .Properties-Values-API { } @nucliweb
.Extends-CSS .Properties-Values-API { } input @property --theme { syntax: '<color>+'; initial-value: #fff; inherits: true; } postcss-register-custom-props output if ("registerProperty" in CSS) CSS.registerProperty({ name: "--theme", syntax: "<color>+", initialValue: "#fff", inherits: true }); } (Vitalii Bobrov) @nucliweb
.Extends-CSS .Properties-Values-API { } input output @property --highlight-color { inherits: true; initial-value: red; syntax: "<color>"; } [ { "name": "--highlight-color", "inherits": true, "initialValue": "red", "syntax": "<color>" }, { "name": "--gap-spacing", "initialValue": "1em", "syntax": "<length-percentage>" } @property --gap-spacing { inherits: false; initial-value: 1em; syntax: "<length-percentage>"; } ] postcss-register-property (Jonathan Neal) @nucliweb
.Extends-CSS .Properties-Values-API { } input output @property --highlight-color { [ inherits: true; { js initial-value: red; "name": "--highlight-color", syntax: "<color>"; "inherits": true, import properties from './styles.css.properties.json'; } "initialValue": "red", "syntax":{ "<color>" if (window.CSS && CSS.registerProperty) @property --gap-spacing { }, for (const descriptor of properties) { inherits: false; { CSS.registerProperty(descriptor); initial-value: 1em; "name": "--gap-spacing", } syntax: "<length-percentage>"; "initialValue": "1em", } } "syntax": "<length-percentage>" } ] postcss-register-property (Jonathan Neal) @nucliweb
.Extends-CSS { } Typed OM API @nucliweb
.Extends-CSS .Typed-OM-API { } The Type OM API is an extension of the existing CSS object model (CSSOM) that exposes CSS values as typed JavaScript objects, rather than a simple string of text as they are today. With Type OM API, CSS values are now members of a new base class CSSStyleValue. CSSPositionValue CSSKeywordValue CSSImageValue CSSUnitValue CSSMathValue CSSTransformValue @nucliweb
.Extends-CSS .Typed-OM-API { } CSSOM el.style.opacity = 0.5; window.getComputedStyle(el).opacity === "0.5" // Strings! Typed OM el.attributeStyleMap.set('opacity', 0.5); el.computedStyleMap().get('opacity').value // 0.5 @nucliweb
@nucliweb
@nucliweb
.Extends-CSS .Typed-OM-API { } Nested expressions calc(1px - 2 * 3em) new CSSMathSum( CSS.px(1), new CSSMathNegate( new CSSMathProduct(2, CSS.em(3)) ) ); @nucliweb
.Extends-CSS .Typed-OM-API { } attributeStyleMap el.attributeStyleMap.set('font-size', CSS.em(2)); el.attributeStyleMap.get('font-size'); // CSSUnitValue { value: 2, unit: 'em' } el.attributeStyleMap.set('opacity', CSS.number(.5)); el.attributeStyleMap.get('opacity'); // CSSUnitValue { value: 0.5, unit: 'number' } @nucliweb
.Extends-CSS .Typed-OM-API { } css .foo { background-position: center bottom 10px; transform: translateX(1em) rotate(50deg) skewX(10deg); vertical-align: baseline; width: calc(100% - 3em); } @nucliweb
.Extends-CSS .Typed-OM-API { } computedStyleMap const cs = document.querySelector('.foo').computedStyleMap(); cs.get('vertical-align'); // CSSKeywordValue { // value: 'baseline', // } cs.get('background-position').x; // CSSUnitValue { // value: 50, // unit: 'percent', // } cs.get('background-position').y; @nucliweb
.Extends-CSS { } Animation Worklet @nucliweb
.Extends-CSS Animation-Worlet { } houdini.glitch.me/animation @nucliweb
.Extends-CSS { } Layout API @nucliweb
.Extends-CSS .Layout-API {} @nucliweb
Support
Conclusions
.Conclusions { } Poly lls This is not for me Free will Houdini is NOT like a Babel for CSS @nucliweb
.Conclusions { } Poly lls This is not for me Free will Houdini is NOT like a Babel for CSS @nucliweb
.Conclusions { } Poly lls This is not for me Free will I see another talk... Houdini is NOT like a Babel for CSS @nucliweb
CSS is Awesome
Resources
.Resources { } How Browsers Work: Behind the scenes of modern web browsers .Awesome-CSS-Houdini { } ⭐ are welcome Houdini samples @nucliweb
.Hello { Joan León #CSS Developer Advocate at @SchibstedSpain #Animation #PostCSS @nucliweb } Co-Founder & UI Engineers #SVG at @sublime_codes #Javascript
SUI Components @suiengineers @carlosvillu @midudev
.Talk::after { content: "Any "Any question?"; question?"; } @nucliweb
.Thanks { @nucliweb }
for free. You
can too.