O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

One step in the future: CSS variables

1.205 visualizações

Publicada em

The presentation of CSS Variables for the Milano Frontend meetup of 26 January 2016

Publicada em: Software
  • Seja o primeiro a comentar

One step in the future: CSS variables

  1. 1. ONE STEP IN THE FUTURE: CSS VARIABLES 25 MARCH 2016
  2. 2. GIACOMO "GIKO" ZINETTI NERD FRONTEND WEB DEVELOPER @GIACOMOZINETTI
  3. 3. LET'S GO
  4. 4. CSS CUSTOM PROPERTIES FOR CASCADING VARIABLES MODULE LEVEL 1
  5. 5. WAT ONE STEP BEYOND...
  6. 6. PROPERTIES Thanks to for the imageStyleStats
  7. 7. CASCADING The assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. CSS cascade
  8. 8. CSS VERSIONING WHAT IS CSS3? Everything after [7 June 2011]CSS 2.1 CSS4 EXISTS? No, it's time to talk about modules
  9. 9. CSS CUSTOM PROPERTIES FOR CASCADING VARIABLES MODULE LEVEL 1
  10. 10. CUSTOM PROPERTIES Possibility to de ne new properties with the -- pre x --custom-property: value; They are case sensitive!
  11. 11. CASCADING VARIABLES A new primitive value type property: var(--custom-property); And you can set a default var(--custom-property, default-value)
  12. 12. SOME EXAMPLES
  13. 13. .box { background-color: white; } .button { color: black; } .theme .box { background-color: blue; } .theme .button { color: yellow; } THEMING TODAY
  14. 14. // Deafult css .box { background-color: white; } .button { color: black; } // Theme file .box { background-color: blue !important; } .button { color: yellow !important; } THEMING TODAY V2
  15. 15. .theme { --color-bg: blue; --color-button: yellow; } .box { background-color: var(--color-bg, white); } .button { color: var(--color-button, black); } THEMING TOMORROW
  16. 16. body.class { font-size: 14px; } @media (min-width: 960px) { body { font-size: 16px; } } RESPONSIVE TODAY
  17. 17. body { font-size: var(--base-font, 14px); } @media (min-width: 960px) { body { --base-font: 16px; } } RESPONSIVE TOMORROW
  18. 18. .button { color: red; } footer .button { color: white; } footer .highlight .button { color: yellow; } SPECIFICITY WARS TODAY
  19. 19. footer { --button-color: white; } .highlight { --button-color: yellow; } .button { color: var(--button-color, red); } SPECIFICITY WARS TOMORROW
  20. 20.  
  21. 21. TODAY
  22. 22.  
  23. 23. COMPATIBILITY W3C Candidate Recommendation, 03 December 2015 Firefox >= 31 Chrome >= 49 Safari >= 9.1 Edge: Under Consideration Global support 26.01%, data from Can I Use...
  24. 24. .Box { // Default value for all browsers color: blue; // Override default with variable for new browsers color: var(--color-accent, blue) !important; } PROGRESSIVE ENHANCEMENT USE DOUBLE DECLARATION A small example on Codepen
  25. 25. .hide@cp { // Ignored by old browsers display: var(--fake-unset-custom-prop, none); } .show@cp { // Hidden for all browsers display: none; // And set visible just for new browsers display: var(--fake-unset-custom-prop, initial); } CUSTOM PROPERTIES MEDIA QUERY
  26. 26. BONUS TRACK
  27. 27. :root { --custom-prop: value; } ROOT SCOPE
  28. 28. .box { --color: red; background-color: var(--color); transition: all ease 500ms; } .box:hover { --color: blue; } TRANSITION AND ANIMATION
  29. 29. $button-color: red; .header { $button-color: blue; } .button { color: $button-color; } :root { --button-color: red; } .header { --button-color: blue; } .button { color: var(--button-color); } CSS VS PREPROCESSORS Preprocessor variables don’t inherit Even CSSNext
  30. 30. LINKS : Try the color picker My on Codepen : tool for css statistics This slides: W3C Speci cation Can I Use... CSS Variables Giko.it custom properties playground StyleStats goo.gl/cItM4J
  31. 31. QUESTIONS?
  32. 32. THANK YOU SO LONG AND THANKS FOR ALL THE FEEDBACK! @giacomozinetti #betterweb
  33. 33.  

×