Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS from the future

212 views

Published on

Slides for the presentation about CSS Variables at the FEVR Meetup on January, 26th 2017

Sorry for the broken emoji...

Published in: Software
  • Be the first to comment

CSS from the future

  1. 1. One step in the future: CSS Variables version ✌
  2. 2. Giacomo Zinetti Giko
  3. 3. Action plan ● ● ● ● ● ● ●
  4. 4. Theory
  5. 5. Define --your-property: value;
  6. 6. How to define a property :root { --button-color: blue; --align: left; } header { --header-height: 300px; }
  7. 7. Use var(--your-property, default-value)
  8. 8. How to use a variable button { background-color: var(--button-color); } a { color: var(--link-color, black); }
  9. 9. Quiz time: Inherited or not?
  10. 10. Quiz time: Inherited or not?
  11. 11. VS Preprocessors
  12. 12. <body> <a>Link 1</a> <footer> <a>Link 2</a> </footer> </body> Inheritance :root { --link: red } footer { --link: blue } a { color: var(--link) } <body> <a>Link 1</a> <footer> <a>Link 2</a> </footer> </body> $link: red footer { $link: blue } a { color: $link }
  13. 13. <body> <a>Link 1</a> <footer> <a>Link 2</a> </footer> </body> Inheritance compiled :root { --link: red } footer { --link: blue } a { color: var(--link) } <body> <a>Link 1</a> <footer> <a>Link 2</a> </footer> </body> $link: red footer { $link: blue } a { color: $link red }
  14. 14. <body> <a>Link 1</a> <footer> <a>Link 2</a> </footer> </body> Inheritance :root { --link: red } footer { --link: blue } a { color: var(--link) } <body> <a>Link 1</a> <footer> <a>Link 2</a> </footer> </body> $link: red footer { $link: blue } a { color: $link } Preprocessors: Nope
  15. 15. :root { --gutter: 10px; } @media (min-width: 768px) { :root { --gutter: 15px; } } article { padding: var(--gutter); } Media queries $gutter: 10px; @media (min-width: 768px) { $gutter: 15px; } article { padding: $gutter; }
  16. 16. :root { --gutter: 10px; } @media (min-width: 768px) { :root { --gutter: 15px; } } article { padding: var(--gutter); } Media queries compiled $gutter: 10px; @media (min-width: 768px) { $gutter: 15px; } article { padding: $gutter 10px; }
  17. 17. :root { --gutter: 10px; } @media (min-width: 768px) { :root { --gutter: 15px; } } article { padding: var(--gutter); } Media queries $gutter: 10px; @media (min-width: 768px) { $gutter: 15px; } article { padding: $gutter; } Preprocessors: Nope
  18. 18. :root { --gutter: 10px; } @media (min-width: 768px) { :root { --gutter: 15px; } } article { padding: var(--gutter); } Preprocessors solution $gutter: 10px; $gutter-large: 15px; @media (min-width: 768px) { article { padding: $gutter-large; } } article { padding: $gutter; }
  19. 19. But… :root { --gutter: 10px; } @media (min-width: 768px) { :root { --gutter: 15px; } } article.class { padding: var(--gutter); } $gutter: 10px; $gutter-large: 15px; @media (min-width: 768px) { article { padding: $gutter-large; } } article.class { padding: $gutter; }
  20. 20. But… they can be friends
  21. 21. Example
  22. 22. <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body> Base rule a { background: var(--link, red) }
  23. 23. <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body> Override variables, not properties section { --link: green } a { background: var(--link, red) }
  24. 24. <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body> Make Cascade Love, not Specificity War section { --link: green } footer { --link: blue } a { background: var(--link, red) }
  25. 25. Old school... section { --link: green } footer { --link: blue } a { background: var(--link, red) } footer section a { background: green } footer a { background: blue } a { background: red } <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body>
  26. 26. Old school... section { --link: green } footer { --link: blue } a { background: var(--link, red) } -------------- footer section a { background: green } footer a { background: blue } a { background: red } <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body> The end of specificity war!
  27. 27. Javascript
  28. 28. Read getComputedStyle(element).getPropertyValue('--color'); element.style.setProperty('--color', 'red'); Write
  29. 29. Support
  30. 30. Browsers 49+ 31+ 15? 36+ 9.1+ Jan 2017: 68.34%
  31. 31. Fallback property @supports (--foo: green) { body { color: var(--my-color); } } Feature query color: red; color: var(--my-color, red);
  32. 32. Good news
  33. 33. <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body> We already use CSS variables body { font-size: 18px } footer { font-size: 16px } section { font-size: 14px } a { border-width: 0.2em; padding-right: 2em; }
  34. 34. <body> <a>Link 1</a> <footer> <a>Link 2</a> <section> <a>Link 3</a> </section> </footer> </body> The superhero: currentColor body { color: red } footer { color: blue } section { color: green } a { border-color: currentColor; }
  35. 35. Use case: Theming
  36. 36. .theme(@bg: gray, @col: red, @var: blue) { .box { background: @bg } .button { color: @col } .box .button { color: @var } } .theme(); .dark { .theme(black, orange, lightgreen); } Theming with LESS
  37. 37. .box { background: gray } .button { color: red } .box .button { color: blue } .dark .box { background: black } .dark .button { color: orange } .dark .box .button { color: lightgreen } Theming with CSS
  38. 38. .box { --col: var(--alt, blue); background: var(--bg, lightgray); } .button { color: var(--col, red); } .dark { --bg: black; --col: orange; --alt: lightgreen; } Theming with CSS Variables
  39. 39. Questions?
  40. 40. Grazie! @giacomozinetti

×