CSS variables

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

Transcript

1. ONE STEP IN THE FUTURE: CSS VARIABLES 26 JANUARY 2016 FRONTEND MILANO MEETUP
2. GIACOMO "GIKO" ZINETTI NERD FRONTEND WEB DEVELOPER @GIACOMOZINETTI
3. LET'S GO
4. CSS CUSTOM PROPERTIES FOR CASCADING VARIABLES MODULE LEVEL 1
5. WAT ONE STEP BEYOND...
6. CSS NAMING Thanks to for the image StyleStats
7. CSS VERSIONING WHAT IS CSS3? Everything after [7 June 2011] CSS 2.1 CSS4 EXISTS? No, it's time to talk about modules
8. CSS CUSTOM PROPERTIES FOR CASCADING VARIABLES MODULE LEVEL 1
9. CUSTOM PROPERTIES Possibility to define new properties with the -- prefix - - c u s t o m - p r o p e r t y : v a l u e ; They are case sensitive!
10. CASCADING VARIABLES A new primitive value type p r o p e r t y : v a r ( - - c u s t o m - p r o p e r t y ) ; And you can set a default v a r ( - - c u s t o m - p r o p e r t y , d e f a u l t - v a l u e )
11. SOME EXAMPLES
12. . b o x { b a c k g r o u n d - c o l o r : w h i t e ; } . b u t t o n { c o l o r : b l a c k ; } . t h e m e . b o x { b a c k g r o u n d - c o l o r : b l u e ; } . t h e m e . b u t t o n { c o l o r : y e l l o w ; } THEMING TODAY
13. / / D e a f u l t c s s . b o x { b a c k g r o u n d - c o l o r : w h i t e ; } . b u t t o n { c o l o r : b l a c k ; } / / T h e m e f i l e . b o x { b a c k g r o u n d - c o l o r : b l u e ! i m p o r t a n t ; } . b u t t o n { c o l o r : y e l l o w ! i m p o r t a n t ; } THEMING TODAY V2
14. . t h e m e { - - c o l o r - b g : b l u e ; - - c o l o r - b u t t o n : y e l l o w ; } . b o x { b a c k g r o u n d - c o l o r : v a r ( - - c o l o r - b g , w h i t e ) ; } . b u t t o n { c o l o r : v a r ( - - c o l o r - b u t t o n , b l a c k ) ; } THEMING TOMORROW
15. b o d y . c l a s s { f o n t - s i z e : 1 4 p x ; } @ m e d i a ( m i n - w i d t h : 9 6 0 p x ) { b o d y { f o n t - s i z e : 1 6 p x ; } } RESPONSIVE TODAY
16. b o d y { f o n t - s i z e : v a r ( - - b a s e - f o n t , 1 4 p x ) ; } @ m e d i a ( m i n - w i d t h : 9 6 0 p x ) { - - b a s e - f o n t : 1 6 p x ; } RESPONSIVE TOMORROW
17. . b u t t o n { c o l o r : r e d ; } f o o t e r . b u t t o n { c o l o r : w h i t e ; } f o o t e r . h i g h l i g h t . b u t t o n { c o l o r : y e l l o w ; } CONTEXTUALIZATION TODAY
18. f o o t e r { - - b u t t o n - c o l o r : w h i t e ; } . h i g h l i g h t { - - b u t t o n - c o l o r : y e l l o w ; } . b u t t o n { c o l o r : v a r ( - - b u t t o n - c o l o r , r e d ) ; } CONTEXTUALIZATION TOMORROW
19. TODAY
20. COMPATIBILITY W3C Candidate Recommendation, 03 December 2015 Firefox >= 31 Chrome >= 49 Safari >= 9.1 Edge: Under Consideration Global support 8.08%, data from Can I Use...
21. . B o x { / / D e f a u l t v a l u e f o r a l l b r o w s e r s c o l o r : b l u e ; / / O v e r r i d e d e f a u l t w i t h v a r i a b l e f o r n e w b r o w s e r s c o l o r : v a r ( - - c o l o r - a c c e n t , b l u e ) ; } PROGRESSIVE ENHANCEMENT USE DOUBLE DECLARATION A small example on Codepen
22. . h i d e \ @ c p { / / I g n o r e d b y o l d b r o w s e r s d i s p l a y : v a r ( - - f a k e - u n s e t - c u s t o m - p r o p , n o n e ) ; } . s h o w \ @ c p { / / H i d d e n f o r a l l b r o w s e r s d i s p l a y : n o n e ; / / A n d s e t v i s i b l e j u s t f o r n e w b r o w s e r s d i s p l a y : v a r ( - - f a k e - u n s e t - c u s t o m - p r o p , i n i t i a l ) ; } CUSTOM PROPERTIES MEDIA QUERY
23. BONUS TRACK
24. : r o o t { - - c u s t o m - p r o p : v a l u e ; } ROOT SCOPE
25. . b o x { - - c o l o r : r e d ; b a c k g r o u n d - c o l o r : v a r ( - - c o l o r ) ; t r a n s i t i o n : a l l e a s e 5 0 0 m s ; } . b o x : h o v e r { - - c o l o r : b l u e ; } TRANSITION AND ANIMATION
26. $ b u t t o n - c o l o r : r e d ; . h e a d e r { $ b u t t o n - c o l o r : b l u e ; } . b u t t o n { c o l o r : $ b u t t o n - c o l o r ; } : r o o t { - - b u t t o n - c o l o r : r e d ; } . h e a d e r { - - b u t t o n - c o l o r : b l u e ; } . b u t t o n { c o l o r : v a r ( - - b u t t o n - c o l o r ) ; } CSS VS PREPROCESSORS Preprocessor variables don’t inherit Even CSSNext
27. LINKS : Try the color picker : tool for css statistics My on Codepen This slides: Giko.it W3C Specification Can I Use... CSS Variables StyleStats custom properties playground goo.gl/cItM4J
28. THANK YOU #webperf @giacomozinetti