A CSS Only Tabs Prototype (No JavaScript Required)

Component Kickoff

I was listening to an episode of Shop Talk Show that discussed putting native HTML elements inside web components instead of having the component insert them. For example, a fancy-checkbox component could contain a checkbox element:

<fancy-checkbox>
  <label for="checkbox-x">Show Example</label>
  <input id="checkbox-x" type="checkbox" />
</fancy-checkbox>

Or, it could be empty, pushing the responsibility for adding the checkbox element into the component itself.

<fancy-checkbox></fancy-checkbox>

Modal Pondering

The conversation got me wondering what you can do with a checkbox if there's no JavaScript running on the page. Specifically, I was wondering if you could do something like make a dark mode switcher using only HTML and CSS. The answer is, yes, you can.

Check this out:

There's no JavaScript involved. Everything happens thanks to this HTML:

<div class="mode-wrapper-x">
  <label for="mode-checkbox-x">
    Activate Dark Mode:
  </label>
  <input id="mode-checkbox-x" type="checkbox" />
</div>

and this CSS:

:root {
  --mode-wrapper-background-x: white;
  --mode-wrapper-color-x: black;
}

.mode-wrapper-x {
  background-color: var(--mode-wrapper-background-x);
  color: var(--mode-wrapper-color-x);
}

body:has(#mode-checkbox-x:checked) {
  --mode-wrapper-background-x: black;
  --mode-wrapper-color-x: white;
}

The magic is the :has() pseudo-class on the body element on line 11. It watches the #mode-checkbox-x element to see if it's check. When it is, it overrides the default property variables to do the switch.

Tab Coded

Of course, the dark mode switcher doesn't set anything on the browser to maintain the mode between pages. You would need JavaScript for that.

However, there are other things that don't require keeping track of state across pages. Tabs come to mind. For example:

Again, no JavaScript. Just this HTML:

<div>
  <input id="tab1" type="radio" name="tabSwtich" checked />
  <label for="tab1" >Tab 1</label>

  <input id="tab2" type="radio" name="tabSwtich" />
  <label for="tab2">Tab 2</label>

  <input id="tab3" type="radio" name="tabSwtich" />
  <label for="tab3">Tab 3</label>
</div>

<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<div id="content3">Content 3</div>

and this CSS:

body:has(#tab1:checked){ 
  --content-1-display-x: block; 
  --content-2-display-x: none; 
  --content-3-display-x: none; 
}

body:has(#tab2:checked){ 
  --content-1-display-x: none; 
  --content-2-display-x: block; 
  --content-3-display-x: none; 
}

body:has(#tab3:checked){ 
  --content-1-display-x: none; 
  --content-2-display-x: none; 
  --content-3-display-x: block; 
}


#content1 {
  display: var(--content-1-display-x);
}

#content2 {
  display: var(--content-2-display-x);
}

#content3 {
  display: var(--content-3-display-x);
}

First Try

To be clear: this is a prototype. It's purpose is a first test to see what's possible. There's several things to investigate, including:

• What's the accessibility of this like? Is it dead on arrival? Are there adjustments that can be made to bring it in line?

• The radio buttons themselves being visible is pretty ugly. I'm pretty sure they can be hidden. TBD on what that does to accessibility.

• The CSS is pretty verbose. It does an explicit check for each radio button and updates all the variables inside each check. I wouldn't be surprised to learn there's a more efficient way to do that.

Overall, it's very exciting. Even if there are reasons not to do it now, the continuing march of CSS makes me think it won't be long.

-a