CSS-lekeplass

Slik fungerer CSS Playground

Hva verktøyet gjør

CSS Playground gir deg to editorer — HTML og CSS — og en sandkasset iframe-forhåndsvisning som oppdateres mens du skriver. Bruk det til å prototypere komponenter, teste selektorer, validere fallback-stiler eller lage minimale reproer for feilrapporter. Bryteren «Tilbakestill stiler» legger til en liten CSS-reset (box-sizing, fornuftige standarder for body) slik at CSS-en din ikke kjemper mot nettleserens standarder.

Vanlige bruksområder for utviklere

Frontend-utviklere bygger isolerte komponenteksempler for å dele i pull requests eller dokumentasjon. Designere eksperimenterer med gradienter, skygger, animasjonstiming og moderne funksjoner som grid, subgrid og container queries. Lærere demonstrerer CSS-konsepter for studenter uten å opprette CodePen-kontoer. QA-ingeniører reproduserer CSS-only-feil ryddig i et kontrollert miljø.

Dataformater, typer eller varianter

HTML-editoren godtar hvilket som helst body-innhold. CSS-editoren godtar moderne CSS — egendefinerte egenskaper, nesting, @container, @layer, osv. Utdata er et komplett, frittstående HTML-dokument med meta viewport-taggen (valgfritt) og en inline style-blokk, klart til å kopieres som en fullstendig fil. Forhåndsvisnings-iframe-en bruker sandbox='allow-same-origin' for å tillate relative URL-er samtidig som skript og skjemainnsendinger blokkeres.

Vanlige fallgruver og kanttilfeller

Eksterne @font-face-URL-er og @import-setninger kan bli blokkert av iframe-sandkassen. Å lime inn CSS som er avhengig av arvede stiler fra et ytre dokument vil ikke oppføre seg likt her fordi iframe-en er isolert. Animasjoner med svært lange varigheter fortsetter å kjøre i forhåndsvisnings-iframe-en selv når editoren ikke er i fokus; sett dem på pause med animation-play-state hvis du feilsøker timing.

Når du bør bruke dette verktøyet vs. kode

Bruk nettleserverktøyet for engangseksperimenter, isolerte minimale reproduksjoner eller raske undervisningsdemoer. I et reelt prosjekt gir utviklerserveren din, hot module replacement og komponent-devtools (React Refresh, Vue devtools) en mye rikere tilbakemeldingssløyfe — bruk denne playgrounden til skisser du ikke vil sette opp verktøy for.