Thread by Aakash Rao
- Tweet
- Jan 1, 2023
- #ComputerScience #ComputerProgramming
Thread
What is CSS Houdini?
β₯ What it brings to the table
β₯ Benefits of CSS Houdini
β₯ Examples & Resources
A Thread π§΅
β₯ What it brings to the table
β₯ Benefits of CSS Houdini
β₯ Examples & Resources
A Thread π§΅
CSS Houdini is a collection of browser APIs that allow us to extend the capabilities of CSS.
It includes a set of APIs that give us more control over the styling and layout of a webpage and enable hooking into the browser's rendering engine to achieve custom effects.
It includes a set of APIs that give us more control over the styling and layout of a webpage and enable hooking into the browser's rendering engine to achieve custom effects.
Houdini's specification brings two API categories:
β₯ ππΆπ΄π΅-πΉπ²ππ²πΉ ππ£ππ
β₯ ππΌπ-πΉπ²ππ²πΉ ππ£ππ
β₯ ππΆπ΄π΅-πΉπ²ππ²πΉ ππ£ππ
β₯ ππΌπ-πΉπ²ππ²πΉ ππ£ππ
β₯ ππΆπ΄π΅-πΉπ²ππ²πΉ ππ£ππ: They have a close connection to how the browser renders pages (style β layout β paint β composite) which includes:
β Paint API
β Layout API
β Animation API
β Paint API
β Layout API
β Animation API
β₯ ππΌπ-πΉπ²ππ²πΉ ππ£ππ: They serve as a foundation for high-level APIs, which include:
β Typed Object Model API
β Properties & Values API
β Font Metrics API
β Worklets
β Typed Object Model API
β Properties & Values API
β Font Metrics API
β Worklets
β₯ Is CSS Houdini ready to use?
Here is a nice illustration of showing browser support of all the APIs by @DasSurma
Check it out yourself: ishoudinireadyyet.com/
Here is a nice illustration of showing browser support of all the APIs by @DasSurma
Check it out yourself: ishoudinireadyyet.com/
β₯ What it brings to the table?
One of Houdini's features is Worklets, a module written in JS, that extends CSS using one of its APIs.
They provide a way for us to define custom logic that can be used to generate or modify styles of a webpage.
E.g: houdini.how
One of Houdini's features is Worklets, a module written in JS, that extends CSS using one of its APIs.
They provide a way for us to define custom logic that can be used to generate or modify styles of a webpage.
E.g: houdini.how
β₯ Benefits of CSS Houdini
βΈ More control over styling & layout
βΈ Improved performance
βΈ Reusable styling modules
βΈ New possibilities for styling and layout
βΈ Consistency across browsers
βΈ More control over styling & layout
βΈ Improved performance
βΈ Reusable styling modules
βΈ New possibilities for styling and layout
βΈ Consistency across browsers
β₯ One of the simplest examples of CSS Houdini
Creating custom CSS properties: Yes, it uses CSS Houdini "Properties and Values" API, which we use regularly now to create our own custom CSS properties in the stylesheets.
Refer: developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API
Creating custom CSS properties: Yes, it uses CSS Houdini "Properties and Values" API, which we use regularly now to create our own custom CSS properties in the stylesheets.
Refer: developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API
Want to dive more?
Here comes the GitHub repo consist of almost everything related to CSS Houdini:
github.com/CSSHoudini/awesome-css-houdini
Here comes the GitHub repo consist of almost everything related to CSS Houdini:
github.com/CSSHoudini/awesome-css-houdini
That's it for this thread. Hope you enjoyed reading something new today! ππΌ
- Hii I'm Aakash. ππ½
- Sharing my journey and learnings. π
If you liked it, then you can follow me, @Aakash_codes β for more such content & resources.
Thanks for the support.π
- Hii I'm Aakash. ππ½
- Sharing my journey and learnings. π
If you liked it, then you can follow me, @Aakash_codes β for more such content & resources.
Thanks for the support.π
Mentions
See All
Afiz β‘οΈ @itsafiz
Β·
Jan 1, 2023
Very informative thread.