آشنایی با تکنولوژی جدید 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