CSS-lekplats

Så fungerar CSS Playground

Vad verktyget gör

CSS Playground ger dig två editorer — HTML och CSS — samt en sandlådad iframe-förhandsvisning som uppdateras medan du skriver. Använd den för att prototypa komponenter, testa selektorer, validera fallback-stilar eller bygga minimala reproexempel för buggrapporter. Växeln "Reset styles" lägger till en liten CSS-reset (box-sizing, rimliga standardvärden för body) så att din CSS inte behöver kämpa mot webbläsarens standardstilar.

Vanliga användningsfall för utvecklare

Frontendutvecklare bygger isolerade komponentexempel att dela i pull requests eller dokumentation. Designers experimenterar med gradienter, skuggor, animationstider och moderna funktioner som grid, subgrid och container queries. Lärare demonstrerar CSS-koncept för studenter utan att behöva skapa CodePen-konton. QA-ingenjörer återskapar CSS-buggar rent i en kontrollerad miljö.

Dataformat, typer eller varianter

HTML-editorn accepterar valfritt body-innehåll. CSS-editorn accepterar modern CSS — custom properties, nesting, @container, @layer osv. Utdata är ett komplett fristående HTML-dokument med meta viewport-taggen (valfritt) och ett inline style-block, redo att kopieras som en komplett fil. Förhandsvisnings-iframen använder sandbox='allow-same-origin' för att tillåta relativa URL:er samtidigt som script och formulärinlämningar blockeras.

Vanliga fallgropar och specialfall

Externa @font-face-URL:er och @import-satser kan blockeras av iframe-sandlådan. Att klistra in CSS som är beroende av ärvda stilar från ett yttre dokument beter sig inte likadant här eftersom iframen är isolerad. Animationer med mycket långa varaktigheter fortsätter att köras i förhandsvisnings-iframen även när editorn inte är i fokus; pausa dem med animation-play-state om du felsöker timing.

När du ska använda det här verktyget jämfört med kod

Använd webbläsarverktyget för engångsexperiment, isolerade minimala reproduktioner eller snabba undervisningsdemos. I ett riktigt projekt ger din dev-server, hot module replacement och komponent-devtools (React Refresh, Vue devtools) en mycket rikare återkopplingsloop — använd den här playgrounden för skisser som du inte vill sätta upp verktyg för.