Category: 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.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

: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:1emauto;

}

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.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

: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

XHTML

1

2

3

4

5

6

<div class="one">

<div class="two">

<div class="three"></div>

<div class="four"></div>

</div>

</div>

CSS

1

2

3

4

5

6

7

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

CSS

1

2

3

4

5

6

7

8

9

10

11

.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 */

6. Nesting

7. Combine with calc() function

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

CSS

1

2

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

CSS

1

2

3

4

5

6

7

8

//getvariablefrominlinestyle

element.style.getPropertyValue("--my-var");

//getvariablefromwherever

getComputedStyle(element).getPropertyValue("--my-var");

//setvariableoninlinestyle

element.style.setProperty("--my-var",jsVar+4);

9. Case sensitive

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

CSS

1

2

3

4

: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.

CSS

1

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

The Result

Styled Radio buttons and Checkboxes, achieved with CSS Only (no images), using the :checked pseudo-class selector and + sibling – cool huh?

Basically…

Radio buttons and Checkboxes, are indispensable in web design, but until recently, have been very difficult to style. The CSS3 method described above, which is applicable to both Radio buttons and Checkboxes allows us to style them by using the :checked pseudo selector and + sibling selector.

Background

Accordions are graphical control elements, which comprise a vertically (or horizonally) stacked list of items, such as labels, headings or thumbnails. Each item can be “expanded” or “stretched” to reveal the content associated with that item.

They are common today on websites and, not only add a cool factor, but also allows us to get a lot of content into small spaces.

This was previously only achieved using Javascript or jQuery, but with advancements (CSS3), it is now possible using only CSS.

Let’s Do this

We will be using a hidden radio button group, the :checked pseudo-class and appropriate HTML and CSS to create the accordion.

The logic: When the user selects an accordion tab (heading), they basically check the radio button that belongs to that tab. When they click on the next tab in the accordion, they select the next radio button, etc. With CSS rules we then control opening and closing of the tab to show and hide its content area.

Using the radio button method ensures only one section is opened at a time.

The HTML

The HTML is simply an unordered list. Each list item represents a single tab and contains a radio input, a pair of empty <i> tags as placeholder to add visual indicators, a H2 title tag as the heading and the tab content.

The CSS

Standard SCSS is used here and a few variables as well as responsive styles are defined. The radio button is hidden using opacity: 0; rule, the H2 holds the title of each tab, and the <i> tag is absolutely positioned and styled to add the visual (up/down arrow) indicators to each tab.

Combining the radio input’s :checked pseudo selector with the element ~ element general sibling selector, the tab content’s z-index, height and other properties are manipulated to open and close each accordion tab, hence displaying and hiding content.

The Result

A responsive HTML + CSS only Accordion Element, using the Radio Button method.

Basically…

Accordions are useful when you want to toggle between hiding and showing large amount of content within a small space. The method described above allow us to achieve this using HTML + CSS only with the radio button method.