What is the CSS Playground?

A live sandbox for experimenting with HTML and CSS together. Edit either pane, and the preview iframe updates instantly. Useful for trying out new CSS features, debugging selectors, or building isolated component examples.

Is the preview sandboxed?

Yes — the preview runs in an iframe with the sandbox attribute restricting scripts and network access. Your code never leaves the browser; nothing is uploaded.

Can I import external fonts or CSS?

External @import or URLs are blocked by the sandbox. Paste the relevant CSS directly into the editor, or use system fonts for previews.

Playground CSS

Resetează stilurile

Meta viewport

HTML

CSS

Previzualizare

Detalii tehnice

Cum funcționează CSS Playground

Ce face instrumentul

CSS Playground vă oferă două editoare — HTML și CSS — și o previzualizare într-un iframe izolat care se actualizează pe măsură ce tastați. Folosiți-l pentru a prototipa componente, a testa selectori, a valida stiluri de fallback sau a construi reproduceri minime pentru rapoarte de bug. Comutatorul „Reset styles” adaugă un mic reset CSS (box-sizing, valori implicite rezonabile pentru body), astfel încât CSS-ul vostru să nu se lupte cu valorile implicite ale browserului.

Cazuri de utilizare comune pentru dezvoltatori

Dezvoltatorii frontend construiesc exemple izolate de componente pe care să le partajeze în pull request-uri sau documentație. Designerii experimentează cu degradeuri, umbre, timpi de animație și funcționalități moderne precum grid, subgrid și container queries. Profesorii demonstrează concepte CSS studenților fără a crea conturi CodePen. Inginerii QA reproduc curat bug-uri doar de CSS într-un mediu controlat.

Formate de date, tipuri sau variante

Editorul HTML acceptă orice conținut pentru body. Editorul CSS acceptă orice CSS modern — proprietăți personalizate, nesting, @container, @layer etc. Ieșirea este un document HTML complet, de sine stătător, cu tagul meta viewport (opțional) și un bloc style inline, gata de copiat ca fișier complet. Iframe-ul de previzualizare folosește sandbox='allow-same-origin' pentru a permite URL-uri relative, blocând în același timp scripturile și trimiterea formularelor.

Capcane frecvente și cazuri limită

URL-urile externe @font-face și instrucțiunile @import pot fi blocate de sandbox-ul iframe-ului. Lipirea de CSS care depinde de stiluri moștenite dintr-un document exterior nu se va comporta la fel aici, deoarece iframe-ul este izolat. Animațiile cu durate foarte lungi continuă să ruleze în iframe-ul de previzualizare chiar și când editorul nu este focalizat; puneți-le pe pauză cu animation-play-state dacă depanați temporizarea.

Când să folosești acest instrument vs cod

Folosiți instrumentul din browser pentru experimente punctuale, reproduceri minime izolate sau demonstrații rapide de predare. Într-un proiect real, serverul de dezvoltare, hot module replacement și devtools pentru componente (React Refresh, Vue devtools) vă oferă un ciclu de feedback mult mai bogat — folosiți acest playground pentru schițe pentru care nu vreți să configurați tooling.