CSS-leikkikenttä
HTML
CSS
Esikatselu
Tekniset tiedot
Miten CSS Playground toimii
Mitä työkalu tekee
CSS Playground tarjoaa kaksi editoria — HTML ja CSS — sekä hiekkalaatikkoon eristetyn iframe-esikatselun, joka päivittyy kirjoittaessasi. Käytä sitä komponenttien prototypointiin, selektorien testaamiseen, fallback-tyylien validointiin tai minimaalisten toistoesimerkkien rakentamiseen bugiraportteja varten. 'Reset styles' -kytkin lisää pienen CSS-resetin (box-sizing, järkevät body-oletukset), jotta CSS:si ei joudu taistelemaan selaimen oletusten kanssa.
Yleiset kehittäjien käyttötapaukset
Frontend-kehittäjät rakentavat eristettyjä komponenttiesimerkkejä jaettavaksi pull requesteissa tai dokumentaatiossa. Suunnittelijat kokeilevat liukuvärejä, varjoja, animaatioiden ajoituksia ja moderneja ominaisuuksia kuten grid, subgrid ja container queries. Opettajat demonstroivat CSS-käsitteitä opiskelijoille ilman CodePen-tilien luomista. QA-insinöörit toistavat pelkkiä CSS-bugeja siististi hallitussa ympäristössä.
Tietomuodot, tyypit tai variantit
HTML-editori hyväksyy minkä tahansa body-sisällön. CSS-editori hyväksyy minkä tahansa modernin CSS:n — custom properties, nesting, @container, @layer jne. Tuloste on täysi itsenäinen HTML-dokumentti, jossa on meta viewport -tagi (valinnainen) ja inline style -lohko, valmiina kopioitavaksi kokonaiseksi tiedostoksi. Esikatselun iframe käyttää sandbox='allow-same-origin' salliakseen suhteelliset URL-osoitteet, mutta estääkseen skriptit ja lomakkeiden lähetykset.
Yleiset sudenkuopat ja reunatapaukset
Ulkoiset @font-face-URL-osoitteet ja @import-lauseet voivat estyä iframe-hiekkalaatikossa. CSS:n liittäminen, joka riippuu ulomman dokumentin periytyvistä tyyleistä, ei käyttäydy täällä samoin, koska iframe on eristetty. Erittäin pitkällä kestolla olevat animaatiot jatkavat pyörimistään esikatselu-iframessa, vaikka editori ei olisi fokuksessa; pysäytä ne animation-play-state -ominaisuudella, jos debuggaat ajoitusta.
Milloin käyttää tätä työkalua vs. koodia
Käytä selaintyökalua kertaluonteisiin kokeiluihin, eristettyihin minimaalisiin toistoesimerkkeihin tai nopeisiin opetusdemonstraatioihin. Oikeassa projektissa kehityspalvelin, hot module replacement ja komponenttien devtoolit (React Refresh, Vue devtools) tarjoavat paljon rikkaamman palautesilmukan — käytä tätä playgroundia luonnoksiin, joihin et halua pystyttää työkaluja.