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 ofrece 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 reproducciones mínimas para reportes de errores. El interruptor "Restablecer estilos" añade un pequeño reset de CSS (box-sizing, valores predeterminados sensatos para body) para que tu CSS no esté luchando contra los valores por defecto del navegador.
Casos de uso comunes para desarrolladores
Los desarrolladores frontend crean ejemplos de componentes aislados 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 muestran conceptos de CSS a estudiantes sin tener que crear cuentas de CodePen. Los ingenieros de QA reproducen errores solo de CSS de forma limpia en un entorno controlado.
Formatos de datos, tipos o variantes
El editor HTML acepta cualquier contenido del body. El editor 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; páusalas con animation-play-state si estás depurando el timing.
Cuándo usar esta herramienta vs código
Usa la herramienta del navegador para experimentos puntuales, reproducciones mínimas aisladas o demostraciones 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 bucle de feedback mucho más rico; usa este playground para bocetos para los que no quieres configurar tooling.