Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Welcome CSS LV5
Afonso Pacifer
August 29, 2020
Programming
0
140
Welcome CSS LV5
Afonso Pacifer
August 29, 2020
Tweet
Share
More Decks by Afonso Pacifer
See All by Afonso Pacifer
No pain no gain
afonsopacifer
0
110
A liberdade vem do Ether
afonsopacifer
0
23
Front-End 101: A resposta sobre “estudar a base”
afonsopacifer
4
540
PRPL pattern na prática com React
afonsopacifer
1
250
Style Strategies in Vue.js
afonsopacifer
2
110
Polymer Project: State of Union
afonsopacifer
0
100
Google Chrome as a Platform
afonsopacifer
0
92
Front-End Development in less than 12 parsecs
afonsopacifer
2
190
Web Components and beyond with Polymer
afonsopacifer
0
59
Other Decks in Programming
See All in Programming
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
150
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
180
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
310
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
1.6k
ベストプラクティス・ドリフト
sssssssssssshhhhhhhhhh
1
220
FullStack eXchange, July 2022
brucel
0
200
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
夕食断食にTRY!/for-lt-12th
pachikuriii
0
250
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
120
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
300
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
posquit0
0
530
パスワードに関する最近の動向
kenchan0130
1
340
Featured
See All Featured
Thoughts on Productivity
jonyablonski
44
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
How to name files
jennybc
41
63k
Navigating Team Friction
lara
175
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Agile that works and the tools we love
rasmusluckow
319
19k
Become a Pro
speakerdeck
PRO
3
910
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
We Have a Design System, Now What?
morganepeng
35
3k
Visualization
eitanlees
125
12k
For a Future-Friendly Web
brad_frost
166
7.5k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
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.