Playground de CSS
HTML
CSS
Vista previa
Detalles técnicos
Cómo funciona el Playground de CSS
Qué hace la herramienta
El Playground de CSS te da dos editores — HTML y CSS — y una vista previa en un iframe aislado que se actualiza mientras escribes. Úsalo para prototipar componentes, probar selectores, validar estilos de fallback o crear repros mínimos para reportes de bugs. El interruptor "Restablecer estilos" agrega un pequeño reset de CSS (box-sizing, valores predeterminados sensatos para body) para que tu CSS no esté peleando con los valores por defecto del navegador.
Casos de uso comunes para desarrolladores
Los desarrolladores frontend crean ejemplos aislados de componentes para compartir en pull requests o documentación. Los diseñadores experimentan con degradados, sombras, tiempos de animación y funciones modernas como grid, subgrid y container queries. Los educadores demuestran conceptos de CSS a estudiantes sin tener que crear cuentas de CodePen. Los ingenieros de QA reproducen bugs solo de CSS de forma limpia en un entorno controlado.
Formatos, tipos o variantes de datos
El editor de HTML acepta cualquier contenido del body. El editor de CSS acepta cualquier CSS moderno: propiedades personalizadas, anidamiento, @container, @layer, etc. La salida es un documento HTML completo e independiente con la etiqueta meta viewport (opcional) y un bloque de estilos inline, listo para copiar como un archivo completo. El iframe de vista previa usa sandbox='allow-same-origin' para permitir URLs relativas mientras bloquea scripts y envíos de formularios.
Errores comunes y casos límite
Las URLs externas de @font-face y las sentencias @import pueden quedar bloqueadas por el sandbox del iframe. Pegar CSS que depende de estilos heredados de un documento externo no se comportará igual aquí porque el iframe está aislado. Las animaciones con duraciones muy largas siguen ejecutándose en el iframe de vista previa incluso cuando el editor no está enfocado; ponlas en pausa con animation-play-state si estás depurando tiempos.
Cuándo usar esta herramienta vs código
Usa la herramienta del navegador para experimentos de una sola vez, reproducciones mínimas aisladas o demos rápidas de enseñanza. En un proyecto real, tu servidor de desarrollo, el hot module replacement y las devtools de componentes (React Refresh, Vue devtools) te dan un ciclo de retroalimentación mucho más rico; usa este playground para bocetos para los que no quieres configurar tooling.