ONE STEP IN THE FUTURE:CSS VARIABLES

25 MARCH 2016

GIACOMO "GIKO" ZINETTI

NERD FRONTEND WEB DEVELOPER

@GIACOMOZINETTI

LET'S GO

CSS CUSTOM PROPERTIESFOR CASCADING VARIABLES

MODULE LEVEL 1

WAT

ONE STEP BEYOND...

PROPERTIES

Thanks to for the imageStyleStats

CASCADINGThe assigns a weight to each style rule. Whenseveral rules apply, the one with the greatest weight takes

precedence.

CSS cascade

CSS VERSIONINGWHAT IS CSS3?

Everything after [7 June 2011]CSS 2.1

CSS4 EXISTS?No, it's time to talk about modules

CSS CUSTOM PROPERTIESFOR CASCADING VARIABLES

MODULE LEVEL 1

CUSTOM PROPERTIESPossibility to de�ne new properties with the -- pre�x

--custom-property: value;

They are case sensitive!

CASCADING VARIABLESA new primitive value type

property: var(--custom-property);

And you can set a default

var(--custom-property, default-value)

SOME EXAMPLES

.box { background-color: white; } .button { color: black; }

.theme .box { background-color: blue; } .theme .button { color: yellow; }

THEMING TODAY

// Deafult css .box { background-color: white; } .button { color: black; }

// Theme file .box { background-color: blue !important; } .button { color: yellow !important; }

THEMING TODAY V2

.theme { --color-bg: blue; --color-button: yellow; }

.box { background-color: var(--color-bg, white); }

.button { color: var(--color-button, black); }

THEMING TOMORROW

body.class { font-size: 14px; }

@media (min-width: 960px) {

body { font-size: 16px; } }

RESPONSIVE TODAY

body { font-size: var(--base-font, 14px); }

@media (min-width: 960px) {

body { --base-font: 16px; } }

RESPONSIVE TOMORROW

.button { color: red; }

footer .button { color: white; }

footer .highlight .button { color: yellow; }

SPECIFICITY WARS TODAY

footer { --button-color: white; }

.highlight { --button-color: yellow; }

.button { color: var(--button-color, red); }

SPECIFICITY WARS TOMORROW

 

TODAY

 

COMPATIBILITYW3C Candidate Recommendation, 03 December 2015

Firefox >= 31Chrome >= 49Safari >= 9.1Edge: Under Consideration

Global support 26.01%, data from Can I Use...

.Box { // Default value for all browsers color: blue;

// Override default with variable for new browsers color: var(--color-accent, blue) !important; }

PROGRESSIVE ENHANCEMENTUSE DOUBLE DECLARATION

A small example on Codepen

.hide\@cp { // Ignored by 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

BONUS TRACK

:root { --custom-prop: value; }

ROOT SCOPE

.box { --color: red; background-color: var(--color); transition: all ease 500ms; }

.box:hover { --color: blue; }

TRANSITION AND ANIMATION

$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 PREPROCESSORSPreprocessor variables don’t inherit

Even CSSNext

LINKS: Try the color picker

My on Codepen: tool for css statistics

This slides:

W3C Speci�cationCan I Use... CSS VariablesGiko.it

custom properties playgroundStyleStats

goo.gl/cItM4J

QUESTIONS?

THANK YOUSO LONG AND THANKS FOR ALL THE FEEDBACK!

@giacomozinetti

#betterweb