La Html Tool

Html Tool toma el HTML que pegas, le aplica una limpieza o una conversión y te da el resultado para copiarlo. Todos pueden usarla. Esta guía muestra cómo, y qué hace cada opción.

Usa la herramienta

1. Elige Html Tool en el grupo Herramientas del menú lateral.
2. En Tipo, elige qué quieres hacer con el HTML.
3. Si la opción que elegiste los necesita, aparecen los campos Url CSS y URL. Llénalos.
4. Pega tu código en HTML.
5. Haz clic en Generar resultado.

El resultado aparece en un cuadro debajo del formulario. Es de solo lectura: selecciónalo y cópialo para usarlo en otro lugar. La herramienta no guarda nada y no cambia ninguna página en la web; al salir de la página se pierde el resultado.

Cada vez que haces clic en Generar resultado, primero se borran el resultado y los avisos anteriores, así que si falta un campo o está mal ves solo lo que hay que corregir. Cuando la herramienta no puede descargar una dirección, un aviso encima del resultado lo dice, una vez por cada dirección.

Tipo y HTML siempre son obligatorios. Url CSS debe ser un enlace que empiece con http:// o https:// a un archivo que termine en .css, que puede ir seguido de parámetros, como https://example.com/app.css?v=2. URL debe ser un enlace completo que empiece con http:// o https://, como https://example.com/page.

Qué puede descargar la herramienta

Algunas opciones descargan hojas de estilo: la de Url CSS o las que enlaza el HTML. La herramienta solo descarga de direcciones web públicas. Espera como máximo 10 segundos por cada una, sigue como máximo 3 redirecciones y se detiene en 5 MB. Cuando una descarga falla, el aviso de arriba del resultado muestra uno de estos mensajes, y el resultado se genera de todos modos, sin esa hoja de estilo:

• La dirección … no está permitida.: la dirección no es una dirección http o https pública, como una de una red privada, o una redirección lleva a una.
• No se pudo descargar la dirección ….: el sitio no respondió a tiempo, respondió con un error o redirigió más de 3 veces.
• La dirección … supera el tamaño permitido.: el archivo pesa más de 5 MB.

Qué hace cada tipo

Estos solo necesitan el HTML:

• Ltr/Rtl Cleaner para Tailwind CSS: conserva la versión de izquierda a derecha de cada clase y quita la de derecha a izquierda.
• Desminificador de HTML: acomoda el HTML minificado con un elemento por línea y sangría.
• Convertidor de estilos en línea a clases Tailwind CSS: convierte los atributos style en clases de Tailwind cuando puede. Cuando convierte un elemento, reemplaza el atributo style completo por las clases, así que se pierde cualquier propiedad para la que no tenía clase. Un elemento que no puede convertir en absoluto conserva su style.
• Combinador de CSS: descarga cada hoja de estilo enlazada desde su dirección, las reúne junto con los bloques <style> en una sola hoja de estilo y los reemplaza por un enlace a ella. Ese archivo lo guarda el producto con un nombre tomado de su contenido, así que cada resultado enlaza su propia hoja de estilo: volver a usar el combinador, o cualquiera de las opciones de página de abajo, que también combinan hojas de estilo, no cambia la que enlaza un resultado anterior.
• Remover los scripts de HTML: quita los scripts, los bloques noscript y los iframes. También borra cualquier texto que parezca código, aunque sea texto visible en la página: se quita todo texto que tenga la palabra function, una flecha => o ${.
• Remover comentarios del código: quita los comentarios de HTML, los comentarios {{-- --}} de Blade, los comentarios /* */ y las líneas completas que empiezan con dos barras (//). Lo demás se queda como está: el texto después de --, como una variable de CSS, y dos barras a mitad de línea, como en un enlace, no se quitan.

Estos también necesitan Url CSS, el enlace a la hoja de estilo compilada de la página. La herramienta descarga la hoja de estilo desde la dirección que le das:

• Extractor de configuración de colores Tailwind CSS: encuentra los colores con nombre que usa el HTML, como primary, y devuelve sus escalas de color: la completa y solo los tonos usados.
• Inliner de colores semánticos Tailwind CSS: reemplaza los colores con nombre por el color real que representan.
• Corrección de clases incorrectas de Tailwind CSS: conserva las clases válidas de Tailwind, convierte las demás a Tailwind cuando la hoja de estilo las define y quita las que no.
• Convertir clases faltantes a Tailwind CSS: convierte a clases de Tailwind cada clase que define la hoja de estilo, y quita las que no puede convertir.

Estos necesitan URL, la dirección de donde viene el HTML, para completar los enlaces relativos:

• Resolutor de URLs relativas: convierte en enlaces completos los enlaces relativos a imágenes, hojas de estilo y otros archivos.
• Convertir página a Tailwind CSS: convierte una página entera. Primero acomoda el HTML, completa sus enlaces con la URL y combina sus hojas de estilo; después quita sus scripts, conserva solo el cuerpo y convierte sus clases y estilos en línea a Tailwind.
• Limpiar página de Tailwind CSS completa: limpia una página entera ya hecha con Tailwind. Primero acomoda el HTML, quita sus comentarios, completa sus enlaces con la URL y combina sus hojas de estilo; después quita sus scripts, conserva solo el cuerpo, quita las clases de derecha a izquierda, reemplaza los colores con nombre, corrige las clases incorrectas y convierte los estilos en línea.

Limpiar página de Tailwind CSS por bloques necesita tanto Url CSS como URL. Limpia un fragmento de página de la misma forma, sin quedarse solo con el cuerpo. Lee los colores y las clases de la hoja de estilo en Url CSS; si esa dirección no se puede descargar, el aviso de arriba del resultado la nombra.

Las dos opciones de página entera leen los colores y las clases de la hoja de estilo que combinaron a partir de la página. Si la página no tiene ninguna hoja de estilo, el resultado dice No css detected.