CSS Playground
Escribe CSS y previsualiza el resultado junto al código.
¿Qué es un laboratorio de CSS?
Un laboratorio de CSS empareja una hoja de estilos con una página renderizada para que veas el efecto de una regla mientras la escribes. No hay que compilar, ni montar un servidor, ni recargar: la vista previa se reconstruye con tu marcado y tu CSS.
Sirve para comprobar dudas de cascada y especificidad, probar un diseño de grid o flex en tres anchos de ventana y encontrar la declaración que un navegador descartó en silencio.
Cómo probar CSS en el laboratorio
- Escribe tus reglas en el panel CSS, o pega la hoja de estilos que estás depurando.
- Edita el panel HTML para cambiar el marcado al que se aplican los estilos.
- Deja Ejecución automática activada para refrescar la vista previa mientras escribes, o desactívala y pulsa Ejecutar.
- Revisa el panel de comprobación CSS: los errores de análisis indican línea y columna, y los nombres de propiedad mal escritos se listan aparte.
- Usa Formatear o Minificar para reescribir la hoja, y luego cópiala o descárgala como styles.css.
Ejemplos de edición CSS
Propiedad mal escrita
p {
colour: #333;
}Comprobación CSS: propiedad desconocida: colour
Faltan dos puntos
a { color red }Comprobación CSS: se esperaban dos puntos (línea 1, columna 19)
Minificar
a {
color: red;
margin: 0 1px;
}a{color:red;margin:0 1px}Laboratorio de CSS frente a DevTools
| Criterio | Este laboratorio | Inspector de DevTools |
|---|---|---|
| Punto de partida | Una hoja en blanco que pegas | Una página ya cargada |
| Informe de errores | Errores de análisis línea a línea antes de renderizar | Las declaraciones no válidas se descartan en silencio |
| Compartir | Copia o descarga el CSS exacto | Copia cada regla a mano |
| Prueba de diseño | Anchos de escritorio, tableta y móvil | Arrastra el viewport y recorre los puntos de ruptura |
| Mejor para | Aislar una regla, aprender especificidad | Depurar estilos que ya están en producción |
Preguntas frecuentes del laboratorio de CSS
¿Se sube mi hoja de estilos a algún sitio?
No. El análisis de css-tree, la minificación y el render de la vista previa se ejecutan en la pestaña del navegador.
¿Por qué el comprobador acepta CSS no válido?
CSS está diseñado para tolerar errores: el navegador salta una declaración que no puede analizar y conserva el resto de la hoja. css-tree informa de esos mismos errores recuperables en lugar de fallar con todo el archivo.
¿Qué propiedades se consideran desconocidas?
Cualquier nombre que no esté en la especificación CSS y no empiece por -- ni por un prefijo de proveedor como -webkit-. Esas dos categorías se omiten a propósito.
¿Minificar cambia lo que hace el CSS?
No. Regenera la hoja desde el árbol analizado, sin comentarios ni espacio insignificante. Si el CSS no se puede analizar, Minificar lo deja tal cual.
¿Puedo usar @media y selectores modernos?
Sí. La vista previa es un motor de navegador real, así que las media queries, las container queries, :has() y el anidamiento se comportan igual que en producción.
¿Puedo llevarme el resultado?
Copiar CSS pone la hoja en el portapapeles, Descargar .css guarda styles.css y Descargar página guarda un HTML completo con los estilos incrustados.