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

Summary

CSS Logic Gates with if() Function 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 ); } 7-Segment Display Dirac delta function using CSS math controls each segment: Half Adder /* Half Adder: adds two bits */ .half-adder .sum { --value: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); } .half-adder .carry { --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1); } Full Adder /* Full Adder: adds two bits + carry in */ .full-adder .sum { /* Sum = (A XOR B) XOR Cin */ --half-sum: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); --value: if( style(--half-sum: 0): if(style(--cin: 1): 1; else: 0); style(--half-sum: 1): if(style(--cin: 0): 1; else: 0); else: 0 ); } .full-adder .carry { /* Carry = (A AND B) OR (Cin AND (A XOR B)) */ --carry1: if(style(--a: 0): 0; style(--b: 0): 0; else: 1); --xor-ab: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); --carry2: if(style(--cin: 0): 0; style(--xor-ab: 0): 0; else: 1); --value: if(style(--carry1: 1): 1; style(--carry2: 1): 1; else: 0); } + + = (A + B + Cin = sum, carry) 2:1 Multiplexer (MUX) /* Select one of two inputs based on select line */ .mux-2to1 .out { --value: if( style(--s: 0): var(--i0, 0); /* S=0: select I0 */ else: var(--i1, 0) /* S=1: select I1 */ ); } I0 I1 S Out → I0=0, I1=1, S=0 → Out=0 → I0=0, I1=1, S=1 → Out=1 4:1 Multiplexer /* 4:1 MUX implemented with basic logic gates */ /* Out = (I0·!S1·!S0) + (I1·!S1·S0) + (I2·S1·!S0) + (I3·S1·S0) */ .mux-4to1 .out { /* Step 1: N...