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.

CSS smėlio dėžė

Atstatyti stilius

Peržiūros srities meta

HTML

CSS

Peržiūra

Techninė informacija

Kaip veikia CSS smėlio dėžė

Ką daro įrankis

CSS Playground suteikia du redaktorius — HTML ir CSS — bei izoliuotą iframe peržiūrą, kuri atsinaujina jums rašant. Naudokite ją komponentams prototipuoti, selektoriams testuoti, atsarginiams stiliams patikrinti arba sukurti minimalius atkūrimo pavyzdžius klaidų pranešimams. Perjungiklis „Reset styles“ prideda nedidelį CSS reset (box-sizing, prasmingi body numatytieji nustatymai), kad jūsų CSS nekovotų su naršyklės numatytaisiais stiliais.

Dažniausi kūrėjų naudojimo atvejai

Frontend kūrėjai kuria izoliuotus komponentų pavyzdžius, kuriais dalijasi pull request'uose ar dokumentacijoje. Dizaineriai eksperimentuoja su gradientais, šešėliais, animacijų trukmėmis ir šiuolaikinėmis funkcijomis, tokiomis kaip grid, subgrid ir container queries. Dėstytojai demonstruoja CSS sąvokas studentams nekurdami CodePen paskyrų. QA inžinieriai švariai atkuria tik CSS klaidas kontroliuojamoje aplinkoje.

Duomenų formatai, tipai arba variantai

HTML redaktorius priima bet kokį body turinį. CSS redaktorius priima bet kokį šiuolaikinį CSS — pasirinktines savybes, įdėtinimą, @container, @layer ir t. t. Išvestis yra pilnas savarankiškas HTML dokumentas su meta viewport žyma (pasirinktinai) ir įterptu style bloku, paruoštas kopijuoti kaip pilnas failas. Peržiūros iframe naudoja sandbox='allow-same-origin', kad leistų santykinius URL, bet blokuotų skriptus ir formų pateikimus.

Dažniausios klaidos ir kraštiniai atvejai

Išoriniai @font-face URL ir @import teiginiai gali būti blokuojami dėl iframe sandbox. Įklijavus CSS, kuris priklauso nuo paveldėtų stilių iš išorinio dokumento, čia elgsena nebus tokia pati, nes iframe yra izoliuotas. Animacijos su labai ilgomis trukmėmis toliau veikia peržiūros iframe net kai redaktorius nėra sufokusuotas; jei derinate laiką, pristabdykite jas su animation-play-state.

Kada naudoti šį įrankį, o kada kodą

Naudokite naršyklės įrankį vienkartiniams eksperimentams, izoliuotiems minimaliems atkūrimo pavyzdžiams ar greitoms mokymo demonstracijoms. Tikrame projekte jūsų dev serveris, hot module replacement ir komponentų devtools (React Refresh, Vue devtools) suteikia daug turtingesnį grįžtamojo ryšio ciklą — naudokite šią smėlio dėžę eskizams, kuriems nenorite diegti įrankių.