Entwickler Bence Szabó hat am 1. Dezember 2017 die Umsetzung seiner Demo Pure CSS Connect 4 erklärt. Das Vier-gewinnt-Spiel kommt im eigenen Spielcode ohne JavaScript aus. HTML-Formulare speichern die Belegung, CSS verarbeitet die sichtbaren Zustände.
Im Originalprojekt auf CodePen stehen für jedes der 42 Felder zwei Radio-Buttons mit gemeinsamem Namen. Ohne Auswahl ist das Feld leer; die Auswahl eines Buttons legt die Farbe fest. :indeterminate erkennt die unbelegten Gruppen, :checked die gesetzten Steine.
Römische Zähler verschieben die Klickflächen
Der Zugwechsel nutzt einen Umweg: Die beiden Farben erhöhen beziehungsweise verringern einen CSS-Zähler. Seine Ausgabe in römischen Ziffern verändert die Breite eines Containers. Dadurch verschieben sich überlagerte Eingabeflächen und geben die andere Farbe frei. CSS vergleicht hier also nicht unmittelbar einen Zahlenwert mit einer Spielregel.
Verschachtelte Spalten und Selektorketten prüfen Reihen aus vier Steinen. Ein Formular-Reset setzt die Auswahl zurück. Damit steckt ein Teil der Spiellogik in der Anordnung der HTML-Elemente. Eine Änderung des Spielfelds wäre folglich nicht nur eine Anpassung seiner sichtbaren Größe, sondern müsste auch Zustände und Selektoren berücksichtigen.
Feste Abmessungen und eingeschränkte Tastaturbedienung
Szabó nennt fehlende Responsivität und Probleme auf kleinen Bildschirmen. Die Radio-Buttons sind mit tabindex="-1" aus der normalen Tab-Reihenfolge entfernt, um unzulässige Züge zu verhindern. Das schränkt zugleich den Zugang per Tastatur ein. Der Verzicht auf JavaScript ist deshalb kein Beleg für eine leichter zugängliche Oberfläche.
CSS Grid Garden vermittelt Grid-Layout bereits seit April 2017 als Lernspiel und verwendet auch JavaScript. Szabós Experiment untersucht dagegen, welche Spielzustände HTML und CSS selbst übernehmen können. Aus dem Beispiel folgt keine allgemeine Empfehlung, die Logik browserbasierter Spiele in Stylesheets zu verlagern.
Historischer Stand: Der Beitrag dokumentiert die Demo und den Entwicklerbericht von Dezember 2017. Das HTML5-Logo dient als Symbolbild für die Webtechnik, nicht als Screenshot des Spiels.