آیا این اتفاق برای شما پیش آمده که بخواهید از یکی از قابلیت های CSS استفاده کنید ولی چون تمامی مرورگرها از آن پشتیبانی نمی کرده اند و یا بطور کامل از آن پشتیبانی نمی کرده اند از استفاده از آن قابلیت صرف نظر کرده اید. Houdini یکی از وظایف جدید W3C است که هدف نهایی آن از بین بردن این مسائل با معرفی APIها و ابزارهای جدید می باشد. اما این به چه معنا است؟ آیا این ایده خوب است ؟ و این چگونه به ما برنامه نویسان برای برنامه نویسی وب سایت ها کمک می کند؟

1. MOJDE PAJANG
Houdini Robust Tool

2. Introduction

3. CSS Update Speed
Add New Feature to CSS
Propose
Feature
Write
specification
Browsers
Vendors
Implement
Wait for
Browsers
Adoption
Use Feature!
Display : flex
Total Time = Years

4. JS Update Speed
Add New Feature to JS
Propose
Feature
Write a
Polyfill /
Transpiler
plugin
Use Feature!
Total Time = Days

5. What is Polyfill
•A polyfill is a browser
•fallback, made in javascript
A polyfill is a browser fallback,
made in javascript

6. Start Polyfilling CSS
As a developer you only have access to DOM and CSSOM

7. What is Houdini

8. Houdini
Houdini APIs

9. CSS properties and values API
Definition Pattern : --*
Ex : --main-color: #06c;
CSS properties and values API

10. CSS properties and values API
• Make custom Properties more useful by adding type
– Ex: Add transition and animate custom properties

11. Worklets
Worklets are similar to web workers
1. can be invoked at various points in the rendering pipeline
2. is independent of the main thread
Worklets

12. CSS Layout API
This API give developers method named
registerLayout
Syntax: registerLayout(‘name’,class)
CSS Layout API

13. CSS Layout API
– Enables developers to write their own layout modules
method name class

14. CSS Layout API
Just write this on your CSS code

15. Chrome
Canary
o Paint API
o Typed OM
o Compositor Worklet

16. Connect With
Ian Kilpatrick
@bfgeek
Surma
@DasSurma

17. RESOURCES AND LINKS
• https://github.com/w3c/css-houdini-drafts, W3C
The latest public version of all Houdini drafts
• https://github.com/GoogleChrome/houdini-samples, GitHub
Code examples showcasing and experimenting with possible APIs

18. Thank’s for your time 