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.

6. None
7. None
8. None
9. None

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/

41. None

42. Dynamically adjust color without preprocessors

43. color-mix() Take two colors and mixing them

44. mix-color( ) #ff0000 #00ff2f

45. Browsers Support?

46. None

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)
54. None

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

57. None

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?

61. None
62. None

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.