span - style html

Herramientas para copiar de forma selectiva HTML+CSS+JS desde sitios existentes

Question

Como la mayoría de los desarrolladores web, ocasionalmente me gusta mirar la fuente de los sitios web para ver cómo se construye su marca. Las herramientas como Firebug y Chrome Developer Tools facilitan la inspección del código, pero si quiero copiar una sección aislada y jugar con ella localmente, sería un dolor copiar todos los elementos individuales y su css asociado. Y probablemente tanto trabajo para guardar la fuente completa y cortar el código no relacionado.

Sería genial si pudiera hacer clic con el botón derecho en un nodo en Firebug y tener la opción "Guardar HTML + CSS para este nodo". ¿Existe tal herramienta? ¿Es posible extender Firebug o Chrome Developer Tools para agregar esta función?

Answer 1

SnappySnippet

Finalmente encontré algo de tiempo para crear esta herramienta. Puede instalar SnappySnippet desde Chrome Web Store. Permite la extracción fácil de HTML + CSS desde el nodo DOM especificado (última inspección). Además, puede enviar su código directamente a CodePen o JSFiddle. ¡Disfrutar!

Otras características

• limpia HTML (eliminando atributos innecesarios, arreglando la sangría)
• optimiza CSS para hacerlo legible
• totalmente configurable (todos los filtros se pueden desactivar)
• Trabaja con ::before y ::after pseudo-elementos.
• buena interfaz de usuario gracias a los proyectos Bootstrap y Flat-UI

Código

SnappySnippet es de código abierto, y puedes encontrar el código en GitHub .

Implementación

Como aprendí mucho mientras hacía esto, he decidido compartir algunos de los problemas que he experimentado y mis soluciones para ellos, tal vez a alguien le resulte interesante.

Primer intento - getMatchedCSSRules ()

Al principio, he intentado recuperar las reglas CSS originales (provenientes de archivos CSS en el sitio web). Sorprendentemente, esto es muy simple gracias a window.getMatchedCSSRules() , sin embargo, no funcionó bien. El problema era que estábamos tomando solo una parte de los selectores de 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 código HTML. Como el análisis y la modificación de los selectores no parecían ser una buena idea, renuncié a este intento.

Segundo intento - getComputedStyle ()

Luego, comencé a partir de algo que sugirió getComputedStyle() : getComputedStyle() . Sin embargo, realmente quería separar el formato HTML de CSS en lugar de incluir todos los estilos.

Problema 1 - separando CSS de HTML

La solución aquí no era muy hermosa pero bastante directa. He asignado ID a todos los nodos en el subárbol seleccionado y utilicé esa ID para crear reglas CSS adecuadas.

Problema 2 - Eliminar propiedades con valores por defecto

La asignación de ID a los nodos funcionó bien, sin embargo, descubrí que cada una de mis reglas de CSS tiene ~ 300 propiedades que hacen que todo el CSS sea ilegible.
Resulta que getComputedStyle() devuelve todas las propiedades CSS posibles y los valores calculados para el elemento dado. Algunos de ellos estaban vacíos, algunos tenían valores predeterminados del navegador. Para eliminar los valores predeterminados, primero tenía que obtenerlos desde el 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 <iframe> vacío. La lógica aquí es que no hay hojas de estilo en un <iframe> vacío, por lo que cada elemento que he agregado tiene solo estilos de navegador predeterminados. De esta manera pude deshacerme de la mayoría de las propiedades que eran insignificantes.

Problema 3 - mantener solo propiedades de taquigrafía

Lo siguiente que descubrí fue que las propiedades que tenían una taquigrafía equivalente se imprimieron innecesariamente (por ejemplo, había un border: solid black 1px y luego border-color: black; border-width: 1px itd.).
Para resolver esto, simplemente he creado una lista de propiedades que tienen equivalentes abreviados y las he filtrado de los resultados.

Problema 4 - Eliminar propiedades prefijadas

El número de propiedades en cada regla fue significativamente menor después de la operación anterior, pero he descubierto que -webkit- muchas propiedades con prefijo -webkit- las que nunca he oído hablar ( -webkit-app-region ? -webkit-text-emphasis-position ?).
Me preguntaba si debería conservar alguna de estas propiedades porque algunas de ellas parecían útiles ( -webkit-transform-origin , -webkit-perspective-origin etc.). 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 - combinando las mismas reglas CSS

El siguiente problema que detecté fue que las mismas reglas de CSS se repiten una y otra vez (por ejemplo, para cada <li> con los mismos estilos, había la misma regla en la salida de CSS creada).
Esto era solo una cuestión de comparar reglas entre sí y combinarlas que tuvieran exactamente el mismo conjunto de propiedades y valores. Como resultado, en lugar de #LI_1{...}, #LI_2{...} obtuve #LI_1, #LI_2 {...} .

Problema 6 - limpiar y corregir la sangría de HTML

Como estaba contento con el resultado, pasé a HTML. Parecía un desastre, principalmente porque la propiedad outerHTML mantiene formateado exactamente como lo devolvió el servidor.
Lo único que necesitaba el código HTML tomado de outerHTML era un cambio de formato de código simple. Ya que está disponible en todos los 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 la eliminación de atributos innecesarios ( style , data-ng-repeat etc.).

Problema 7 - Filtros rompiendo 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 .

Answer 2

Últimamente creé una extensión de Chrome "eXtract Snippet" para copiar el elemento inspeccionado, html y solo las consultas relevantes de css y medios de una página. Tenga en cuenta que esto le daría el CSS relevante real

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

Answer 3

¡También necesito esta característica en Firebug! Hasta entonces, otro enfoque es utilizar this servicio en línea para eliminar clases y convertir el css a estilos en línea.

Answer 4

Esto puede ser hecho por Firebug Plugin llamado scrapbook

Puede marcar la opción de Javascript en la configuración

Editar:

This también puede ayudar

Firequark es una extensión de Firebug para ayudar al proceso de raspado de pantalla HTML. Firequark extrae automáticamente el selector css para uno o varios nodos HTML de una página web utilizando Firebug (un complemento de desarrollo web para Firefox). El selector de CSS generado se puede dar como una entrada a los raspadores de pantalla html como Scrapi para extraer información. Firequark está diseñado para liberar el poder del selector css para el uso del raspado de pantalla html.

Answer 5

Hay un complemento de Firefox que guarda el HTML, CSS, etc. de toda la página, pero no he visto uno que haga un guardado parcial.

Recuerdo que IE 5.5 tenía lo que buscabas, aunque;)

Answer 6

He adaptado la respuesta más votada como un bookmarklet de arrastre.

Simplemente visite esta página y arrastre el botón "Ejecutar código jQuery" a su barra de marcadores.

Answer 7

He creado esta herramienta hace años con el mismo propósito:
http://www.betterprogramming.com/htmlclipper.html

Le invitamos a utilizarlo y mejorarlo.

Answer 8

He pasado por todas las herramientas mencionadas como respuesta aquí. Pero dan repetidas y sucias HTML CSS con hermosa cara que mirabas fijamente. Ellos no te dan JS.

Lo que hago:

1. Primero filtraré los anuncios que no sean requeridos en la página.
2. Luego, guarde la página web completa junto con los recursos de enlace.
3. Eliminar innecesarios HTML, CSS y JS
4. mantener los recursos de desvinculación uno por uno con cuidado.

Answer 9

Los navegadores Webkit (no estoy seguro acerca de FireBug) le permiten copiar el HTML de un elemento fácilmente, por lo que esa es una parte del proceso.

Ejecutar esto (en la consola de javascript) antes de copiar el HTML para un elemento moverá todos los estilos computados para el elemento primario dado, así como todos los elementos secundarios, en el atributo de estilo en línea que luego estará disponible como parte del HTML .

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

Es un hack total y tendrás un montón de atributos css "basura" con los que pasar, pero al menos deberías empezar.

Answer 10

No hay complementos necesarios. Se puede hacer de manera muy simple con las herramientas de desarrollador nativas de Internet Explorer 11 con solo un clic, muy limpio. Solo a la derecha en un elemento e inspeccione ese elemento, y haga clic con el botón derecho en algún bloque y elija "Copiar elemento con estilos". Puedes verlo en la imagen de abajo.

Proporciona el código css muy limpio, como

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Answer 11

No tengo conocimiento de una herramienta con una única solución para esto, pero puede usar Firebug y la extensión Web Developer al mismo tiempo.

Use Firebug para copiar la sección html que necesita (Inspeccionar elemento) y Web Developer para ver qué css está asociado con un elemento (Llamando al desarrollador web "Ver información de estilo" - funciona como el "Elemento de inspección" de Firebug, pero en lugar de mostrar el html marcado muestra el CSS asociado con ese marcado).

No es exactamente lo que quieres (un clic para todo), pero está bastante cerca, y al menos es intuitivo.

Answer 12

Originalmente hice esta pregunta. Estaba buscando una solución de Chrome (o Firefox), pero me topé con esta característica en las herramientas de desarrollo de Internet Explorer. Bastante más de lo que estoy buscando (excepto para el Javascript)

Resultado:

Answer 13

Simplemente copie la parte que desee de la página web y péguela en el editor wysiwyg. Verifique la fuente html haciendo clic en el botón "fuente" en la barra de herramientas del editor.

He encontrado esta forma más fácil cuando estaba trabajando en un sitio de Drupal. Yo uso wysiwyg CKeditor.

Answer 14

http://clipboard.com hace esto y bastante bien. Aunque su expectativa de que la versión copiada sea exactamente como en el original para que pueda jugar y aprender con ella, puede que no sea realista.

Answer 15

divclip es una versión actualizada de htmlclipper de Florentin htmlclipper

Con mejoras modernas: ES5, HTML5, CSS con ámbito ...

Puedes extraer programáticamente un div estilizado con:

var html = require("divclip").bySel(".article-body");
console.log(html);

Disfrutar.

Answer 16

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + '' { '' + cssRule.style.cssText.toLowerCase() + '' }'';
    }).join("/n");
    return style;
}
});

uso: $("#login_wrapper").getStyles()