Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

One step in the future: CSS variables

1.206 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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.  

×