Auxiliary Variables in Mixture Modeling: 3-Step Approaches ...
One step in the future: CSS variables
-
Upload
giacomo-zinetti -
Category
Software
-
view
674 -
download
1
Transcript of One step in the future: CSS variables
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...
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