CSS Houdini
@manucastrillonm
I am...
Pizza and buñuelos lover
Self-proclaimed 'Emoji Expert'
I'm co-organizer of Pioneras Developers and I work at Huge inc.
Manuela Castrillón
"There's a new CSS feature, now I can use it without problems"
- Nobody, never
CSS has a lot of cross-browser bugs and inconsistencies
https://twitter.com/Martijn_Cuppens/status/1015169981368225793
Becoming a CSS standard is not an easy task
Working Draft
(WD)
Candidate Recomendation
(WD)
Proposed Recomendation
(PR)
W3C
Recommendation
(REC)
Life with Javascript is so much easier
Easy Peasy!!!! CSS Polyfills
Is impossible to do it without ruining the performance
What can we do?
CSSOM
DOM
"Is underspecified, inconsistent across browsers and missing critical features"
CSS Houdini
The Houdini task force consists of engineers from Mozilla, Apple, Opera, Microsoft, HP, Intel and Google working together to expose certain parts of the CSS engine to web developers.
CSS Houdini
Goals:
-
Normalize cross-browser bugs
-
Develop prolyfills and polyfills to use and add new css features
CSS Houdini
That might not be necessary since we are not developing complex websites and we already have libraries and frameworks that solve those issues for us.
CSS Houdini
They have a lot of bugs
CSS Houdini
Let's celebrate!
DRAFTS
What's wrong here?
CSS Typed OM
This specification exposes CSS values as typed JavaScript objects to facilitate their performant manipulation
Data types
- CSSNumberValue
- CSSSimpleLength (px, em, vh, vw)
- CSSCalcLength
- CSSKeywordValue
Calc Values
Mathematical operations
And more...
Properties and values
Do you know CSS Custom Properties a.k.a. "CSS Variables"? This is them but with types!
Worklets
Similar to Web Workers but they are light-weight and short-lived.
“Workers [...] are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image.”
Layout API
write your own layout!
Paint API
allows you to programmatically generate an image whenever a CSS property expects an image
Animation Worklet
Gives us the ability to drive Animations based on user input, like scrolling, in a standard, non-blocking way!
Font Metrics API
What is the bounding box when I render string X with font Y at size Z?
Parser API
Allow authors access to the engine's parser.
"Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of"
- Philip Walton
“Houdini sounds like the best thing since slice bread”
- Dan Tocchini
We can be part of this project!
http://ishoudinireadyyet.com
1, 2, 3.... Houdini
Thank You
@manucastrillonm
CSS Houdini
By Manu Castrillón
