Welcome CSS LV5

Transcript

1. ...
2. - My English is terrible Warnings: - My first talk in English - Puedes preguntar en español
3. @afonsopacifer Bienvenida CSS Lv5.
4. Afonso Pacifer. Principal JS developer at @valleweb Host at @frontendbr Co-organizer at @meetupcss Former CSS evangelist @afonsopacifer afonsopacifer.github.io
5. Brazil Community.
10. CSS LV5?
11. What? What happens To CSS4?
12. WTF! CSS 5?
13. Lek,
14. Back to base
15. World Wide Web Consortium https://www.w3.org/
16. Write Specs Implement Features
17. CSS 4 ? CSS 5 ?
18. Understanding the past to explain the future
19. CSS short timeline
20. 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.
21. 1995 This year, In the same conference, the W3C became interested. The first e-mail list about CSS was created.
22. 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.
23. 1997 The CSS Working Group It was officially created.
24. 1998 W3C released the CSS 2.0 specification. Erick Mayer release the developer suit for Opera. This project improving the browser CSS support.
25. 2011 W3C released the CSS 2.1.
26. 2014 W3C released the HTML 5 bundle. The CSS3 leaves the draft status to become a recommendation.
27. 1994 1995 1996 1997 1998 2011 2014 2020 CSS 2.0 CSS 2.1
28. The solution?
29. CSS 3
30. Much more than animations, flexbox, borders, etc…
31. 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
32. A global CSS 4 or CSS 5 Don't make sense
33. What happens inside a level?
34. Working Draft WD Canditate Recommendation CR Proposed Recommendation PR Recommendation REC
35. My Tips and Tricks
36. Follow the Editors
37. Help the Editors
38. Study the Specs
39. Example!
40. CSS Color Module Level 5 https://www.w3.org/TR/css-color-5/
42. Dynamically adjust color without preprocessors
43. color-mix() Take two colors and mixing them
44. mix-color( ) #ff0000 #00ff2f
45. Browsers Support?
47. Why?
48. Lets understand
49. rgb(255, 0, 0) #ff0000 lch(54, 106, 40) lightness: 54.2917% chroma: 106.8390 hue: 40.8526
50. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
51. mix-color(#ff0000 #ffff00 ) 60% 40% 60%
52. How mix-color() work
53. 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)
55. CSS is easy to learn But its very very hard to become an expert “
56. color-contrast() Select the better contrast following the WCAG
58. color-contrast( ) contrast ratio: 1.6 contrast ratio: 3.99 contrast ratio: 1.07 white #ccc, red, yellow
59. Better A11y .button { color :color-contrast(var(—bg) var(--theme-a), var(—theme-b)); } Custom Design Systems Easy dark mode
60. Browsers Support?
63. And many others Cool functions
64. CSS Colors lv5 Is the future
65. Polyfill?
66. The Dark Side of Polyfilling CSS https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/
67. My new side project: css-color-polyfill
68. CSS Houdini https://developer.mozilla.org/en-US/docs/Web/Houdini
69. Final tips!
70. https://14habits.com/
71. Empieza a hacer lo que no sabes, y la evolución será solo una consecuencia - Afonso Pacifer “
72. @afonsopacifer afonsopacifer.github.io Gracias.