Песочница CSS

Как работает CSS Playground

Что делает инструмент

CSS Playground даёт вам два редактора — HTML и CSS — и предпросмотр в изолированном iframe, который обновляется по мере ввода. Используйте его, чтобы прототипировать компоненты, тестировать селекторы, проверять fallback-стили или собирать минимальные воспроизведения для баг-репортов. Переключатель 'Reset styles' добавляет небольшой CSS reset (box-sizing, разумные значения по умолчанию для body), чтобы ваш CSS не конфликтовал с браузерными дефолтами.

Распространенные сценарии использования для разработчиков

Фронтенд-разработчики собирают изолированные примеры компонентов, чтобы делиться ими в 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 могут блокироваться песочницей iframe. Если вставить CSS, который зависит от унаследованных стилей внешнего документа, здесь он будет вести себя иначе, потому что iframe изолирован. Анимации с очень большой длительностью продолжают выполняться в iframe предпросмотра даже когда редактор не в фокусе; при отладке тайминга приостанавливайте их с помощью animation-play-state.

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

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