Save 37% off PRO during our Black Friday Sale! »

Welcome CSS LV5

Welcome CSS LV5

Aeaef3a76e032bec6e802459fc3e8d6f?s=128

Afonso Pacifer

August 29, 2020
Tweet

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.