Playground de CSS
HTML
CSS
Pré-visualização
Detalhes técnicos
Como Funciona o Playground de CSS
O Que a Ferramenta Faz
O Playground de CSS dá-lhe dois editores — HTML e CSS — e uma pré-visualização num iframe em sandbox que atualiza à medida que escreve. Use-o para prototipar componentes, testar seletores, validar estilos de fallback ou criar reproduções mínimas para relatórios de bugs. O alternador 'Repor estilos' adiciona um pequeno reset de CSS (box-sizing, predefinições sensatas para o body) para que o seu CSS não esteja a lutar contra os valores predefinidos do browser.
Casos de Uso Comuns para Programadores
Programadores frontend constroem exemplos isolados de componentes para partilhar em pull requests ou documentação. Designers experimentam gradientes, sombras, tempos de animação e funcionalidades modernas como grid, subgrid e container queries. Educadores demonstram conceitos de CSS a alunos sem criar contas no CodePen. Engenheiros de QA reproduzem bugs apenas de CSS de forma limpa num ambiente controlado.
Formatos, Tipos ou Variantes de Dados
O editor de HTML aceita qualquer conteúdo do body. O editor de CSS aceita qualquer CSS moderno — propriedades personalizadas, nesting, @container, @layer, etc. A saída é um documento HTML completo e autónomo com a tag meta viewport (opcional) e um bloco de estilos inline, pronto a copiar como ficheiro completo. O iframe de pré-visualização usa sandbox='allow-same-origin' para permitir URLs relativas enquanto bloqueia scripts e submissões de formulários.
Erros Comuns e Casos Limite
URLs externas em @font-face e instruções @import podem ser bloqueadas pelo sandbox do iframe. Colar CSS que depende de estilos herdados de um documento exterior não se comportará da mesma forma aqui porque o iframe está isolado. Animações com durações muito longas continuam a correr no iframe de pré-visualização mesmo quando o editor não está focado; pause-as com animation-play-state se estiver a depurar temporização.
Quando Usar Esta Ferramenta vs Código
Use a ferramenta no browser para experiências pontuais, reproduções mínimas isoladas ou demonstrações rápidas de ensino. Num projeto real, o seu servidor de desenvolvimento, hot module replacement e devtools de componentes (React Refresh, Vue devtools) dão-lhe um ciclo de feedback muito mais rico — use este playground para esboços para os quais não quer configurar tooling.