Home

Passing Custom Variables/Props to CSS from HTML without JavaScript

November 2025

I've been thinking a lot about Progressive Enhancementpe. One part of that is passing variables to CSS without using JavaScript. I wanted to do something like:

<div class="widget[COLOR: red]">
  the quick brown fox
</div>

<style>
  .widget {
    color: COLOR;
  }
</style>

That doesn't work, but this does:

HTML

<div class="widget" style="--color: red">
  the quick brown fox
</div>

<style>
  .widget {
    color: var(--color);
  }
</style>

Output

the quick brown fox

Exactly what I needed. Thanks goes to Ben for showing me how it's done.

-a

end of line

Footnotes

pe ⤴

Basically, your page should still have all the important content and be readable even if the JavaScript and CSS fail to load.

I'm working on a tool to make it easier to make web pages. It's called bitty. It's designed from the start with Progressive Enhancement in mind.