ABWD.net

CSS variables, how to use them?

CSS variables, also known as CSS custom properties, are a powerful feature in CSS that allow you to define reusable values, such as colors, fonts, spacing, and more, and then use them throughout your stylesheets. They provide a convenient way to centralize and manage your design system's properties, making it easier to maintain and update your styles.

Here's how to use CSS variables and a brief overview of browser support:

Using CSS Variables:

1. Defining a CSS Variable:

To define a CSS variable, use the -- prefix followed by a name. For example:

:root{
	--font-size-1:1em;
 	--color-1:#000;
}

Here, --font-size-1 and --color-1 are a variable set within the :root pseudo-class, making it available globally.

2. Using a CSS Variable:

To use a CSS variable, use the var() function, passing the variable name as an argument:

.article{
	font-size:var(--font-size-1);
 	color:var(--color-1);
}

In this example, the font-size and color property of article class set using the --font-size-1 and --color-1 variables.

3. Changing the Value Dynamically:

You can change the value of a CSS variable dynamically using JavaScript:

document.documentElement.style.setProperty('--font-size-1', '12px');
document.documentElement.style.setProperty('--color-1', '#fff');

This JavaScript code updates the value of --font-size-1 to 12px and --color-1 to #fff.

Browser Support:

CSS variables, also known as CSS custom properties, have good support in modern browsers, here's a general overview of browser support:

Supported in Most Modern Browsers:

• Chrome (since version 49)
• Firefox (since version 31)
• Safari (since version 9.1)
• Edge (since EdgeHTML 15)
• Opera (since version 36)

Internet Explorer:

Limited support in IE 11: It partially supports CSS variables but with some limitations.

Mobile Browsers:

Generally supported in modern mobile browsers like Chrome for Android and Safari for iOS.
Keep in mind that browser support may have improved since then. It's always a good practice to google the latest compatibility information to ensure compatibility with your target audience.

Overall, CSS variables are a valuable tool for creating more maintainable and flexible CSS code, and they are widely supported in modern web development.

Here's a rough timeline of their adoption:

Early 2010s: Discussions and proposals for custom properties in CSS started in the early 2010s as a way to introduce variables to CSS.

2014: CSS Custom Properties were formally proposed in the CSS Variables Editor's Draft by the W3C (World Wide Web Consortium).

2015: Major browsers started adding experimental support for CSS custom properties in developer versions, but they were not widely used in production websites.

2016: CSS custom properties gained broader support in modern browsers. Chrome, Firefox, Safari, and Edge began to support them, making them more practical for web developers. This was a significant milestone for the adoption of CSS variables.

2017 and Beyond: Support for CSS custom properties continued to improve in terms of both stability and browser compatibility. They became a standard tool for web developers to use for creating more maintainable and flexible stylesheets.

It's important to note that while support for CSS variables was added to modern browsers in 2016, older browsers, especially Internet Explorer (well, of course), did not support them until later versions and with some limitations. This is why web developers often used fallbacks or polyfills for older browser compatibility.

Like below example:

.article{
	font-size:1em;
 	font-size:var(--font-size-1);
 	color:#000;
 	color:var(--color-1);
}

CSS custom properties are considered well-supported in modern browsers, and they have become a fundamental part of modern web development.