CSS hřiště

Jak funguje CSS Playground

Co nástroj dělá

CSS Playground vám poskytne dva editory — HTML a CSS — a sandboxovaný náhled v iframe, který se aktualizuje při psaní. Použijte ho k prototypování komponent, testování selektorů, ověřování fallback stylů nebo k vytvoření minimálních reprodukcí pro bug reporty. Přepínač „Reset styles“ přidá malé CSS resetování (box-sizing, rozumné výchozí nastavení body), aby vaše CSS nebojovalo s výchozími styly prohlížeče.

Běžné případy použití pro vývojáře

Frontend vývojáři vytvářejí izolované příklady komponent pro sdílení v pull requestech nebo dokumentaci. Designéři experimentují s přechody, stíny, časováním animací a moderními funkcemi jako grid, subgrid a container queries. Lektoři předvádějí studentům CSS koncepty bez zakládání účtů na CodePen. QA inženýři čistě reprodukují chyby pouze v CSS v kontrolovaném prostředí.

Datové formáty, typy nebo varianty

HTML editor přijímá libovolný obsah body. CSS editor přijímá libovolné moderní CSS — custom properties, nesting, @container, @layer atd. Výstupem je plnohodnotný samostatný HTML dokument s meta viewport tagem (volitelně) a inline style blokem, připravený ke zkopírování jako kompletní soubor. Náhledové iframe používá sandbox='allow-same-origin', aby povolilo relativní URL, zatímco blokuje skripty a odesílání formulářů.

Běžné nástrahy a okrajové případy

Externí URL v @font-face a příkazy @import mohou být sandboxem iframe blokovány. Vložení CSS, které závisí na zděděných stylech z vnějšího dokumentu, se zde nebude chovat stejně, protože iframe je izolované. Animace s velmi dlouhým trváním běží v náhledovém iframe dál i tehdy, když editor není aktivní; pokud ladíte časování, pozastavte je pomocí animation-play-state.

Kdy použít tento nástroj vs. kód

Nástroj v prohlížeči použijte pro jednorázové experimenty, izolované minimální reprodukce nebo rychlé výukové ukázky. V reálném projektu vám dev server, hot module replacement a devtools pro komponenty (React Refresh, Vue devtools) poskytnou mnohem bohatší zpětnou vazbu — tento playground použijte pro skici, kvůli kterým nechcete nastavovat tooling.