Dev Channel
Published in

Dev Channel

CSS Variables — No, really!

Introduction

Eek, that’s a lot of red
Ahh, much better

Variables Refresher

But Are They Variables or Properties?

The Problem

body { margin: 50px; padding: 20px; border: 5px solid darkcyan;
font-family: tahoma, verdana; text-align: center; }
.legend { color: darkcyan; font-weight: bold; }
a { outline: none; color: Darkcyan; text-decoration: none; }
fieldset { border: 1px solid darkcyan; height: 300px; }

Syntax

Declaration

Retrieval

So… that’s it?

:root {
--bgcolour: #ffffd0;
--bqindents: 40px;
--warningtextsize: 125%;
}
table {
background-color: var(--bgcolour);
}
blockquote {
margin-left: var(--bqindents);
margin-right: var(--bqindents);
}
p.warning {
color: red;
background-color: var(--bgcolour);
font-size: var(--warningtextsize);
}
  1. Declare
  2. Retrieve
  3. Enjoy

PAQs

:root { --my-value: 20; }
. . .
blockquote { margin-left: var(--my-value)px; }
:root { --my-property: font-size; }
. . .
p { var(--my-property): 24px; }
:root { --mybasecolor: red; }
. . .
p.wow { --myparacolor: var(--mybasecolor); }

What’s the Deal with Colors?

Consistent Highlight Colors

:root { --hilitecolor: #ffffe0; } /* pastel yellow */
. . .
tbody tr:nth-child(odd) {
background-color: var(--hilitecolor); }
span.hilite { background-color: var(--hilitecolor); }
blockquote { font-family: times; font-weight: bold;
font-size: 90%; margin-left: 75px; margin-right: 75px;
background-color: var(--hilitecolor); padding: 10px;
border: 1px solid black; border-radius: 15px; }
input:focus { background-color: var(--hilitecolor); }

Zebra Tables

:root { --zebraevencolor: lightgreen;
--zebraoddcolor: lightblue; }
. . .
tbody tr:nth-child(even) {
background-color: var(--zebraevencolor); }
tbody tr:nth-child(odd) {
background-color: var(--zebraoddcolor); }

Swapping Link Colors on Hover

:root { --linkfg: #000080; 
--linkbg: #ffffff; }
. . .
a:link {color:var(--linkfg); background-color:var(--linkbg);}
a:visited {color:var(--linkfg); background-color:var(--linkbg);}
a:hover {color:var(--linkbg); background-color:var(--linkfg);}
a:active {color:var(--linkbg); background-color:var(--linkfg);}

Multi-part Values

:root { --stdshadow: 3px 3px 5px #A0A0A0; }
. . .
h1 { text-shadow: var(--stdshadow); }
p.shadow { text-shadow: var(--stdshadow); }
img.boxed { box-shadow: var(--stdshadow); }

Themes (AKA Keeping Marketing Happy)

/* Variable set 1 — test theme (currently in use) */:root {
--transition-type: padding-left 250ms ease-out;
--transition-padding: 20px;
--transition-font-size: 100%;
--navbar-bgcolor: lightgray;
--navbar-h2-color: brown;
--navbar-h2-border: thin brown solid;
--navbar-font-size: 12px;
--font-stack: Cambria, Georgia, "Times New Roman", serif;
--font-size: 16px;
--font-color: darkblue;
--max-width: 1000px;
--header-fontvariant: normal;
--header-color: white;
--header-bg: teal;
--header-shadow: 2px 3px 4px red;
--header-curve: 20px;
--header-border: thin darkblue solid;
--teaser-color: yellow;
--byline-color: white;
--h3-color: teal;
--h3-fontvariant: small-caps;
--dropcap-size: 200%;
--dropcap-font: Times;
--pullquote-border: thick black solid;
--pullquote-start: url(quotestart.png);
--pullquote-end: url(quoteend.png);
--zebraoddcolor: white;
--zebraevencolor: lightyellow;
--linkfg: darkblue;
--linkbg: white;
}
/* Variable set 2 -- fallback theme (currently commented out):root {
--transition-type: font-size 250ms ease-out;
--transition-padding: 0px;
--transition-font-size: 200%;
--navbar-bgcolor: lightblue;
--navbar-h2-color: darkgreen;
--navbar-h2-border: thin darkgreen dashed;
--navbar-font-size: 14px;
--font-stack: Verdana, Arial, sans;
--font-size: 18px;
--font-color: darkgreen;
--max-width: 1500px;
--header-fontvariant: small-caps;
--header-color: black;
--header-bg: lightyellow;
--header-shadow: 2px 3px 4px orange;
--header-curve: 100px;
--header-border: thick red solid;
--teaser-color: red;
--byline-color: orange;
--h3-color: darkred;
--h3-fontvariant: normal;
--dropcap-size: 400%;
--dropcap-font: Courier;
--pullquote-border: thick #ff6a00 dotted;
--pullquote-start: url(orangequotestart.png);
--pullquote-end: url(orangequoteend.png);
--zebraoddcolor: yellow;
--zebraevencolor: lightgray;
--linkfg: red;
--linkbg: white;
}
*/

Just One More Thing

:root { --custom-width: 80%;
--myTextColour: darkblue; }
. . .
div.special { width: var(--custom-width, 80%);
color: var(--mytextcolour, red); }

Advanced Stuff

Scope

<section class="thisweek">
<article>
. . .
</article>
<article>
. . .
</article>
<article>
. . .
</article>
</section>
<section class="lastweek">
<article>
. . .
</article>
<article>
. . .
</article>
<article>
. . .
</article>
</section>
<section class="oldstuff">
<article>
. . .
</article>
<article>
. . .
</article>
<article>
. . .
</article>
</section>
section.thisweek {
--h1-color: red;
--h1-size: 110%;
}
section.lastweek {
--h1-color: green;
--h1-size: 100%;
}
section.oldstuff {
--h1-color: blue;
--h1-size: 90%;
}
article h1 {
color: var(--h1-color);
font-size: var(--h1-size);
}

Calculations

:root {
--bq-resize-by: 1.5;
--warning-resize-by: 2.0;
}
. . .
blockquote {
font-size: calc(var(--bq-resize-by) * 1em);
}
.warning {
font-size: calc(var(--warning-resize-by) * 1em);
}

JavaScript

var allstyles = getComputedStyle(document.documentElement);
var varval = string(allstyles.getPropertyValue("--my-bg-colour"));
var varval = varval.trim();
document.documentElement.style.setProperty("--my-bg-colour", "#008080");
document.documentElement.style.setProperty("--my-bg-colour", "var(--my-fg-colour)");

Takeaways

Resources

Thanks!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Gash

Dave is a retired technical publications specialist and has been a frequent speaker at User Assistance conferences around the world since 1998.