آشنایی با تکنولوژی جدید Houdini
-
Upload
web-standards-school -
Category
Education
-
view
500 -
download
5
Transcript of آشنایی با تکنولوژی جدید Houdini
MOJDE PAJANG
Houdini Robust Tool
Introduction
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
JS Update Speed
Add New Feature to JS
Propose
Feature
Write a
Polyfill /
Transpiler
plugin
Use Feature!
Total Time = Days
What is Polyfill
•A polyfill is a browser • fallback, made in javascript
A polyfill is a browser fallback,made in javascript
Start Polyfilling CSS
As a developer you only have access to DOM and CSSOM
What is Houdini
Houdini
Houdini APIs
CSS properties and values API
Definition Pattern : --*
Ex : --main-color: #06c;
CSS properties and values API
CSS properties and values API
• Make custom Properties more useful by adding type
– Ex: Add transition and animate custom properties
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
CSS Layout API
This API give developers method named
registerLayout
Syntax: registerLayout(‘name’,class)
CSS Layout API
CSS Layout API
– Enables developers to write their own layout modules
method name class
CSS Layout API
Just write this on your CSS code
ChromeCanary
o Paint APIo Typed OMo Compositor Worklet
Connect With
Ian Kilpatrick@bfgeek
Surma@DasSurma
RESOURCES AND LINKS
• https://github.com/w3c/css-houdini-drafts, W3CThe latest public version of all Houdini drafts
• https://github.com/GoogleChrome/houdini-samples, GitHubCode examples showcasing and experimenting with possible APIs
Thank’s for your time