Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Welcome CSS LV5

Welcome CSS LV5

Afonso Pacifer

August 29, 2020
Tweet

More Decks by Afonso Pacifer

Other Decks in Programming

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