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
Welcome CSS LV5
Search
Afonso Pacifer
August 29, 2020
Programming
0
220
Welcome CSS LV5
Afonso Pacifer
August 29, 2020
Tweet
Share
More Decks by Afonso Pacifer
See All by Afonso Pacifer
Developer Experience (DevEx) no mundo Front-End: Do Ruby ao Next.js
afonsopacifer
0
64
Open Source e Developer Experience
afonsopacifer
1
87
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
74
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
79
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
80
Recriando o React do Zero em 10 minutos
afonsopacifer
0
82
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
180
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
170
State of JS 2022
afonsopacifer
0
290
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
XP, Testing and ninja testing ZOZ5
m_seki
2
300
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
600
CSC509 Lecture 05
javiergs
PRO
0
290
プログラマのための作曲入門
cheebow
0
540
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
260
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Speed Design
sergeychernyshev
32
1.1k
Side Projects
sachag
455
43k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Typedesign – Prime Four
hannesfritz
42
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Gamification - CAS2011
davidbonilla
81
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
GitHub's CSS Performance
jonrohan
1032
460k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Transcript
...
- My English is terrible Warnings: - My first talk
in English - Puedes preguntar en español
@afonsopacifer Bienvenida CSS Lv5.
Afonso Pacifer. Principal JS developer at @valleweb Host at @frontendbr
Co-organizer at @meetupcss Former CSS evangelist @afonsopacifer afonsopacifer.github.io
Brazil Community.
None
None
None
None
CSS LV5?
What? What happens To CSS4?
WTF! CSS 5?
Lek,
Back to base
World Wide Web Consortium https://www.w3.org/
Write Specs Implement Features
CSS 4 ? CSS 5 ?
Understanding the past to explain the future
CSS short timeline
1994 Håkon Wium Lie starts the first CSS draft. The
first presentation about CSS happened in Chicago at the WWW Conference. Bert Boss interested in the idea started helping the project.
1995 This year, In the same conference, the W3C became
interested. The first e-mail list about CSS was created.
1996 W3C released the CSS 1.0 specification. Internet Explorer 3
as the first browser to support CSS, followed by Netscape 4 and Opera 3.5.
1997 The CSS Working Group It was officially created.
1998 W3C released the CSS 2.0 specification. Erick Mayer release
the developer suit for Opera. This project improving the browser CSS support.
2011 W3C released the CSS 2.1.
2014 W3C released the HTML 5 bundle. The CSS3 leaves
the draft status to become a recommendation.
1994 1995 1996 1997 1998 2011 2014 2020 CSS 2.0
CSS 2.1
The solution?
CSS 3
Much more than animations, flexbox, borders, etc…
CSS 2.1 CSS 3 All CSS Specs Version 2.1 Flex
box Selectors Grid Layout Custom properties Media queries LV 1 LV 1 LV 2 LV 4 LV 5 Modules Monolith
A global CSS 4 or CSS 5 Don't make sense
What happens inside a level?
Working Draft WD Canditate Recommendation CR Proposed Recommendation PR Recommendation
REC
My Tips and Tricks
Follow the Editors
Help the Editors
Study the Specs
Example!
CSS Color Module Level 5 https://www.w3.org/TR/css-color-5/
None
Dynamically adjust color without preprocessors
color-mix() Take two colors and mixing them
mix-color( ) #ff0000 #00ff2f
Browsers Support?
None
Why?
Lets understand
rgb(255, 0, 0) #ff0000 lch(54, 106, 40) lightness: 54.2917% chroma:
106.8390 hue: 40.8526
https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
mix-color(#ff0000 #ffff00 ) 60% 40% 60%
How mix-color() work
60% 40% + Mixed lightness lch(C1_L, C1_C, C1_H) lch(C2_L, C2_C,
C2_H) C1_L * 60/100 + C2_L * 40/100 = X Mixed chroma C1_C * 60/100 + C2_C * 40/100 = Y Mixed hue C1_H * 60/100 + C2_H * 40/100 = z Result: lch(x, y, z)
None
CSS is easy to learn But its very very hard
to become an expert “
color-contrast() Select the better contrast following the WCAG
None
color-contrast( ) contrast ratio: 1.6 contrast ratio: 3.99 contrast ratio:
1.07 white #ccc, red, yellow
Better A11y .button { color :color-contrast(var(—bg) var(--theme-a), var(—theme-b)); } Custom
Design Systems Easy dark mode
Browsers Support?
None
None
And many others Cool functions
CSS Colors lv5 Is the future
Polyfill?
The Dark Side of Polyfilling CSS https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/
My new side project: css-color-polyfill
CSS Houdini https://developer.mozilla.org/en-US/docs/Web/Houdini
Final tips!
https://14habits.com/
Empieza a hacer lo que no sabes, y la evolución
será solo una consecuencia - Afonso Pacifer “
@afonsopacifer afonsopacifer.github.io Gracias.