html - exemple - jquery




Outils pour copier sélectivement HTML+CSS+JS à partir de sites existants (11)

SnappySnippet

J'ai finalement trouvé du temps pour créer cet outil. Vous pouvez installer SnappySnippet partir du Chrome Web Store. Il permet une extraction HTML + CSS aisée depuis le noeud DOM spécifié (le dernier inspecté). De plus, vous pouvez envoyer votre code directement à CodePen ou JSFiddle. Prendre plaisir!

Autres caractéristiques

  • nettoie HTML (suppression des attributs inutiles, correction de l'indentation)
  • optimise CSS pour le rendre lisible
  • entièrement configurable (tous les filtres peuvent être désactivés)
  • fonctionne avec ::before et ::after pseudo-éléments
  • belle interface utilisateur grâce aux projets Bootstrap et Flat-UI

Code

SnappySnippet est open source, et vous pouvez trouver le code sur GitHub .

la mise en oeuvre

Depuis que j'ai beaucoup appris en faisant cela, j'ai décidé de partager certains des problèmes que j'ai vécus et mes solutions, peut-être que quelqu'un trouvera ça intéressant.

Première tentative - getMatchedCSSRules ()

Au début, j'ai essayé de récupérer les règles CSS d'origine (provenant de fichiers CSS sur le site Web). Assez étonnamment, c'est très simple grâce à window.getMatchedCSSRules() , cependant, ça n'a pas bien fonctionné. Le problème était que nous ne prenions qu'une partie des sélecteurs HTML et CSS qui correspondaient dans le contexte du document entier, qui ne correspondaient plus dans le contexte d'un extrait de code HTML. Depuis l'analyse et la modification des sélecteurs ne semblait pas une bonne idée, j'ai abandonné cette tentative.

Deuxième tentative - getComputedStyle ()

Ensuite, j'ai commencé à partir de quelque chose que @CollectiveCognition a suggéré - getComputedStyle() . Cependant, je voulais vraiment séparer le HTML du formulaire CSS au lieu d'ajouter tous les styles.

Problème 1 - séparer CSS de HTML

La solution ici n'était pas très belle mais assez simple. J'ai affecté des identifiants à tous les nœuds du sous-arbre sélectionné et utilisé cet ID pour créer les règles CSS appropriées.

Problème 2 - suppression des propriétés avec des valeurs par défaut

Assigner des identifiants aux nœuds a bien fonctionné, mais j'ai découvert que chacune de mes règles CSS avait ~ 300 propriétés rendant l'ensemble de la CSS illisible.
Il s'avère que getComputedStyle() renvoie toutes les propriétés et valeurs CSS possibles calculées pour l'élément donné. Certains d'entre eux étaient vides, d'autres avaient des valeurs par défaut du navigateur. Pour supprimer les valeurs par défaut, je devais d'abord les récupérer dans le navigateur (et chaque tag a des valeurs par défaut différentes). La solution consistait à comparer les styles de l'élément provenant du site Web avec le même élément inséré dans un <iframe> vide. La logique ici était qu'il n'y a pas de feuilles de style dans un <iframe> vide, donc chaque élément que j'ai ajouté là-bas avait seulement des styles de navigateur par défaut. De cette façon, j'ai pu me débarrasser de la plupart des propriétés qui étaient insignifiantes.

Problème 3 - ne conserver que les propriétés sténographiques

La chose suivante que j'ai repérée était que les propriétés ayant un raccourci équivalent ont été imprimées inutilement (par exemple, il y avait border: solid black 1px et ensuite border-color: black; border-width: 1px itd.).
Pour résoudre ce problème, j'ai simplement créé une liste de propriétés qui ont des équivalents raccourcis et les filtrer à partir des résultats.

Problème 4 - suppression des propriétés préfixées

Le nombre de propriétés dans chaque règle était significativement plus bas après l'opération précédente, mais j'ai trouvé que j'avais encore beaucoup de propriétés préfixées -webkit- dont je n'ai jamais entendu parler ( -webkit-app-region ? -webkit-text-emphasis-position ?).
Je me demandais si je devais conserver l'une de ces propriétés car certaines d'entre elles semblaient utiles ( -webkit-transform-origin , -webkit-perspective-origin etc.). Je n'ai pas compris comment vérifier cela, et comme je savais que la plupart du temps ces propriétés ne sont que des ordures, j'ai décidé de les supprimer toutes.

Problème 5 - combiner les mêmes règles CSS

Le problème suivant que j'ai repéré est que les mêmes règles CSS sont répétées encore et encore (par exemple pour chaque <li> avec exactement les mêmes styles, il y avait la même règle dans la sortie CSS créée).
C'était juste une question de comparer les règles les unes avec les autres et de combiner celles-ci qui avaient exactement le même ensemble de propriétés et de valeurs. Par conséquent, au lieu de #LI_1{...}, #LI_2{...} j'ai #LI_1, #LI_2 {...} .

Problème 6 - nettoyer et corriger l'indentation de HTML

Depuis que j'étais content du résultat, je suis passé au HTML. Cela ressemblait à un désordre, principalement parce que la propriété outerHTML garde formaté exactement comme il a été renvoyé du serveur.
La seule chose nécessaire pour le code HTML de outerHTML était un simple reformatage de code. Comme c'est quelque chose de disponible dans chaque IDE, j'étais sûr qu'il y a une bibliothèque JavaScript qui fait exactement cela. Et il se trouve que j'avais raison (jquery-clean) . De plus, j'ai enlevé des attributs inutiles ( style , data-ng-repeat etc.).

Problème 7 - filtres cassant CSS

Puisqu'il ya une chance que dans certaines circonstances les filtres mentionnés ci-dessus puissent casser CSS dans l'extrait, je les ai tous rendus facultatifs. Vous pouvez les désactiver dans le menu Paramètres .

Comme la plupart des développeurs web, j'ai parfois envie de regarder la source des sites Web pour voir comment leur balisage est construit. Des outils comme Firebug et Chrome Developer Tools facilitent l'inspection du code, mais si je veux copier une section isolée et la jouer localement, il serait difficile de copier tous les éléments individuels et leurs css associés. Et probablement autant de travail pour sauver la source entière et découper le code sans rapport.

Ce serait génial si je pouvais faire un clic droit sur un nœud dans Firebug et avoir une option "Enregistrer HTML + CSS pour ce nœud". Un tel outil existe-t-il? Est-il possible d'étendre Firebug ou Chrome Developer Tools pour ajouter cette fonctionnalité?


Cela peut être fait par Firebug Plugin appelé scrapbook

Vous pouvez vérifier l'option Javascript dans le paramètre

Modifier:

This peut aussi aider

Firequark est une extension de Firebug pour aider le processus de grattage d'écran HTML. Firequark extrait automatiquement le sélecteur css pour un ou plusieurs nœuds html à partir d'une page web en utilisant Firebug (un plugin de développement web pour Firefox). Le sélecteur css généré peut être donné en entrée aux scrapers html comme Scrapi pour extraire des informations. Firequark est conçu pour libérer la puissance du sélecteur css pour l'utilisation du grattage de l'écran html.



Il n'y a pas de plugins nécessaires. Cela peut être fait très simplement avec les outils de développement natifs d'Internet Explorer 11 en un seul clic, très propre. Juste sur un élément et inspecter cet élément, et faites un clic droit sur un bloc et choisissez "Copier l'élément avec des styles". Vous pouvez le voir dans l'image ci-dessous.

Il fournit le code CSS très propre, comme

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

J'ai adapté la réponse la mieux votée comme un bookmarklet de dragabble.

Il suffit de visiter cette page et faites glisser le bouton "Exécuter le code jQuery" sur votre barre de favoris.


J'ai aussi besoin de cette fonctionnalité sur Firebug! D'ici là, une autre approche consiste à utiliser this service en ligne pour supprimer des classes et convertir le CSS en styles en ligne.


J'ai d'abord posé cette question que je cherchais une solution Chrome (ou FireFox), mais je suis tombé sur cette fonctionnalité dans les outils de développement Internet Explorer. À peu près ce que je recherche (sauf pour le javascript)

Résultat:


J'ai parcouru tous les outils mentionnés comme réponse ici. Mais ils donnent des CSS HTML répétés et sales avec un beau visage que vous étiez en train de fixer. Ils ne vous donnent pas JS.

Ce que je fais:

  1. Je filtre d'abord les publicités qui ne sont pas obligatoires sur la page
  2. Ensuite, enregistrez la page Web complète avec les ressources de liaison.
  3. Supprimez les fichiers HTML, CSS et JS inutiles
  4. Conservez soigneusement les ressources unlinitoring.

Un outil avec une solution unique pour cela, je ne suis pas au courant, mais vous pouvez utiliser l' extension Firebug et Web Developer en même temps.

Utilisez Firebug pour copier la section html dont vous avez besoin (Inspect Element) et Web Developer pour voir quel css est associé à un élément (Calling Web Developer "Voir les informations de style" - il fonctionne comme "Inspect Element" de Firebug, mais au lieu d'afficher le html le balisage montre le CSS associé avec ce balisage).

Ce n'est pas exactement ce que vous voulez (un clic pour tout), mais c'est assez proche, et au moins intuitif.


http://clipboard.com fait cela et très bien. Bien que votre attente que la version copiée soit exactement comme dans l'original pour que vous puissiez jouer et apprendre avec, peut-être pas réaliste.


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;
}
});

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





google-chrome-devtools