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