CSS-Sweeper — Quand CSS devient un langage de programmation

Vous souvenez-vous quand CSS était considéré comme un simple langage de style ? Le projet CSS-Sweeper de PropJockey brise ce stéréotype, démontrant qu'il est possible d'implémenter un jeu de logique avec état en utilisant du CSS pur. Oui, c'est un Démineur entièrement fonctionnel sans JavaScript !

Comment ça fonctionne ?

Le projet repose sur une technique astucieuse appelée Space Toggle. L'idée est que les variables CSS peuvent contenir soit un espace (;) soit la valeur initial. Cela permet de créer des constructions logiques directement dans les feuilles de style.

Principes fondamentaux du Space Toggle :

• Si une variable contient un espace (--var: ;), elle est considérée comme « vrai »
• Si une variable contient initial (--var: initial;), elle est « faux »
• En combinant ces variables, vous pouvez implémenter une logique ET/OU

/* Пример AND логики */
--red-if-both-true: var(--tog1) var(--tog2) red;
background: var(--red-if-both-true, blue);

Fonctionnalités du jeu

1. Gameplay complet — drapeaux, comptage des mines, détection des cellules vides
2. 16 niveaux de difficulté — chacun avec une disposition unique des mines
3. Conditions de victoire adaptées — vous devez marquer toutes les mines sans faire d'erreurs

Détails techniques

L'auteur a utilisé des cases à cocher pour contrôler les états des cellules. Lorsqu'on clique dessus, la case à cocher modifie les variables CSS, qui à leur tour affectent l'affichage du plateau de jeu. La génération des mines se fait via JavaScript au moment de la compilation, mais le jeu lui-même fonctionne sans.

// Пример генерации уровня
var levels = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
levels.forEach(lvl => {
  while (Object.keys(lvl).length < 99) { 
    var y = ~~(Math.random() * 16);
    var x = ~~(Math.random() * 30);
    lvl[`bomb-${y}-${x}`] = `--bomb-${y}-${x}: ; --not-bomb-${y}-${x}: initial;`;
  }
});

Pourquoi les développeurs en ont-ils besoin ?

1. Apprendre les capacités du CSS — le projet montre ce dont les technologies CSS modernes sont capables
2. Approche alternative pour l'état — utile pour les éléments interactifs simples
3. Inspiration pour des expérimentations — qui sait ce qu'on peut encore implémenter en CSS pur ?

Limitations

Comme l'auteur lui-même le reconnaît, le jeu peut ramer sur les appareils peu puissants — CSS n'est pas optimisé pour de tels calculs. Les conditions de victoire sont également simplifiées en raison de l'impossibilité d'implémenter l'ouverture récursive des cellules sans JavaScript.

CSS-Sweeper n'est pas qu'un simple projet de démonstration technique, c'est un véritable défi à la séparation traditionnelle entre « logique » et « styles ». Essayez d'y jouer vous-même et découvrez que CSS peut être un outil étonnamment puissant !

Pour ceux qui veulent approfondir le Space Toggle, l'auteur recommande ses autres projets et ses tweets explicatifs.