Download as PDF, PPTX
![CSS VERSIONING
WHAT IS CSS3?
Everything after [7 June 2011]CSS 2.1
CSS4 EXISTS?
No, it's time to talk about modules](https://image.slidesharecdn.com/cssvariables-160125201918/85/One-step-in-the-future-CSS-variables-8-320.jpg)
More Related Content
Similar to One step in the future: CSS variables
![谷歌留痕技术教程[ 𝙩𝙤𝙥 𝟮𝟯𝟯. 𝙘 𝙤𝙢 ]](https://cdn.slidesharecdn.com/ss_thumbnails/top233-260130173900-2eb784f9-thumbnail.jpg?width=640&height=640&fit=bounds)
One step in the future: CSS variables
- 1. ONE STEP INTHE FUTURE: CSS VARIABLES 25 MARCH 2016
- 2. GIACOMO "GIKO" ZINETTI NERDFRONTEND WEB DEVELOPER @GIACOMOZINETTI
- 3.
- 4. CSS CUSTOM PROPERTIES FORCASCADING VARIABLES MODULE LEVEL 1
- 5.
- 6. PROPERTIES Thanks to forthe imageStyleStats
- 7. CASCADING The assigns aweight to each style rule. When several rules apply, the one with the greatest weight takes precedence. CSS cascade
- 8. CSS VERSIONING WHAT ISCSS3? Everything after [7 June 2011]CSS 2.1 CSS4 EXISTS? No, it's time to talk about modules
- 9. CSS CUSTOM PROPERTIES FORCASCADING VARIABLES MODULE LEVEL 1
- 10. CUSTOM PROPERTIES Possibility tode ne new properties with the -- pre x --custom-property: value; They are case sensitive!
- 11. CASCADING VARIABLES A newprimitive value type property: var(--custom-property); And you can set a default var(--custom-property, default-value)
- 12.
- 13. .box { background-color: white; } .button{ color: black; } .theme .box { background-color: blue; } .theme .button { color: yellow; } THEMING TODAY
- 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. .theme { --color-bg: blue; --color-button:yellow; } .box { background-color: var(--color-bg, white); } .button { color: var(--color-button, black); } THEMING TOMORROW
- 16. body.class { font-size: 14px; } @media(min-width: 960px) { body { font-size: 16px; } } RESPONSIVE TODAY
- 17. body { font-size: var(--base-font,14px); } @media (min-width: 960px) { body { --base-font: 16px; } } RESPONSIVE TOMORROW
- 18. .button { color: red; } footer.button { color: white; } footer .highlight .button { color: yellow; } SPECIFICITY WARS TODAY
- 19. footer { --button-color: white; } .highlight{ --button-color: yellow; } .button { color: var(--button-color, red); } SPECIFICITY WARS TOMORROW
- 20.
- 21.
- 22.
- 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. .Box { // Defaultvalue 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. .hide@cp { // Ignoredby 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.
- 27.
- 28. .box { --color: red; background-color:var(--color); transition: all ease 500ms; } .box:hover { --color: blue; } TRANSITION AND ANIMATION
- 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. LINKS : Try thecolor 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.
- 32. THANK YOU SO LONGAND THANKS FOR ALL THE FEEDBACK! @giacomozinetti #betterweb
- 33.