Project 4: Generating JavaScript-free dynamic elements 관련

How to use CSS variables like a pro

---

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

---

How to use CSS variables like a pro

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

Imagine that you need to create a colorful native checkbox list with multiple accent colors. Using different values for accent-color via the inline style attribute is undoubtedly time-consuming since you have to define colors yourself. Hence, you may create this checkbox list dynamically with JavaScript.

However, what if this list gets rendered in a JavaScript-disabled environment, like inside a Markdown document? We can use CSS variables to generate JavaScript-free dynamic elements.

Let’s create a colorful native checkbox list with CSS variables. Create a new HTML document and add the following style tag:

input[type="checkbox"] {
  width: 80px;
  height: 80px;
  --hue: calc(var(--i) * 50 + 100);
  accent-color: hsl(var(--hue), 50%, 50%);
}

Here, we calculate a dynamic color for the accent-color property using the hsl color function.

For the hue input parameter, we use the --hue variable which gets a dynamically calculated value using the --i variable. This implementation lets us generate multiple colors by using different numbers for --i.

Use the following HTML snippet to get multiple colorful native checkboxes:

<div style="text-align: center">
  <input type="checkbox" checked style="--i: 0"/>
  <input type="checkbox" checked style="--i: 1"/>
  <input type="checkbox" checked style="--i: 2"/>
  <input type="checkbox" checked style="--i: 3"/>
</div>

Here we set an index manually for the --i variable via inline style attributes to generate a dynamic accent color. This approach is more productive than setting colors yourself for each checkbox element. Look at the following preview of the fourth project:

Colorful Checkbox Styles Using Css Variables

You can browse the complete source code and see a live preview from this CodePen (shalithasuranga). It’s possible to use the same strategy to generate JavaScript-free dynamic elements by adjusting any standard CSS property value, i.e., using --i to set dynamic image filter configurations.

See the Pen Project #4: Dynamic elements with CSS variables by shalithasuranga on CodePen.