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 spécifié (la dernière inspection) nœud DOM. En outre, vous pouvez envoyer votre code directement à CodePen ou jsFiddle. Profitez-en!
D'autres fonctionnalités
- nettoie HTML (supprimant les attributs, la fixation de l'indentation)
- optimise CSS pour le rendre lisible
- entièrement configurable (tous les filtres peut être désactivé)
- 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 le code sur GitHub.
La 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 origine des règles CSS (en venant de la CSS de fichiers sur le site web). Assez étonnamment, c'est très simple grâce à l' window.getMatchedCSSRules
, cependant, il ne fonctionne pas bien. Le problème était que nous étions en ne prenant que la partie HTML et CSS sélecteurs qui ont été la mise en correspondance dans le contexte de l'ensemble du document, n'ont pas de contrepartie dans le cadre 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
Ensuite, 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. Cela fonctionné très bien cependant j'ai trouvé que chacun de mes règles CSS a ~300 propriétés entières CSS illisible.
Problème 2 - suppression des propriétés avec des valeurs par défaut
S'avère qu' getComputedStyle
de retours possible toutes les propriétés CSS et les valeurs calculées pour un élément donné. Certains d'entre eux où vide, certains avaient le navigateur par défaut et les valeurs. 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 était de comparer les styles d'élément provenant 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. La prochaine chose que j'ai remarqué est que les propriétés ayant abréviation équivalente ont été inutilement imprimés (par exemple, il existait border: solid black 1px
puis border-color: black;
, border-width: 1px
itd.).
Problème 3 - ne gardant que la sténographie de propriétés
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. Nombre de propriétés dans chaque règle a été significativement plus faible après cette opération, mais j'ai trouvé que j'seuil ont beaucoup d' -webkit-
préfixé propriétés que je n'ai jamais entendre parler de (-webkit-app-region
? -webkit-text-emphasis-position
?).
Problème 4 - enlever le préfixe propriétés
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 faire pour vérifier ce que, 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. Ensuite, problème que j'ai repéré est que même les règles CSS sont répétés à plusieurs reprises (par exemple, pour chaque <li>
, avec exactement le même styles, il y avait la même règle dans le CSS de sortie créé).
Problème 5 - la combinaison de même des règles CSS
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 #LI_1, #LI_2 {...}
. Depuis que j'ai été heureux avec le résultat, j'ai déménagé à HTML. Il ressemblait à un gâchis, surtout parce qu' outerHTML
de la propriété conserve formaté exactement comme il a été retourné par le serveur.
Problème 6 - nettoyage et fixation de l'indentation de code HTML
La seule chose que du code HTML prises à partir d' outherHTML
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'avais raison (jquery-propre). Qui plus est, j'ai inutiles attributs de retrait supplémentaires (style
, data-ng-repeat
etc.).
Problème 7 - filtres de rupture CSS
Depuis il ya une chance que, dans certaines circonstances, les filtres mentionnés ci-dessus peuvent briser CSS dans l'extrait de code que j'ai fait tous facultatifs. Vous pouvez les désactiver à partir du menu paramètres.