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 smilškaste

Atiestatīt stilus

Skata loga meta

HTML

CSS

Priekšskatījums

Tehniskā informācija

Kā darbojas CSS smilškaste

Ko rīks dara

CSS smilškaste nodrošina divus redaktorus — HTML un CSS — un izolētu iframe priekšskatījumu, kas atjaunojas, kamēr rakstāt. Izmantojiet to, lai prototipētu komponentus, testētu selektorus, pārbaudītu rezerves stilus vai izveidotu minimālus piemērus kļūdu ziņojumiem. Slēdzis “Atiestatīt stilus” pievieno nelielu CSS atiestatīšanu (box-sizing, saprātīgi body noklusējumi), lai jūsu CSS necīnītos ar pārlūka noklusējumiem.

Biežākie izstrādātāju lietošanas gadījumi

Frontend izstrādātāji veido izolētus komponentu piemērus, ar kuriem dalīties pull requestos vai dokumentācijā. Dizaineri eksperimentē ar gradientiem, ēnām, animāciju laikiem un modernām iespējām, piemēram, grid, subgrid un container queries. Pasniedzēji demonstrē CSS konceptus studentiem, neveidojot CodePen kontus. QA inženieri tīri reproducē tikai CSS kļūdas kontrolētā vidē.

Datu formāti, tipi vai varianti

HTML redaktors pieņem jebkuru body saturu. CSS redaktors pieņem jebkuru modernu CSS — pielāgotās īpašības, ligzdošanu, @container, @layer u.c. Izvade ir pilns, patstāvīgs HTML dokuments ar meta viewport tagu (pēc izvēles) un iekļautu style bloku, gatavs kopēšanai kā pilns fails. Priekšskatījuma iframe izmanto sandbox='allow-same-origin', lai atļautu relatīvos URL, vienlaikus bloķējot skriptus un formu iesniegšanu.

Biežākās kļūdas un robežgadījumi

Ārējie @font-face URL un @import paziņojumi var tikt bloķēti ar iframe smilškastes ierobežojumiem. Ielīmēts CSS, kas paļaujas uz mantotiem stiliem no ārēja dokumenta, šeit neuzvedīsies tāpat, jo iframe ir izolēts. Animācijas ar ļoti ilgiem ilgumiem turpina darboties priekšskatījuma iframe pat tad, kad redaktors nav fokusā; ja atkļūdojat laiku, apturiet tās ar animation-play-state.

Kad izmantot šo rīku, nevis kodu

Izmantojiet pārlūka rīku vienreizējiem eksperimentiem, izolētām minimālām reprodukcijām vai ātrām mācību demonstrācijām. Reālā projektā jūsu izstrādes serveris, hot module replacement un komponentu izstrādes rīki (React Refresh, Vue devtools) nodrošina daudz bagātīgāku atgriezenisko saiti — izmantojiet šo smilškasti skicēm, kurām nevēlaties uzstādīt rīkus.