Tag: tutorials

CSS Variables! They’re finally available and supported in all browsers – Yeay! 🎉… Well almost all. According to Caniuse, they’re currently available on all major browsers except IE as well as on all mobile browsers except Opera Mini.

What are CSS Variables?

CSS Variables allow the use of, well… variables in CSS without need for pre-processors. As developers, we know that as web projects grow bigger, it becomes more difficult to maintain large and often times messy CSS. Variables also gives us the ability to reuse and easily edit repeatedly occurring CSS properties. Although that has been achievable, to an extent, with Sass, Less and other extensions, they have been pre-processors, which require compiling before use. Variables, however, can be used right away in your browser.

Setting and Using CSS Variables

Like variables in Javascript, they are defined to contain specific values, which can be reused throughout a document. They are set using custom property notation (e.g. --color-black: #000;) and are accessed using the var() function (e.g. color: var(--color-black);) – simple.

Why are CSS Variables useful?

CSS Variables are potentially very useful; presenting opportunities to make our CSS more efficient as well as maintainable and in this post, I outline some of the reasons why you should explore and consider using them.

1. Change dynamically

Variables are dynamic. They can change at runtime, allowing for scoping to elements and overriding as required. On changing a variable, the lowermost definition in the stylesheet overwrites the ones above it; following standard cascade rules.

:root {
    --font-heading: 24px; 
    --font-main: 16px; 
}

.title { 
    font-size: var(--font-heading); 
} 

.content { 
    font-size: var(--font-main); 
}

.blue-container {
    --font-heading: 18px;
    --font-main: 14px;
}

.green-container {
    --font-heading: 30px;
    --font-main: 18px;
}

 

2. Easily readable property names

Variables can be saved with semantic/human readable name, which can be self-descriptive and easy to remember. For example: --color-grey is easier to understand than rgba(220, 231, 235, 1);

:root {
  --color-grey: rgba(220, 231, 235, 1);
  --font-heading: 'Source Sans Pro', sans-serif;
  --size-big: 2em;
  --weight-bold: 700;
}

h1 {
  font-size: var(--size-big);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--color-grey);
  margin: 1em auto;
}

 

3. Reduces repetition

Variable, once defined, can be used repeatedly. For example, for a colour that might be used in hundreds of different places, CSS variables allow the value to be stored in one place, then referenced in multiple other places. If the colour needs to be updated, the change is made in only one place, rather that searching and replacing the hundreds of different places.

:root {
  --main-bg-color: brown; /* set here */
}

.one {
  color: white;
  background-color: var(--main-bg-color); /* use here... */
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: var(--main-bg-color); /* ...and here */
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}

 

4. Follow the inheritance rule

Variables are subject to the cascade, and inherit their value from their parent. For example: for the class="four" element, 10px is inherited from its parent

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

 

5. Custom property fallback values

Mutiple fallback values can be defined, which will be used when the given variable is not yet defined.

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /* pink if my-var and --my-background are not defined */
}

.four {
  background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}

 

6. Nesting

It is possible to nest custom properties

--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);

 

7. Combine with calc() function

Variables can be combined with another recent addition to CSS – the calc() function.

--container-width: 1000px;
max-width: calc(var(--container-width) / 2);

 

8. Use in JavaScript

Variable values (of custom properties) can be used in Javascript, just like standard properties; presenting great potential.

// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);

 

9. Case sensitive

Variables (custom properties) are case sensitive, so --header-color and --Header-Color are different

:root {
    --header-color: rgba(48, 69, 92, 1);  /* blackish */
    --Header-Color: rgba(34, 190, 198, 1); /* bluish */
}

 

10. Allow for complex calculations

Allows for complex calculations; again, presenting great potential.

--foo: if(x > 5) this.width = 10;

 

BONUS* – CSS Variable Demo

A quick demo to display use of CSS Variables in action. This allows the use of variables in CSS without need for pre-processors. It is currently available on all major browser except IE and all mobile browsers except Opera Mini.