Outils de manière sélective copie HTML+CSS+JS à partir de sites existants

SnappySnippet

J'ai enfin trouvé du temps pour créer cet outil. Vous pouvez installer SnappySnippet à partir du Chrome Web Store. Il permet de faciliter le HTML+CSS extraction à partir de cette (dernière inspection) nœud DOM. En outre, vous pouvez envoyer votre code directement à CodePen ou JSFiddle. Profitez-en!

D'autres caractéristiques

• nettoie HTML (supprimant les attributs, la fixation 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 à Bootstrap & Plat-UI projets

Code

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

Mise en œuvre

Depuis que j'ai appris beaucoup de choses tout en faisant ceci, j'ai décidé de partager quelques-uns des problèmes que j'ai vécu et mes solutions, peut-être que quelqu'un va trouver ça intéressant.

Première tentative - getMatchedCSSRules()

Au début, j'ai essayé de récupérer l'original de règles CSS (en venant de la CSS de fichiers sur le site web). Assez étonnamment, c'est très simple grâce à window.getMatchedCSSRules(), cependant, il ne fonctionne pas bien. Le problème était que nous étions de prendre une partie seulement de l'HTML et le CSS sélecteurs qui ont été la mise en correspondance dans le contexte de l'ensemble du document, qui ne correspondaient pas plus dans le contexte d'un fragment de code HTML. Depuis l'analyse et la modification de sélecteurs de ne pas sembler une bonne idée, j'ai renoncé à cette tentative.

Deuxième tentative - getComputedStyle()

Puis, j'ai commencé à partir de quelque chose que @CollectiveCognition suggéré - getComputedStyle(). Cependant, j'ai vraiment voulu se séparer CSS HTML du formulaire au lieu de l'in-lining tous les styles.

Problème 1 - séparer les CSS HTML

La solution ici n'était pas très belle, mais assez simple. J'ai assigné les Id de tous les nœuds dans le sous-arbre utilisé que l'ID d'établir des règles CSS.

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

L'attribution des Identifiants pour les nœuds fonctionné très bien, cependant j'ai trouvé que chacun de mes règles CSS a ~300 propriétés de l'ensemble de la CSS illisible.

S'avère que getComputedStyle() renvoie tous les possibles des propriétés CSS et les valeurs calculées pour l'élément donné. Certains d'entre eux où vide, certains avaient navigateur valeurs par défaut. Pour supprimer les valeurs par défaut, j'ai dû les obtenir à partir de l'explorateur d'abord (et chaque balise a différentes valeurs par défaut). La solution a été de comparer les styles de l'élément à venir à partir du site web avec le même élément inséré dans un vide <iframe>. La logique ici est que il n'y a pas de feuilles de style dans un vide <iframe>, de sorte que chaque élément que j'ai ajouté il y avait seulement des styles par défaut du navigateur. De cette façon, j'ai été en mesure de se débarrasser de la plupart des propriétés qui ont été insignifiants.

Problème 3 - ne gardant que la sténographie de propriétés

Prochaine chose que j'ai remarqué est que les propriétés ayant abréviation équivalente ont été inutilement imprimés (par exemple, il n'y a border: solid black 1px et puis border-color: black;, border-width: 1px itd.).

Pour résoudre cela, j'ai simplement créé une liste de propriétés qui ont abréviation équivalents et filtrée à partir de résultats.

Problème 4 - enlever le préfixe propriétés

Le nombre de propriétés dans chaque règle a été significativement plus faible après l'opération précédente, mais j'ai trouvé que j'seuil eu beaucoup de -webkit- préfixé propriétés que je n'ai jamais entendre parler de (-webkit-app-region? -webkit-text-emphasis-position?).

Je me demandais si je ne devais en garder l'une de ces propriétés, car certains d'entre eux m'a semblé utile (-webkit-transform-origin, -webkit-perspective-origin etc.). Je n'ai pas compris comment vérifier cela, cependant, et depuis que je savais que la plupart du temps, ces propriétés sont juste des ordures, j'ai décidé de les supprimer tous.

Problème 5 - la combinaison de même des règles CSS

Le problème suivant, j'ai remarqué est que les mêmes règles CSS sont répétés à plusieurs reprises (par exemple, pour chaque <li>, avec les mêmes styles, il y avait la même règle dans le CSS de sortie créé).

C'était juste une question de comparaison règles les uns avec les autres et en combinant ces qui avait exactement le même ensemble de propriétés et de valeurs. En conséquence, au lieu de #LI_1{...}, #LI_2{...} j'ai eu #LI_1, #LI_2 {...}.

Problème 6 - nettoyage et fixation de l'indentation du code HTML

Depuis que j'ai été heureux avec le résultat, j'ai déménagé à HTML. Il ressemblait à un gâchis, surtout parce que le outerHTML bien garde formaté exactement comme il a été retourné par le serveur.

La seule chose que du code HTML prises de outerHTML besoin d'un code simple reformatage. Puisque c'est quelque chose de disponible dans tous les IDE, j'étais sûr qu'il y est une bibliothèque JavaScript qui fait exactement cela. Et il s'avère que J'ai été à droite (jquery-clean). Qui plus est, j'ai inutiles attributs de retrait supplémentaires (style, data-ng-repeat etc.).

Problème 7 - filtres de rupture CSS

Car il est possible que, dans certaines circonstances, les filtres mentionnés ci-dessus peuvent briser CSS dans l'extrait de code, j'ai fait tous facultatifs. Vous pouvez les désactiver à partir de la Paramètres menu.

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

Résultat:

Cela peut être fait par Firebug Plugin appelé album

Vous pouvez vérifier l'option Javascript dans la mise en

Edit:

Cette peut aussi aider à

Firequark est une extension Firebug
pour faciliter le processus de HTML Écran
Grattage. Firequark automatiquement
extraits sélecteur css pour un seul ou
plusieurs html nœud(s) à partir d'une page web
à l'aide de Firebug (développement web
plugin pour Firefox). Le sélecteur css
généré peut être fournie en entrée à
html écran grattoirs comme Scrapi à
extraire de l'information. Firequark est
construit à exploiter la puissance de css
sélecteur pour l'utilisation de html écran
grattage.

Il n'y a pas de plugins nécessaires. Cela peut être fait très simplement avec Internet Explorer 11 natif Outils de développement avec juste un clic, très propre. Juste sur un élément et d'inspecter l'élément et cliquez-droit sur certains 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;
}

Un outil avec une seule solution pour ce que je suis ignorant, mais vous pouvez utiliser Firebug et Extension Web Developer en même temps.

Utiliser Firebug pour copier le code html de l'article dont vous avez besoin (Inspecter l'Élément) et Développeur Web pour voir ce qui css est associé à un élément (l'Appel de Développeur Web "Style d'Affichage de l'Information" - il fonctionne comme Firebug la "Inspecter l'Élément", mais au lieu de montrer le balisage html, il montre les associés CSS 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.

J'ai aussi besoin de cette fonctionnalité sur Firebug! Jusqu'alors, une autre approche est d'utiliser cette service en ligne pour supprimer les classes et convertir le fichier css pour les styles en ligne.

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()

Il y a un le plugin firefox qui sauve l'ensemble de la page HTML, CSS, etc.. mais je n'ai pas vu un seul qui n'partielle enregistrer.

Je me souviens IE 5.5 a ce que vous cherchez bien 😉