CSS ihrisko
HTML
CSS
Náhľad
Technické podrobnosti
Ako funguje CSS Playground
Čo nástroj robí
CSS Playground vám dáva dva editory — HTML a CSS — a náhľad v sandboxovanom iframe, ktorý sa aktualizuje počas písania. Použite ho na prototypovanie komponentov, testovanie selektorov, overenie fallback štýlov alebo vytváranie minimálnych reprodukcií pre bug reporty. Prepínač „Reset styles“ pridá malý CSS reset (box-sizing, rozumné predvolené nastavenia pre body), aby vaše CSS nebojovalo s predvolenými štýlmi prehliadača.
Bežné prípady použitia pre vývojárov
Frontend vývojári vytvárajú izolované príklady komponentov na zdieľanie v pull requestoch alebo dokumentácii. Dizajnéri experimentujú s prechodmi, tieňmi, časovaním animácií a modernými funkciami ako grid, subgrid a container queries. Učitelia demonštrujú CSS koncepty študentom bez zakladania účtov na CodePen. QA inžinieri čisto reprodukujú chyby iba v CSS v kontrolovanom prostredí.
Dátové formáty, typy alebo varianty
HTML editor prijíma ľubovoľný obsah pre body. CSS editor prijíma akékoľvek moderné CSS — vlastné vlastnosti, vnáranie, @container, @layer atď. Výstupom je plnohodnotný samostatný HTML dokument s meta viewport tagom (voliteľné) a inline blokom štýlov, pripravený na skopírovanie ako kompletný súbor. Náhľadový iframe používa sandbox='allow-same-origin', aby povolil relatívne URL, pričom blokuje skripty a odosielanie formulárov.
Bežné úskalia a okrajové prípady
Externé URL v @font-face a príkazy @import môžu byť blokované sandboxom iframe. Vloženie CSS, ktoré závisí od zdedených štýlov z vonkajšieho dokumentu, sa tu nebude správať rovnako, pretože iframe je izolovaný. Animácie s veľmi dlhým trvaním pokračujú v náhľadovom iframe aj vtedy, keď editor nie je aktívny; ak ladíte časovanie, pozastavte ich pomocou animation-play-state.
Kedy použiť tento nástroj vs. kód
Nástroj v prehliadači použite na jednorazové experimenty, izolované minimálne reprodukcie alebo rýchle výučbové ukážky. V reálnom projekte vám dev server, hot module replacement a devtools pre komponenty (React Refresh, Vue devtools) poskytnú omnoho bohatšiu spätnú väzbu — tento playground používajte na skice, kvôli ktorým nechcete nastavovať tooling.