CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria :). Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador. En el motor CSS existe una secuencia de procesos que con Houdini podremos modificar. Tenemos métodos como registerProperty, registerLayout o registerPaint que nos permiten programar nuestros propios módulos totalmente optimizados para que el CSS Engine los interprete de forma nativa. Find out more presentations at https://madrid2018.codemotionworld.com/speakers/

1. HoudiniHoudini programming inprogramming in CSSCSS
Joan LeónJoan León @nucliweb@nucliweb
Madrid | Nov 30 - Dec 1, 2018

2. HoudiniHoudini
programming inprogramming in CSSCSS
MadridMadrid | Nov 30 - Dec 1, 2018| Nov 30 - Dec 1, 2018

3. CSSCSS

4. .CSS { }
@nucliweb

5. @nucliweb
.CSS { }

6. CSS HoudiniCSS Houdini

7. @nucliweb
.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

8. @nucliweb
.CSS-Houdini { }

9. @nucliweb
Paint API
Typed OM API
Properties & Values API
Animation Worklet
Layout API
Worklets
Font Metrics API
Box Tree API Parser API
.CSS-Houdini { }

10. Extends CSSExtends CSS

11. @nucliweb
Worklets
.Extends-CSS { }

12. .Extends-CSS .Worklets { }
@nucliweb
Worklet connects to the browser engine
Is a Javascript Module
It has no impact on performance
Without control over execution

13. @nucliweb
.Extends-CSS .Worklets { }

14. @nucliweb
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('PlaceholderBoxPainter.js');
}
class PlaceholderBoxPainter {
paint(ctx, size) {
// Magic
}
}
registerPaint('placeholder-box', PlaceholderBoxPainter);
worklet
js
.Extends-CSS .Worklets { }

15. @nucliweb
Paint API
.Extendes-CSS { }

16. .Extends-CSS .Paint-API{ }
@nucliweb
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('PlaceholderBoxPainter.js');
}
@supports (background: paint(slanted-bg)) {
.el span {
background: paint(slanted-bg);
}
}
css
js

17. @nucliweb
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)
worklet
.Extends-CSS .Paint-API{ }

18. @nucliweb
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)
worklet
registerPaint('slanted-bg', class {
constructor () {
this.hue = 110;
}
paint (ctx, geom, props, args) {
// draw random colors
ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)';
this.hue += 10;
...
}
})
.Extends-CSS .Paint-API{ }

19. @nucliweb
https://codesandbox.io/embed/yqm0y9v42v?fontsize=16
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles

20. @nucliweb
https://codesandbox.io/embed/r74pzln91q
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-props

21. @nucliweb
https://codesandbox.io/embed/044vkz1k6w
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-args

22. @nucliweb
https://codesandbox.io/embed/zxyzr4l61l
.Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-props-JS

26. @nucliweb
Properties & Values API
.Extends-CSS { }

27. @nucliweb
.Extends-CSS .Properties-Values-API { }
CSS.registerProperty({
name: '--line-with',
syntax: '<number>',
inherits: false,
initialValue: 1
});
js

28. @nucliweb
CSS Properties SyntaxCSS 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.
.Extends-CSS .Properties-Values-API { }

29. @nucliweb
CSS Properties SyntaxCSS 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.
'<length>'
'<number>'
'<percentage>'
'<length-percentage>'
'<color>'
'<image>'
'<url>'
'<integer>'
'<angle>'
'<time>'
'<resolution>'
'<transform-function>'
'<custom-ident>'
[ ]()css-properties-values-api/#supported-syntax-strings
.Extends-CSS .Properties-Values-API { }

30. @nucliweb
https://codesandbox.io/embed/92znj0j9ow
.Extends-CSS .Properties-Values-API { }

31. @nucliweb
//codepen.io/thebabydino/embed/MrZvNm/?height=265&theme-
id=light&default-tab=css,result
.Extends-CSS .Properties-Values-API { }

32. @nucliweb
.Extends-CSS .Properties-Values-API { }

33. @nucliweb
.Extends-CSS .Properties-Values-API { }

34. @nucliweb
postcss-register-custom-propspostcss-register-custom-props
@property --theme {
syntax: '<color>+';
initial-value: #fff;
inherits: true;
}
if ("registerProperty" in CSS)
CSS.registerProperty({
name: "--theme",
syntax: "<color>+",
initialValue: "#fff",
inherits: true
});
}
input output
.Extends-CSS .Properties-Values-API { }
( )Vitalii Bobrov

35. @nucliweb
postcss-register-propertypostcss-register-property
@property --highlight-color {
inherits: true;
initial-value: red;
syntax: "<color>";
}
@property --gap-spacing {
inherits: false;
initial-value: 1em;
syntax: "<length-percentage>";
}
[
{
"name": "--highlight-color",
"inherits": true,
"initialValue": "red",
"syntax": "<color>"
},
{
"name": "--gap-spacing",
"initialValue": "1em",
"syntax": "<length-percentage>"
}
]
input output
.Extends-CSS .Properties-Values-API { }
(Jonathan Neal)

36. @nucliweb
postcss-register-propertypostcss-register-property
@property --highlight-color {
inherits: true;
initial-value: red;
syntax: "<color>";
}
@property --gap-spacing {
inherits: false;
initial-value: 1em;
syntax: "<length-percentage>";
}
[
{
"name": "--highlight-color",
"inherits": true,
"initialValue": "red",
"syntax": "<color>"
},
{
"name": "--gap-spacing",
"initialValue": "1em",
"syntax": "<length-percentage>"
}
]
import properties from './styles.css.properties.json';
if (window.CSS && CSS.registerProperty) {
for (const descriptor of properties) {
CSS.registerProperty(descriptor);
}
}
input output
js
.Extends-CSS .Properties-Values-API { }
(Jonathan Neal)

37. @nucliweb
Typed OM API
.Extends-CSS { }

38. @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.
CSSUnitValue
CSSKeywordValueCSSPositionValue CSSImageValue
CSSTransformValueCSSMathValue

39. @nucliweb
el.style.opacity = 0.5;
window.getComputedStyle(el).opacity === "0.5" // Strings!
CSSOM
el.attributeStyleMap.set('opacity', 0.5);
el.computedStyleMap().get('opacity').value // 0.5
Typed OM
.Extends-CSS .Typed-OM-API { }

40. @nucliweb

41. @nucliweb

42. calc(1px - 2 * 3em)
new CSSMathSum(
CSS.px(1),
new CSSMathNegate(
new CSSMathProduct(2, CSS.em(3))
)
);
@nucliweb
Nested expressions
.Extends-CSS .Typed-OM-API { }

43. 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
attributeStyleMap
.Extends-CSS .Typed-OM-API { }

44. .foo {
background-position: center bottom 10px;
transform: translateX(1em) rotate(50deg) skewX(10deg);
vertical-align: baseline;
width: calc(100% - 3em);
}
@nucliweb
css
.Extends-CSS .Typed-OM-API { }

45. 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
computedStyleMap
.Extends-CSS .Typed-OM-API { }

46. @nucliweb
Animation Worklet
.Extends-CSS { }

47. @nucliweb
.Extends-CSS Animation-Worlet { }
[houdini.glitch.me/animation]()

48. @nucliweb
Layout API
.Extends-CSS { }

49. @nucliweb
.Extends-CSS .Layout-API {}

50. SupportSupport

53. ConclusionsConclusions

54. @nucliweb
.Conclusions { }
Polylills

55. @nucliweb
.Conclusions { }
Polylills
This is not for me

56. @nucliweb
.Conclusions { }
Polylills
This is not for me
Free will

57. @nucliweb
.Conclusions { }
Polylills
This is not for me
Houdini is NOT like a Babel for CSS
Free will

58. @nucliweb
.Conclusions { }
Polylills
This is not for me
Houdini is NOT like a Babel for CSS
Free will

59. @nucliweb
.Conclusions { }
Polylills
This is not for me
Houdini is NOT like a Babel for CSS
Free will
I see another talk...

60. CSSCSS
isis
AwesomeAwesome

61. ResourcesResources

62. @nucliweb
.Resources { }
How Browsers Work: Behind the scenes of modern web browsers
.Awesome-CSS-Houdini { } are welcome⭐
Houdini samples

64. Developer Advocate
at
Co-Founder & UI Engineers
at
@SchibstedSpain
@sublime_codes
Joan León
.Hello {.Hello {
}}
@nucliweb
#Javascript
#CSS
#PostCSS
#Animation
#SVG

67. SUI ComponentsSUI Components
@suiengineers

68. SUI ComponentsSUI Components
@suiengineers

69. SUI ComponentsSUI Components
@suiengineers

70. SUI ComponentsSUI Components
@suiengineers
@carlosvillu @midudev

71. .Talk::after {.Talk::after {
}}
content: "content: "Any question?Any question?";";
@nucliweb

72. .Thanks {.Thanks {
}}
@nucliweb