CSS Custom Properties (Variables)

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Introduction

CSS Variables allow authors to create reusable values which can be used throughout a CSS document.

For example, it's common in CSS to reuse a single color throughout a document. Prior to CSS Variables this would mean reusing the same color value many times throughout a document. With CSS Variables the color value can be assigned to a variable and referenced in multiple places. This makes changing values easier and is more semantic than using traditional CSS values.

Syntax

  • :root {} /* pseudo-class that allows for more global definition of variables */
  • --variable-name: value; /* define variable */
  • var(--variable-name, default-value) /* use defined variable with default value fallback */

Remarks

CSS Variables are currently considered an experimental technology.


BROWSER SUPPORT / COMPATIBILITY

Firefox: Version 31+ (Enabled by default)

More info from Mozilla

Chrome: Version 49+ (Enabled by default).

"This feature can be enabled in Chrome Version 48 for testing by enabling the experimental Web Platform feature. Enter chrome://flags/ in your Chrome address bar to access this setting."

IE: Not Supported.

Edge: Under Development

Safari: Version 9.1+



Got any CSS Question?