Welcome CSS LV5

Transcript

1. ...
   

   View Slide

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

   View Slide

3. @afonsopacifer
   Bienvenida
   CSS Lv5.
   

   View Slide

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

   View Slide

5. Brazil
   Community.
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. CSS LV5?
    

    View Slide

11. What?
    What happens
    To CSS4?
    

    View Slide

12. WTF!
    CSS 5?
    

    View Slide

13. Lek,
    

    View Slide

14. Back to base
    

    View Slide

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

    View Slide

16. Write Specs Implement Features
    

    View Slide

17. CSS 4 ?
    CSS 5 ?
    

    View Slide

18. Understanding
    the past
    to explain the future
    

    View Slide

19. CSS
    short timeline
    

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

23. 1997 The CSS Working Group
    It was officially created.
    

    View Slide

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

    View Slide

25. 2011 W3C released the CSS 2.1.
    

    View Slide

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

    View Slide

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

    View Slide

28. The solution?
    

    View Slide

29. CSS 3
    

    View Slide

30. Much more than
    animations,
    flexbox,
    borders,
    etc…
    

    View Slide

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
    

    View Slide

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

    View Slide

33. What happens
    inside a level?
    

    View Slide

34. Working Draft
    WD
    Canditate
    Recommendation
    CR
    Proposed
    Recommendation
    PR
    Recommendation
    REC
    

    View Slide

35. My Tips and Tricks
    

    View Slide

36. Follow the
    Editors
    

    View Slide

37. Help the
    Editors
    

    View Slide

38. Study the
    Specs
    

    View Slide

39. Example!
    

    View Slide

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

    View Slide

41. View Slide

42. Dynamically adjust color
    without preprocessors
    

    View Slide

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

    View Slide

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

    View Slide

45. Browsers
    Support?
    

    View Slide

46. View Slide

47. Why?
    

    View Slide

48. Lets
    understand
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. How mix-color() work
    

    View Slide

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)
    

    View Slide

54. View Slide

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

    View Slide

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

    View Slide

57. View Slide

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

    View Slide

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

    View Slide

60. Browsers
    Support?
    

    View Slide

61. View Slide

62. View Slide

63. And many others
    Cool functions
    

    View Slide

64. CSS Colors lv5
    Is the future
    

    View Slide

65. Polyfill?
    

    View Slide

66. The Dark Side
    of Polyfilling CSS
    https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/
    

    View Slide

67. My new side project:
    css-color-polyfill
    

    View Slide

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

    View Slide

69. Final tips!
    

    View Slide

70. https://14habits.com/
    

    View Slide

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

    View Slide

72. @afonsopacifer
    afonsopacifer.github.io
    Gracias.
    

    View Slide