Show HN: I made Logic gates using CSS if() function

2 days ago 4

Pure CSS logic gates implementation using the experimental CSS if() function (Chrome 137+)

AND

.and .out { --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1); }

OR

.or .out { --value: if(style(--a: 1): 1; style(--b: 1): 1; else: 0); }

NOT

.not .out { --value: if(style(--a: 1): 0; else: 1); }

XOR

.xor .out { --value: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); }

(a AND b) OR c

NAND (NOT AND)

NOR (NOT OR)

Read Entire Article