CSS-пісочниця
HTML
CSS
Попередній перегляд
Технічні деталі
Як працює CSS Playground
Що робить інструмент
CSS Playground надає вам два редактори — HTML і CSS — та попередній перегляд у sandboxed iframe, який оновлюється під час введення. Використовуйте його для прототипування компонентів, тестування селекторів, перевірки fallback-стилів або створення мінімальних відтворень для баг-репортів. Перемикач 'Reset styles' додає невеликий CSS reset (box-sizing, розумні значення за замовчуванням для body), щоб ваш CSS не «боровся» зі стандартними стилями браузера.
Поширені сценарії використання для розробників
Frontend-розробники створюють ізольовані приклади компонентів, щоб ділитися ними в pull request’ах або документації. Дизайнери експериментують із градієнтами, тінями, таймінгами анімацій і сучасними можливостями на кшталт grid, subgrid та container queries. Викладачі демонструють CSS-концепції студентам без потреби заводити акаунти CodePen. QA-інженери чисто відтворюють баги, пов’язані лише з CSS, у контрольованому середовищі.
Формати даних, типи або варіанти
HTML-редактор приймає будь-який вміст body. CSS-редактор приймає будь-який сучасний CSS — custom properties, nesting, @container, @layer тощо. Вихід — повний автономний HTML-документ із meta viewport (опційно) та вбудованим блоком style, готовий до копіювання як повноцінний файл. Iframe попереднього перегляду використовує sandbox='allow-same-origin', щоб дозволити відносні URL, водночас блокуючи скрипти та відправлення форм.
Поширені помилки та крайові випадки
Зовнішні URL у @font-face та директиви @import можуть блокуватися sandbox-режимом iframe. Вставлений CSS, який залежить від успадкованих стилів із зовнішнього документа, тут поводитиметься інакше, бо iframe ізольований. Анімації з дуже довгою тривалістю продовжують виконуватися в iframe попереднього перегляду навіть тоді, коли редактор не в фокусі; призупиняйте їх через animation-play-state, якщо налагоджуєте таймінги.
Коли використовувати цей інструмент, а коли — код
Використовуйте браузерний інструмент для одноразових експериментів, ізольованих мінімальних відтворень або швидких навчальних демо. У реальному проєкті dev server, hot module replacement і devtools для компонентів (React Refresh, Vue devtools) дають набагато багатший цикл зворотного зв’язку — використовуйте цей playground для ескізів, під які не хочеться налаштовувати інструментарій.