CSS-legeplads

Sådan fungerer CSS Playground

Hvad værktøjet gør

CSS Playground giver dig to editorer — HTML og CSS — samt en sandboxet iframe-forhåndsvisning, der opdateres, mens du skriver. Brug det til at prototype komponenter, teste selektorer, validere fallback-styles eller bygge minimale reproduktioner til fejlrapporter. Slå 'Reset styles' til for at tilføje et lille CSS reset (box-sizing, fornuftige standarder for body), så din CSS ikke kæmper mod browserens standardindstillinger.

Almindelige anvendelsestilfælde for udviklere

Frontendudviklere bygger isolerede komponenteksempler til deling i pull requests eller dokumentation. Designere eksperimenterer med gradienter, skygger, animationstiming og moderne funktioner som grid, subgrid og container queries. Undervisere demonstrerer CSS-koncepter for studerende uden at oprette CodePen-konti. QA-ingeniører reproducerer CSS-only-fejl rent i et kontrolleret miljø.

Dataformater, typer eller varianter

HTML-editoren accepterer ethvert body-indhold. CSS-editoren accepterer enhver moderne CSS — custom properties, nesting, @container, @layer osv. Output er et fuldt selvstændigt HTML-dokument med meta viewport-tagget (valgfrit) og en inline style-blok, klar til at kopiere som en komplet fil. Forhåndsvisnings-iframen bruger sandbox='allow-same-origin' for at tillade relative URL'er, mens scripts og formularindsendelser blokeres.

Almindelige faldgruber og kanttilfælde

Eksterne @font-face-URL'er og @import-sætninger kan blive blokeret af iframe-sandboxen. Indsætter du CSS, der afhænger af nedarvede styles fra et ydre dokument, vil det ikke opføre sig på samme måde her, fordi iframen er isoleret. Animationer med meget lange varigheder fortsætter med at køre i forhåndsvisnings-iframen, selv når editoren ikke er i fokus; sæt dem på pause med animation-play-state, hvis du debugger timing.

Hvornår du skal bruge dette værktøj vs. kode

Brug browserværktøjet til engangseksperimenter, isolerede minimale reproduktioner eller hurtige undervisningsdemoer. I et rigtigt projekt giver din dev server, hot module replacement og component devtools (React Refresh, Vue devtools) en langt rigere feedback-loop — brug denne playground til skitser, som du ikke vil sætte tooling op til.