CSS from the future

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
February 23, 2017
Technology
0
260

CSS from the future

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

February 23, 2017
Tweet

More Decks by FEVR

See All by FEVR
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
1
350
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
0
320
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
1
300
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
0
350
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
1
330
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
0
410
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
0
330
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
1
510
210a2116d2266c84d155f1d8a14f31ef?s=48 fevr
0
360

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
150
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
190
932329c79bc511fdfed22abbd5ec92d2?s=48 rnakamuramartiny
0
180
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
180
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
160
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
8a9897be8e52ae54f8f4b57e0b868829?s=48 kmacedovarela
0
250
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
100
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
2.7k
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
0
200

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
370k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
56
6.2k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
176
14k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
326
15k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.8k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.3k

Transcript

  1. One step in the future: CSS Variables version ✌

  2. None

  3. Giacomo Zinetti Giko

  4. Action plan • • • • • • •

  5. Theory

  6. Define --your-property: value;

  7. How to define a property :root { --button-color: blue; --align:

    left; } header { --header-height: 300px; }

  8. Use var(--your-property, default-value)

  9. How to use a variable button { background-color: var(--button-color); }

    a { color: var(--link-color, black); }

  10. Quiz time: Inherited or not?

  11. Quiz time: Inherited or not?

  12. VS Preprocessors

  13. <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 }

  14. <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 }

  15. <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

  16. :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; }

  17. :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; }

  18. :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

  19. :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; }

  20. 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; }

  21. But… they can be friends

  22. Example

  23. <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) }

  24. <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) }

  25. <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) }

  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>

  27. 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!

  28. Javascript

  29. Read getComputedStyle(element).getPropertyValue('--color'); element.style.setProperty('--color', 'red'); Write

  30. Support

  31. Browsers 49+ 31+ 15? 36+ 9.1+ Jan 2017: 68.34%

  32. Fallback property @supports (--foo: green) { body { color: var(--my-color);

    } } Feature query color: red; color: var(--my-color, red);

  33. Good news

  34. <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; }

  35. <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; }

  36. Use case: Theming

  37. .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

  38. .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

  39. .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

  40. Questions?

  41. Grazie! @giacomozinetti