SnappySnippet
Finalmente encontré algo de tiempo para crear esta herramienta. Puede instalar SnappySnippet desde Github. Permite una extracción fácil de HTML + CSS desde el nodo DOM especificado (la última inspección). Además, puede enviar su código directamente a CodePen o JSFiddle. ¡Disfrutar!
Otras características
- limpia HTML (elimina atributos innecesarios, arregla sangría)
- optimiza CSS para que sea legible
- totalmente configurable (todos los filtros se pueden apagar)
- trabaja con
::beforey ::afterpseudo-elementos
- interfaz de usuario agradable gracias a Bootstrap y Flat-UI proyectos
Código
SnappySnippet es de código abierto, y puedes encontrar el código en GitHub .
Implementación
Como he aprendido mucho mientras hacía esto, he decidido compartir algunos de los problemas que he experimentado y mis soluciones, tal vez alguien lo encuentre interesante.
Primer intento: getMatchedCSSRules ()
Al principio, intenté recuperar las reglas CSS originales (procedentes de archivos CSS en el sitio web). Sorprendentemente, esto es muy simple gracias window.getMatchedCSSRules(), sin embargo, no funcionó bien. El problema era que solo estábamos tomando una parte de los selectores HTML y CSS que coincidían en el contexto de todo el documento, que ya no coincidían en el contexto de un fragmento de HTML. Dado que analizar y modificar selectores no parecía una buena idea, renuncié a este intento.
Segundo intento: getComputedStyle ()
Entonces, he comenzado a partir de algo que @CollectiveCognition sugirió - getComputedStyle(). Sin embargo, realmente quería separar el HTML del formulario CSS en lugar de incluir todos los estilos.
Problema 1: separación de CSS de HTML
La solución aquí no era muy hermosa, pero bastante sencilla. Asigné ID a todos los nodos en el subárbol seleccionado y usé esa ID para crear reglas CSS apropiadas.
Problema 2: eliminar propiedades con valores predeterminados
Asignar ID a los nodos funcionó muy bien, sin embargo, descubrí que cada una de mis reglas CSS tiene ~ 300 propiedades que hacen que todo el CSS sea ilegible.
Resulta que getComputedStyle()devuelve todas las propiedades y valores CSS posibles calculados para el elemento dado. Algunos de ellos estaban vacíos, otros tenían valores predeterminados del navegador. Para eliminar los valores predeterminados, primero tenía que obtenerlos del navegador (y cada etiqueta tiene diferentes valores predeterminados). La solución fue comparar los estilos del elemento proveniente del sitio web con el mismo elemento insertado en un vacío <iframe>. La lógica aquí es que no hay hojas de estilo en un espacio vacío <iframe>, por lo que cada elemento que he agregado allí solo tenía estilos de navegador predeterminados. De esta forma pude deshacerme de la mayoría de las propiedades que eran insignificantes.
Problema 3: mantener solo las propiedades abreviadas
Lo siguiente que descubrí fue que las propiedades con equivalentes abreviados se imprimieron innecesariamente (por ejemplo, había border: solid black 1pxy luego border-color: black;, border-width: 1pxitd.).
Para resolver esto, simplemente he creado una lista de propiedades que tienen equivalentes abreviados y los he filtrado de los resultados.
Problema 4: eliminar propiedades prefijadas
El número de propiedades en cada regla se reduce significativamente después de la operación anterior, pero he encontrado que me tenía alféizar de una gran cantidad de -webkit-propiedades prefijadas que he nunca se oye de ( -webkit-app-region? -webkit-text-emphasis-position?).
Me preguntaba si debería conservar alguna de estas propiedades porque algunas parecían útiles ( -webkit-transform-origin, -webkit-perspective-originetc.). Sin embargo, no he descubierto cómo verificar esto, y como sabía que la mayoría de las veces estas propiedades son solo basura, decidí eliminarlas todas.
Problema 5: combinar las mismas reglas CSS
El siguiente problema que descubrí fue que las mismas reglas CSS se repiten una y otra vez (por ejemplo, para cada uno <li>con exactamente los mismos estilos, se creó la misma regla en la salida CSS).
Esto era solo una cuestión de comparar reglas entre sí y combinarlas que tenían exactamente el mismo conjunto de propiedades y valores. Como resultado, en lugar de lo #LI_1{...}, #LI_2{...}que tengo #LI_1, #LI_2 {...}.
Problema 6: limpieza y reparación de sangría de HTML
Como estaba contento con el resultado, me mudé a HTML. Parecía un desastre, principalmente porque la outerHTMLpropiedad lo mantiene formateado exactamente como fue devuelto por el servidor.
Lo único que se outerHTMLnecesitaba del código HTML era un simple reformateo de código. Como es algo disponible en cada IDE, estaba seguro de que hay una biblioteca de JavaScript que hace exactamente eso. Y resulta que tenía razón (jquery-clean) . Además, tengo atributos de eliminación de atributos innecesarios adicionales ( style, data-ng-repeatetc.).
Problema 7: filtros que rompen CSS
Dado que existe la posibilidad de que en algunas circunstancias los filtros mencionados anteriormente puedan romper CSS en el fragmento, los he hecho todos opcionales. Puede deshabilitarlos desde el menú Configuración .
