Bac à sable CSS

Comment fonctionne le bac à sable CSS

Ce que fait l’outil

Le bac à sable CSS vous offre deux éditeurs — HTML et CSS — ainsi qu’un aperçu dans une iframe isolée qui se met à jour au fil de la saisie. Utilisez-le pour prototyper des composants, tester des sélecteurs, valider des styles de repli ou créer des reproductions minimales pour des rapports de bug. Le bouton « Reset styles » ajoute un petit reset CSS (box-sizing, valeurs par défaut raisonnables pour body) afin que votre CSS ne se batte pas contre les styles par défaut du navigateur.

Cas d’usage courants pour les développeurs

Les développeurs frontend construisent des exemples de composants isolés à partager dans des pull requests ou de la documentation. Les designers expérimentent avec les dégradés, les ombres, les timings d’animation et des fonctionnalités modernes comme grid, subgrid et les container queries. Les enseignants démontrent des concepts CSS aux étudiants sans créer de comptes CodePen. Les ingénieurs QA reproduisent proprement des bugs uniquement CSS dans un environnement contrôlé.

Formats de données, types ou variantes

L’éditeur HTML accepte n’importe quel contenu de body. L’éditeur CSS accepte tout CSS moderne — propriétés personnalisées, imbrication, @container, @layer, etc. La sortie est un document HTML autonome complet avec la balise meta viewport (optionnelle) et un bloc style inline, prêt à être copié comme fichier complet. L’iframe d’aperçu utilise sandbox='allow-same-origin' pour autoriser les URL relatives tout en bloquant les scripts et les soumissions de formulaires.

Pièges courants et cas limites

Les URL externes @font-face et les instructions @import peuvent être bloquées par le sandbox de l’iframe. Coller du CSS qui dépend de styles hérités d’un document externe ne se comportera pas de la même manière ici, car l’iframe est isolée. Les animations avec des durées très longues continuent de s’exécuter dans l’iframe d’aperçu même lorsque l’éditeur n’a pas le focus ; mettez-les en pause avec animation-play-state si vous déboguez le timing.

Quand utiliser cet outil plutôt que du code

Utilisez l’outil dans le navigateur pour des expériences ponctuelles, des reproductions minimales isolées ou des démos pédagogiques rapides. Dans un vrai projet, votre serveur de dev, le hot module replacement et les devtools de composants (React Refresh, Vue devtools) vous offrent une boucle de feedback bien plus riche — utilisez ce bac à sable pour des esquisses pour lesquelles vous ne voulez pas mettre en place d’outillage.