CSS площадка

Как работи CSS Playground

Какво прави инструментът

CSS Playground ви дава два редактора — HTML и CSS — и sandbox-нат iframe преглед, който се обновява, докато пишете. Използвайте го, за да прототипирате компоненти, да тествате селектори, да валидирате fallback стилове или да изграждате минимални възпроизвеждания за bug репорти. Превключвателят „Reset styles“ добавя малък CSS reset (box-sizing, разумни body стойности по подразбиране), така че вашият CSS да не се бори с браузърните настройки по подразбиране.

Често срещани случаи на употреба от разработчици

Frontend разработчиците изграждат изолирани примери на компоненти за споделяне в pull request-и или документация. Дизайнерите експериментират с градиенти, сенки, тайминги на анимации и модерни функции като grid, subgrid и container queries. Преподавателите демонстрират CSS концепции на студенти без да създават CodePen акаунти. QA инженерите възпроизвеждат чисто CSS-only бъгове в контролирана среда.

Формати на данни, типове или варианти

HTML редакторът приема всякакво съдържание за body. CSS редакторът приема всякакъв модерен CSS — custom properties, nesting, @container, @layer и т.н. Изходът е пълен самостоятелен HTML документ с meta viewport таг (по избор) и inline style блок, готов за копиране като цял файл. Прегледът в iframe използва sandbox='allow-same-origin', за да позволи относителни URL адреси, като същевременно блокира скриптове и изпращане на форми.

Често срещани капани и гранични случаи

Външни @font-face URL адреси и @import декларации може да бъдат блокирани от iframe sandbox-а. Поставянето на CSS, който разчита на наследени стилове от външен документ, няма да се държи по същия начин тук, защото iframe-ът е изолиран. Анимации с много дълги продължителности продължават да се изпълняват в preview iframe-а дори когато редакторът не е на фокус; спрете ги с animation-play-state, ако дебъгвате тайминг.

Кога да използвате този инструмент вместо код

Използвайте браузърния инструмент за еднократни експерименти, изолирани минимални възпроизвеждания или бързи демонстрации за обучение. В реален проект вашият dev сървър, hot module replacement и devtools за компоненти (React Refresh, Vue devtools) ви дават много по-богат цикъл на обратна връзка — използвайте този playground за скици, за които не искате да настройвате tooling.