Zona de proves CSS

Com funciona el CSS Playground

Què fa l’eina

El CSS Playground et dona dos editors — HTML i CSS — i una previsualització en un iframe aïllat que s'actualitza mentre escrius. Fes-lo servir per prototipar components, provar selectors, validar estils de fallback o construir reproduccions mínimes per a informes d'errors. El commutador "Restableix estils" afegeix un petit reset de CSS (box-sizing, valors per defecte raonables del body) perquè el teu CSS no lluiti contra els valors per defecte del navegador.

Casos d’ús habituals per a desenvolupadors

Els desenvolupadors frontend construeixen exemples de components aïllats per compartir en pull requests o documentació. Els dissenyadors experimenten amb degradats, ombres, temporitzacions d'animació i funcions modernes com grid, subgrid i consultes de contenidor. Els educadors mostren conceptes de CSS als estudiants sense haver de crear comptes de CodePen. Els enginyers de QA reprodueixen errors només de CSS de manera neta en un entorn controlat.

Formats, tipus o variants de dades

L'editor HTML accepta qualsevol contingut del body. L'editor CSS accepta qualsevol CSS modern — propietats personalitzades, nesting, @container, @layer, etc. La sortida és un document HTML complet i autònom amb l'etiqueta meta viewport (opcional) i un bloc style en línia, llest per copiar com a fitxer complet. L'iframe de previsualització utilitza sandbox='allow-same-origin' per permetre URL relatives mentre bloqueja scripts i enviaments de formularis.

Errors habituals i casos límit

Les URL externes de @font-face i les instruccions @import poden quedar bloquejades pel sandbox de l'iframe. Enganxar CSS que depèn d'estils heretats d'un document extern no es comportarà igual aquí perquè l'iframe està aïllat. Les animacions amb durades molt llargues continuen executant-se a l'iframe de previsualització fins i tot quan l'editor no té el focus; pausa-les amb animation-play-state si estàs depurant el timing.

Quan utilitzar aquesta eina vs codi

Utilitza l'eina del navegador per a experiments d'un sol cop, reproduccions mínimes aïllades o demostracions ràpides d'ensenyament. En un projecte real, el teu servidor de desenvolupament, el hot module replacement i les devtools de components (React Refresh, Vue devtools) et donen un bucle de feedback molt més ric — fes servir aquest playground per a esbossos per als quals no vols configurar tooling.