Experimenting to see if I can implement simple logic gates using pure CSS and HTML, no JavaScript.

I'm sure this has been done before by many people, but I have never seen it, nor tried it before, so I wanted to figure it out on my own. No AI, no googling.

The HTML for each of the examples below are setup like this:

<fieldset id="gate-AND">
  <legend><strong>AND</strong></legend>
  <!-- description -->
  <label for="gate-AND-A">A</label>
  <label for="gate-AND-B">B</label>
  <br />
  <input type="checkbox" id="gate-AND-A" />
  <input type="checkbox" id="gate-AND-B" />
  <output role="status" aria-live="polite" for="gate-AND-A gate-AND-B">
    A <strong>AND</strong> B = <span class="output-off">0</span><span class="output-on">1</span>
  </output>
</fieldset>
AND

Only true when both A and B are on


A AND B = 01

OR

True if either, or both, A and B are on.


A OR B = 01

NAND

Inverse of AND. True unless both A and B are on, then it's false


A NAND B = 01

NOR

Inverse of OR. Only true when both A and B are off.


A NOR B = 01

XOR

Exclusive OR. Only true when either A or B are on, but not when both are on or off.


A XOR B = 01

XNOR

Inverse of XOR. True when A and B are either both on or both off.


A XNOR B = 01

Very simple to create using CSS that's been widely available for a long time now:

My CSS is a little verbose, I could probably simplify it a bit. I tried using CSS Nesting but it wasn't working. I think it has to do with how I'm minifying the CSS... maybe. But at least without nesting it widens the browser support greatly.

I also tried using CSS content instead of having 2 spans in each output for the result state, but CSS generated content is less accessible so I scrapped that idea.

Now, what can we do with this? I'm not sure. I think I'll try and create a simple calculator in a future post. Stayed tuned kiddos!