css var()
css var()
1. Overview
CSS is Cascading Style Sheets CSS, short for CSS Sheets, is a language used to describe web page styles. In CSS, the display of elements is defined through a series of selectors and properties. CSS variables (Custom Properties) are a new feature in CSS3 that introduces a completely new way to define and use variables.
CSS variables are defined within CSS style rules and can be reused across the entire page or for specific elements. Variables can be used to store style values such as color, size, and font, and can be dynamically adjusted within CSS style rules.
2. Defining CSS Variables
CSS variables are defined using the -- prefix. The syntax for defining a variable is:
--variable-name: value;
Where --variable-name is the variable name, which can consist of letters, numbers, dashes, and underscores, but cannot begin with a number. value is the variable’s value, which can be any valid CSS stylesheet value.
The following example defines a variable named primary-color with a value of blue:
:root {
--primary-color: blue;
}
In the above example, the :root selector represents the root element, allowing this variable to be applied to the entire page.
3. Using CSS Variables
When using CSS variables, you need to use the var() function to introduce the variable into a specific style.
selector {
property: var(--variable-name);
}
Where selector is the element selector, property is the style attribute, and --variable-name is the CSS variable to use.
Here’s an example of applying the primary-color variable defined above to the color property:
h1 {
color: var(--primary-color);
}
In the above example, the text color of the h1 element will be changed to blue.
4. Scope of CSS Variables
CSS variables can be defined and used in different scopes.
4.1 Global Scope
Variables defined in the global scope are available throughout the page. In the previous example, the variable was defined in the global scope using the :root selector.
4.2 Local Scope
Variables defined in the local scope are available only within the scope of a specific element or selector.
The following example defines a local variable named background-color with a value of gray and uses it within the scope of the .container selector:
.container {
--background-color: gray;
background-color: var(--background-color);
}
In the above example, the background color of the .container element will be changed to gray.
5. Modifying CSS Variable Values
Once a CSS variable is defined, its value can be modified dynamically.
5.1 Modifying Variable Values Using JavaScript
You can directly modify the value of a CSS variable using JavaScript.
document.documentElement.style.setProperty('--variable-name', 'new-value');
Where --variable-name is the CSS variable to be modified, and new-value is the new variable value.
5.2 Using @media Queries to Modify Variable Values
CSS variables can also use different values based on different viewport sizes, which is very useful in responsive layouts.
@media (max-width: 768px) {
:root {
--primary-color: red;
}
}
In the above example, when the viewport width is less than or equal to 768px, the value of the primary-color variable is changed to red.
6. Advantages of CSS Variables
CSS variables have the following advantages:
- Reusability: Define a variable once and reuse it across the entire page or within a specific scope, reducing code redundancy.
- Dynamic Adjustment: Modifying variable values allows for dynamic style adjustments, improving user experience.
- Responsive Layout: Using CSS variables, you can set different style values based on different viewport sizes, achieving responsive layouts.
7. Browser Support
CSS variables are widely supported in modern browsers, including Chrome, Firefox, Safari, and Edge. Regarding compatibility, older versions of Internet Explorer do not support CSS variables, but this can be mitigated using JavaScript.
8. Sample Code Results
<!DOCTYPE html>
html>
<head>
<style>
:root {
--primary-color: blue;
}
h1 {
color: var(--primary-color);
}
.container {
--background-color: gray;
background-color: var(--background-color);
}
</style>
</head>
<body>
<h1>Hello, CSS variables!</h1>
<div class="container">
<p>This is a container with a gray background.</p>
</div>
<script>
//Modify the value of CSS variables document.documentElement.style.setProperty('--primary-color', 'green');
document.documentElement.style.setProperty('--background-color', 'yellow');
</script>
</body>
</html>
In the above example, when the page loads, the title color is blue and the container background color is gray. By dynamically modifying the values of CSS variables using JavaScript, the title color changes to green and the container background color changes to yellow.
9. Summary
This article details the definition and usage of CSS variables, as well as their scope, modification methods, advantages, and browser support. By effectively utilizing CSS variables, we can better organize and manage web page styles, achieving more flexible and intelligent interface effects.