Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Leve seu CSS para o futuro
Search
Rafael Dantas
December 01, 2018
Technology
0
16
Leve seu CSS para o futuro
Talk dada no front in Floripa de 2018.
Rafael Dantas
December 01, 2018
Tweet
Share
More Decks by Rafael Dantas
See All by Rafael Dantas
O estado do CSS em 2019
raffaeldantass
1
200
CSS animations under the hood
raffaeldantass
0
51
CSS moderno para Web Semântica
raffaeldantass
0
36
Houdini e o futuro mágico do CSS
raffaeldantass
1
210
Dismistificando o CSS Grid Layout
raffaeldantass
0
120
Houdini e o Futuro das CSS
raffaeldantass
1
460
Dismistificando o CSS Grid Layout
raffaeldantass
1
53
Other Decks in Technology
See All in Technology
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.3k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
360
ソースを読むプロセスの例
sat
PRO
15
9.4k
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
570
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
280
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
170
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
330
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
470
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
React19.2のuseEffectEventを追う
maguroalternative
2
530
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
130
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Fireside Chat
paigeccino
40
3.7k
It's Worth the Effort
3n
187
28k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Context Engineering - Making Every Token Count
addyosmani
7
270
A better future with KSS
kneath
239
18k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Transcript
Leve seu CSS para o futuro com Houdini Por @raffaeldantass
Rafael Dantas @RaffaelDantass Organizador do @meetuphtmlsp Instrutor no @Coletividad Front
End @valleweb Colaborador no @iMasters
Quais empecilhos temos atualmente?
Não temos acesso ao CSSOM
Inconsistências entre navegadores
JS evolui muito rápido, CSS… nem tanto.
Como nasce uma propriedade nova em CSS?
Nova especificação é proposta Especificação é escrita Os vendors implementam
Melhorias e correções são propostas Re-implementação e correções são feitas Quando os vendors consideram a propriedade madura o suficiente Os navegadores Adotam a especificação Nós (Devs) usamos a especificação
Como funciona com JS?
Uma nova feature é proposta Cria-se um Polyfill/Transpilador Se utiliza
a nova feature
O que é o qual a proposta do Houdini?
É uma força tarefa criada pela W3C
Tem o objetivo de oferecer API`s para criarmos nossas próprias
propriedades
https://ishoudinireadyyet.com/
Parser DOM CSSOM Monta o layout Processo de Paint Processo
de Composite Processo de Cascata CSS Parser API CSS Typed OM CSS Layout API Painting API Animation Worklet Worklets Properties and Values API
CSS Typed OM CSS Layout API Painting API Worklets
CSS Typed OM - Tipos - Objetos - Métodos Valores
são expostos como objetos JS. Evitando concatenação através de strings
CSS Typed OM
CSS Typed OM
CSS Typed OM Quais beneficios isso me traria? Muito verboso?
Talvez.
CSS Typed OM - Menos erros Valores numéricos são retornados
como number, não string.
CSS Typed OM - Error handling É possível checar se
o valor passado é compatível com o que é esperado.
CSS Typed OM - Melhor performance Navegador terá menos trabalho
(não vai converter/concatenar strings)
Layout API Alguns conceitos importantes sobre como o navegador trabalha
com layouts
Delimitação do layout Child Layout Layout Child Layout Child Layout
Child Layout Child Container (Parent Layout)
Child Layout Layout Child styleMap Background-color Color Etc. Layout Fragment
Lida com valores intrínsecos de tamanho do Box min-content-size max-content-size
HTML
JS
CSS
Exemplo
Paint API HTML
Paint API HTML
Paint API JS
Exemplo
Worklet - Event Loop Age como uma roda gigante fora
da Main Thread
Main Thread Event Loop
Acesso low-level ao pipeline de renderização Worklet
Worklet É possível rodar JS e Web Assembly
Worklet Processa renderização de gráfico e áudios com maior performance
Worklet Processa renderização de gráfico e áudios com maior performance
Worklet Event Loop Worklet
Worklet Event Loop Worklet
Worklet Event Loop Worklet
Worklet Event Loop Worklet
Worklet Animation Worklet Layout Worklet Paint Worklet Audio Worklet
Em resumo Não vai mais depender da implementação por parte
dos vendors
Em resumo Não vai mais esperar tanto tempo por uma
propriedade nova
Em resumo Não haverá mais inconsistências entre navegadores
Em resumo Libs para lidar com inconsistências
Pra acompanhar https://github.com/w3c/css-houdini-drafts/issues W3C Google Chrome Labs https://github.com/GoogleChromeLabs/houdini-samples https://wiki.mozilla.org/CSS/Houdini Mozzila
Houdini Wiki https://drafts.css-houdini.org/ Drafts oficiais
@raffaeldantass OBRIGADO! Segue a gente! @valleweb rafa-dantas.com.br