Playground CSS
HTML
CSS
Anteprima
Dettagli tecnici
Come funziona il Playground CSS
Cosa fa lo strumento
Il Playground CSS ti offre due editor — HTML e CSS — e un’anteprima in iframe sandbox che si aggiorna mentre digiti. Usalo per prototipare componenti, testare selettori, validare stili di fallback o creare repro minimi per segnalazioni di bug. L’interruttore "Reset styles" aggiunge un piccolo reset CSS (box-sizing, valori predefiniti sensati per il body) così il tuo CSS non deve combattere con i default del browser.
Casi d’uso comuni per sviluppatori
Gli sviluppatori frontend creano esempi di componenti isolati da condividere in pull request o documentazione. I designer sperimentano con gradienti, ombre, tempi delle animazioni e funzionalità moderne come grid, subgrid e container queries. Gli insegnanti mostrano concetti CSS agli studenti senza dover creare account CodePen. I QA engineer riproducono in modo pulito bug solo-CSS in un ambiente controllato.
Formati, tipi o varianti dei dati
L’editor HTML accetta qualsiasi contenuto del body. L’editor CSS accetta qualsiasi CSS moderno — custom properties, nesting, @container, @layer, ecc. L’output è un documento HTML completo e autonomo con il tag meta viewport (opzionale) e un blocco style inline, pronto da copiare come file completo. L’iframe di anteprima usa sandbox='allow-same-origin' per consentire URL relativi bloccando al contempo script e invii di moduli.
Errori comuni e casi limite
URL esterni in @font-face e istruzioni @import potrebbero essere bloccati dalla sandbox dell’iframe. Incollare CSS che dipende da stili ereditati da un documento esterno non si comporterà allo stesso modo qui perché l’iframe è isolato. Le animazioni con durate molto lunghe continuano a girare nell’iframe di anteprima anche quando l’editor non è in focus; mettile in pausa con animation-play-state se stai facendo debug del timing.
Quando usare questo strumento rispetto al codice
Usa lo strumento nel browser per esperimenti una tantum, riproduzioni minime isolate o rapide demo didattiche. In un progetto reale, il tuo dev server, l’hot module replacement e i devtools dei componenti (React Refresh, Vue devtools) ti offrono un ciclo di feedback molto più ricco: usa questo playground per bozze per cui non vuoi configurare tooling.