CSS-i mänguväljak
HTML
CSS
Eelvaade
Tehnilised üksikasjad
Kuidas CSS Playground töötab
Mida tööriist teeb
CSS Playground annab sulle kaks redaktorit — HTML ja CSS — ning liivakastitud iframe'i eelvaate, mis uueneb kirjutamise ajal. Kasuta seda komponentide prototüüpimiseks, selektorite testimiseks, varustiilide valideerimiseks või minimaalsete reprodutseerimiste loomiseks veateadete jaoks. Lüliti 'Reset styles' lisab väikese CSS-i lähtestuse (box-sizing, mõistlikud body vaikeseaded), et sinu CSS ei peaks võitlema brauseri vaikeseadetega.
Levinud kasutusjuhtumid arendajatele
Frontend-arendajad loovad isoleeritud komponentide näiteid, mida jagada pull request'ides või dokumentatsioonis. Disainerid katsetavad gradientide, varjude, animatsioonide ajastuste ja kaasaegsete funktsioonidega, nagu grid, subgrid ja konteineripäringud. Õpetajad demonstreerivad õpilastele CSS-i kontseptsioone ilma CodePen'i kontosid loomata. QA-insenerid reprodutseerivad CSS-ainult vigu puhtalt kontrollitud keskkonnas.
Andmevormingud, tüübid või variandid
HTML-redaktor aktsepteerib mis tahes body sisu. CSS-redaktor aktsepteerib mis tahes kaasaegset CSS-i — kohandatud omadused, pesastamine, @container, @layer jne. Väljund on täielik iseseisev HTML-dokument koos meta viewport sildiga (valikuline) ja sisemise style-plokiga, valmis kopeerimiseks tervikliku failina. Eelvaate iframe kasutab sandbox='allow-same-origin', et lubada suhtelisi URL-e, samal ajal blokeerides skriptid ja vormide esitamise.
Levinud komistuskivid ja erijuhud
Välised @font-face URL-id ja @import laused võivad olla iframe'i liivakasti poolt blokeeritud. CSS-i kleepimine, mis sõltub välise dokumendi päritud stiilidest, ei käitu siin samamoodi, sest iframe on isoleeritud. Väga pika kestusega animatsioonid jätkavad eelvaate iframe'is töötamist isegi siis, kui redaktor pole fookuses; kui silud ajastust, peata need animation-play-state abil.
Millal kasutada seda tööriista vs koodi
Kasuta brauseritööriista ühekordseteks katsetusteks, isoleeritud minimaalseteks reprodutseerimisteks või kiireteks õpetamisdemodeks. Päris projektis annavad sinu arendusserver, hot module replacement ja komponentide arendustööriistad (React Refresh, Vue devtools) palju rikkalikuma tagasisideahela — kasuta seda playground'i visandite jaoks, mille jaoks sa ei taha tööriistakomplekti üles seada.