CSS játszótér

Hogyan működik a CSS Playground

Mit csinál az eszköz

A CSS Playground két szerkesztőt ad — HTML-t és CSS-t — valamint egy sandboxolt iframe előnézetet, amely gépelés közben frissül. Használd komponensek prototipizálására, szelektorok tesztelésére, fallback stílusok ellenőrzésére, vagy minimális reprodukciók készítésére hibajegyekhez. A „Reset styles” kapcsoló hozzáad egy kis CSS resetet (box-sizing, ésszerű body alapértékek), hogy a CSS-ednek ne kelljen a böngésző alapértelmezéseivel küzdenie.

Gyakori fejlesztői felhasználási esetek

Frontend fejlesztők izolált komponenspéldákat készítenek, amelyeket megosztanak pull requestekben vagy dokumentációban. Designerek gradienssel, árnyékokkal, animáció-időzítésekkel és modern funkciókkal kísérleteznek, mint a grid, subgrid és a container queryk. Oktatók CSS-koncepciókat mutatnak be diákoknak anélkül, hogy CodePen fiókokat kellene létrehozni. QA mérnökök tisztán, kontrollált környezetben reprodukálnak csak CSS-es hibákat.

Adatformátumok, típusok vagy változatok

A HTML-szerkesztő bármilyen body tartalmat elfogad. A CSS-szerkesztő bármilyen modern CSS-t elfogad — egyéni tulajdonságok, nesting, @container, @layer stb. A kimenet egy teljes, önálló HTML-dokumentum meta viewport taggel (opcionális) és beágyazott style blokkal, amely készen áll arra, hogy teljes fájlként kimásold. Az előnézeti iframe sandbox='allow-same-origin' beállítást használ, hogy engedélyezze a relatív URL-eket, miközben blokkolja a scripteket és az űrlapbeküldéseket.

Gyakori buktatók és szélső esetek

A külső @font-face URL-ek és @import utasítások blokkolva lehetnek az iframe sandbox miatt. Az olyan CSS beillesztése, amely egy külső dokumentum örökölt stílusaira támaszkodik, itt nem fog ugyanúgy viselkedni, mert az iframe izolált. A nagyon hosszú időtartamú animációk tovább futnak az előnézeti iframe-ben akkor is, amikor a szerkesztő nincs fókuszban; ha az időzítést debugolod, állítsd meg őket az animation-play-state segítségével.

Mikor érdemes ezt az eszközt használni a kód helyett

Használd a böngészős eszközt egyszeri kísérletekhez, izolált minimális reprodukciókhoz vagy gyors oktatási demókhoz. Valódi projektben a dev szervered, a hot module replacement és a komponens devtoolok (React Refresh, Vue devtools) sokkal gazdagabb visszacsatolási ciklust adnak — ezt a playgroundot vázlatokhoz használd, amelyekhez nem akarsz eszközláncot felállítani.