EckherInsightsContact
Eckher
Your guide to what's next.
Eckher
Home › Eckher Insights › CSS variables
Mar 18, 2020

CSS variables

Using CSS variables.

CSS variables, also known as CSS custom properties, are assigned reusable values such as colors, widths, font families, z-indices, and so on. The notation is as follows:

.article-section {
    --main-font-color: #303030;
}

    .article-section .article-heading {
    color: var(--main-font-color);
}

    .article-section .article-comments {
    background-color: var(--main-font-color);
}

Variable names always have to begin with --, and are referenced by var(--my-custom-property). The var() function can also be passed multiple fallback values. For example,

.btn {
    color: var(--main-font-color, #212121);
}

means that the color property is assigned #212121 if --main-font-color is not defined.

Manipulating CSS variables from JavaScript

The CSS Object Model (CSSOM) defines APIs for programmatically manipulating CSS property values. Custom property values can be accessed and modified in the same way as standard CSS properties.

Cover
See also
Scroll chaining, overscroll glow, and rubberbanding explained
An overview of the scroll-related behaviors and ways to control them using the overscroll-behavior CSS property.
Line breaks in CSS
How to tune the browser's text wrapping algorithms?
Flow-relative padding and margin
Why is padding-inline-start better than padding-left?
Cypress
What is Cypress?
Preloading on hover
Preloading the destination page when the user hovers over a link.
Generating data URLs in JavaScript
How to generate data URLs in JavaScript?
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.