Table des matières
Dropdown que en CSS
Récement, on m'a parler du menu déroulant d'apple, fait uniquement en css. Je connaissais déjà cette technique pour faire des dropdowns, mais cela m'a donner l'idée de pousser le concept un peu plus loins.
Pour celles et ceux qui ne la connaissent pas, voici une petite explication:
<label for="drop">Click here to see the dropdown</label>
<input id="drop" type="checkbox" />
<div class="down">Content of the dropdown</div>
#drop, .down {
display: none;
}
#drop:checked + .down {
display: block;
}
Le selecteur input:checked + div cible la div qui suit l'input uniquement lorsque celui ci est coché.
C'est un moyen détourner et élégant de stocker un booléen dans le css pour gérer l'ouverture et la fermeture de notre dropdown.
Les portes logiques
Avec cette technique, on peut donc stocker du binaire uniquement avec du HTML et du CSS.
Maintenant, une autre question se pose: est il possible de combiner des inputs pour faire des portes logiques ?
Et la reponse est: OUI
/* La porte YES */
input:checked + .yes {
background: green;
}
/* La porte NOT */
input:not(:checked) + .not {
background: green;
}
/* La porte AND */
input:checked + input:checked + .and {
background: green;
}
/* La porte OR */
input:checked + input:not(:checked) + .or,
input:not(:checked) + input:checked + .or,
input:checked + input:checked + .or {
background: green;
}
/* La porte XOR */
input:checked + input:not(:checked) + .xor,
input:not(:checked) + input:checked + .xor {
background: green;
}
Le résultat obtenus avec un css similaire est le suivant:
Limitations
Même si il est possible de chainer les portes logiques, la quantité de css nécessaire devient vite astronomique.
De plus. il est quasiment impossible de prevoir toutes les permutations avec tous les ordres de portes possibles.
Enfin, si on ne donne pas des identifiants uniques à chacun de nos connecteurs et à chacunes de nos portes, il va très vite y avoir des conflits de sélecteur css.
Conclusion
C'est donc possible de faire des portes logiques avec du CSS.
En theorie, il est aussi possible de faire des additioneurs, des unités logiques et arithmétiques et des processeurs.
J'ai trouvé un projet LESS qui le démontre très bien aussi: https://silon.slaks.net/
Mais pour ma part, je m'arrête là pour cette recherche !