Vista previa de HTML / sandbox gratis

Cuando una caja de arena HTML rápida ayuda

A veces solo necesitas ver cómo es un fragmento. Un estudiante que aprende HTML puede probar una tabla o una lista. Un email marketer puede comprobar cómo un bloque de marcas y estilos en línea renderiza. Un agente de soporte puede pegar un fragmento de un ticket para ver lo que el cliente ve sin abrir el sitio completo.

También es útil cuando recibes marcado de otra persona y quieres verlo sin ejecutar nada que contenga. La vista previa bloquea scripts y peticiones externas, por lo que puede mirar el diseño de forma segura antes de decidir dónde utilizar el código.

Ejemplo trabajado: peinar un botón

Borrar el cuadro HTML y escribir un elemento de botón con la clase cta y el texto Comprar ahora. En el cuadro CSS, añádase una regla para.cta con un fondo de #0a7a55, texto blanco, relleno de 12px por 20px, sin borde y un radio de borde de 6px.

La vista previa muestra un botón redondeado verde con blanco Comprar ahora texto, sentado cerca de la parte superior izquierda del marco. Cambia el radio a 20px y las esquinas se vuelven completamente redondeadas a medida que teclea. Al hacer clic en el botón no hace nada, porque las acciones de formulario y los scripts están bloqueados.

Ahora añade una etiqueta de imagen que apunte a una foto alojada. No se cargará. Reemplazar la dirección con una pequeña imagen URI de datos y aparecerá, porque solo se permiten datos e imágenes de blob.

Cómo funciona la vista previa aislada

Tu HTML se coloca dentro del cuerpo de una página nueva, y tu CSS se coloca en un elemento de estilo en su cabeza. Esa página se muestra en un iframe con el atributo sandbox establecido a su forma más restrictiva, que desactiva scripts, envío de formularios, pop-ups y navegación de la página principal.

También se añade una política de seguridad de los contenidos. Permite estilos en línea, además de imágenes de datos y direcciones blob, y bloquea todo lo demás, incluyendo hojas de estilos externas, fuentes web, scripts y peticiones de red. Las etiquetas de estilo escritas dentro del cuadro HTML siguen funcionando, como muestra el ejemplo inicial.

Errores comunes a evitar

No espera que la vista previa coincida con tu sitio en vivo. No tiene acceso a su hoja de estilos del sitio, fuentes web o scripts, y los estilos predeterminados del navegador se aplican, incluyendo un pequeño margen alrededor del cuerpo. Copia las reglas CSS relevantes en la caja CSS si necesita una coincidencia más cercana.

Evita pegar una página completa con enlaces externos y luego suponiendo que esté rota. Las imágenes, fuentes e iconos que faltan suelen ser peticiones bloqueadas, no errores en el marcado. También recuerde que un fragmento que se ve aquí todavía necesita pruebas en navegadores reales y en el contexto en el que planea publicarlo.