Welcome CSS LV5 - Speaker Deck

Slide 1

Slide 1 text

...

Slide 2

Slide 2 text

- My English is terrible Warnings: - My first talk in English - Puedes preguntar en español

Slide 3

Slide 3 text

@afonsopacifer Bienvenida CSS Lv5.

Slide 4

Slide 4 text

Afonso Pacifer. Principal JS developer at @valleweb Host at @frontendbr Co-organizer at @meetupcss Former CSS evangelist @afonsopacifer afonsopacifer.github.io

Slide 5

Slide 5 text

Brazil Community.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

CSS LV5?

Slide 11

Slide 11 text

What? What happens To CSS4?

Slide 12

Slide 12 text

WTF! CSS 5?

Slide 13

Slide 13 text

Lek,

Slide 14

Slide 14 text

Back to base

Slide 15

Slide 15 text

World Wide Web Consortium https://www.w3.org/

Slide 16

Slide 16 text

Write Specs Implement Features

Slide 17

Slide 17 text

CSS 4 ? CSS 5 ?

Slide 18

Slide 18 text

Understanding the past to explain the future

Slide 19

Slide 19 text

CSS short timeline

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

1995 This year, In the same conference, the W3C became interested. The first e-mail list about CSS was created.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

1997 The CSS Working Group It was officially created.

Slide 24

Slide 24 text

1998 W3C released the CSS 2.0 specification. Erick Mayer release the developer suit for Opera. This project improving the browser CSS support.

Slide 25

Slide 25 text

2011 W3C released the CSS 2.1.

Slide 26

Slide 26 text

2014 W3C released the HTML 5 bundle. The CSS3 leaves the draft status to become a recommendation.

Slide 27

Slide 27 text

1994 1995 1996 1997 1998 2011 2014 2020 CSS 2.0 CSS 2.1

Slide 28

Slide 28 text

The solution?

Slide 29

Slide 29 text

CSS 3

Slide 30

Slide 30 text

Much more than animations, flexbox, borders, etc…

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

A global CSS 4 or CSS 5 Don't make sense

Slide 33

Slide 33 text

What happens inside a level?

Slide 34

Slide 34 text

Working Draft WD Canditate Recommendation CR Proposed Recommendation PR Recommendation REC

Slide 35

Slide 35 text

My Tips and Tricks

Slide 36

Slide 36 text

Follow the Editors

Slide 37

Slide 37 text

Help the Editors

Slide 38

Slide 38 text

Study the Specs

Slide 39

Slide 39 text

Example!

Slide 40

Slide 40 text

CSS Color Module Level 5 https://www.w3.org/TR/css-color-5/

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Dynamically adjust color without preprocessors

Slide 43

Slide 43 text

color-mix() Take two colors and mixing them

Slide 44

Slide 44 text

mix-color( ) #ff0000 #00ff2f

Slide 45

Slide 45 text

Browsers Support?

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Why?

Slide 48

Slide 48 text

Lets understand

Slide 49

Slide 49 text

rgb(255, 0, 0) #ff0000 lch(54, 106, 40) lightness: 54.2917% chroma: 106.8390 hue: 40.8526

Slide 50

Slide 50 text

https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Slide 51

Slide 51 text

mix-color(#ff0000 #ffff00 ) 60% 40% 60%

Slide 52

Slide 52 text

How mix-color() work

Slide 53

Slide 53 text

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)

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

CSS is easy to learn But its very very hard to become an expert “

Slide 56

Slide 56 text

color-contrast() Select the better contrast following the WCAG

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

color-contrast( ) contrast ratio: 1.6 contrast ratio: 3.99 contrast ratio: 1.07 white #ccc, red, yellow

Slide 59

Slide 59 text

Better A11y .button { color :color-contrast(var(—bg) var(--theme-a), var(—theme-b)); } Custom Design Systems Easy dark mode

Slide 60

Slide 60 text

Browsers Support?

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

And many others Cool functions

Slide 64

Slide 64 text

CSS Colors lv5 Is the future

Slide 65

Slide 65 text

Polyfill?

Slide 66

Slide 66 text

The Dark Side of Polyfilling CSS https://philipwalton.com/articles/the-dark-side-of-polyﬁlling-css/

Slide 67

Slide 67 text

My new side project: css-color-polyfill

Slide 68

Slide 68 text

CSS Houdini https://developer.mozilla.org/en-US/docs/Web/Houdini

Slide 69

Slide 69 text

Final tips!

Slide 70

Slide 70 text

https://14habits.com/

Slide 71

Slide 71 text

Empieza a hacer lo que no sabes, y la evolución será solo una consecuencia - Afonso Pacifer “

Slide 72

Slide 72 text

@afonsopacifer afonsopacifer.github.io Gracias.