CSS from the future

One step in the future: CSS Variables version ✌

Giacomo Zinetti Giko

Action plan • • • • • • •

Theory

Define --your-property: value;

How to define a property :root { --button-color: blue; --align:
left; } header { --header-height: 300px; }

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

How to use a variable button { background-color: var(--button-color); }
a { color: var(--link-color, black); }

Quiz time: Inherited or not?

VS Preprocessors

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

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

<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

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

{ --gutter: 15px; } } article { padding: var(--gutter); } Media queries compiled $gutter: 10px; @media (min-width: 768px) { $gutter: 15px; } article { padding: $gutter 10px; }

{ --gutter: 15px; } } article { padding: var(--gutter); } Media queries $gutter: 10px; @media (min-width: 768px) { $gutter: 15px; } article { padding: $gutter; } Preprocessors: Nope

{ --gutter: 15px; } } article { padding: var(--gutter); } Preprocessors solution $gutter: 10px; $gutter-large: 15px; @media (min-width: 768px) { article { padding: $gutter-large; } } article { padding: $gutter; }

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

But… they can be friends

Example

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

</footer> </body> Override variables, not properties section { --link: green } a { background: var(--link, red) }

</footer> </body> Make Cascade Love, not Specificity War section { --link: green } footer { --link: blue } a { background: var(--link, red) }

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>

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!

Javascript

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

Support

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

Fallback property @supports (--foo: green) { body { color: var(--my-color);
} } Feature query color: red; color: var(--my-color, red);

Good news

</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; }

</footer> </body> The superhero: currentColor body { color: red } footer { color: blue } section { color: green } a { border-color: currentColor; }

Use case: Theming

.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

.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

.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

Questions?

Grazie! @giacomozinetti

CSS from the future

CSS from the future

More Decks by FEVR

Other Decks in Technology

Featured

Transcript