SnappySnippet
Ich habe endlich Zeit gefunden, dieses Tool zu erstellen. Sie können SnappySnippet von Github installieren . Es ermöglicht eine einfache HTML + CSS-Extraktion vom angegebenen (zuletzt überprüften) DOM-Knoten. Darüber hinaus können Sie Ihren Code direkt an CodePen oder JSFiddle senden. Genießen!
Andere Eigenschaften
- Bereinigt HTML (Entfernen unnötiger Attribute, Korrigieren von Einrückungen)
- optimiert CSS, um es lesbar zu machen
- vollständig konfigurierbar (alle Filter können ausgeschaltet werden)
- arbeitet mit
::beforeund ::afterPseudoelementen
- schöne Benutzeroberfläche dank Bootstrap & Flat-UI- Projekten
Code
SnappySnippet ist Open Source und Sie können den Code auf GitHub finden .
Implementierung
Da ich dabei ziemlich viel gelernt habe, habe ich beschlossen, einige der aufgetretenen Probleme und meine Lösungen für sie zu teilen. Vielleicht wird es jemand interessant finden.
Erster Versuch - getMatchedCSSRules ()
Zuerst habe ich versucht, die ursprünglichen CSS-Regeln abzurufen (die aus CSS-Dateien auf der Website stammen). Erstaunlicherweise ist dies sehr einfach window.getMatchedCSSRules(), da es jedoch nicht gut geklappt hat. Das Problem war, dass wir nur einen Teil der HTML- und CSS-Selektoren verwendeten, die im Kontext des gesamten Dokuments übereinstimmten und im Kontext eines HTML-Snippets nicht mehr übereinstimmten. Da das Parsen und Ändern von Selektoren keine gute Idee zu sein schien, gab ich diesen Versuch auf.
Zweiter Versuch - getComputedStyle ()
Dann habe ich von etwas ausgegangen, das @CollectiveCognition vorgeschlagen hat - getComputedStyle(). Ich wollte jedoch unbedingt CSS von HTML trennen, anstatt alle Stile einzubinden.
Problem 1 - CSS von HTML trennen
Die Lösung hier war nicht sehr schön, aber recht einfach. Ich habe allen Knoten im ausgewählten Teilbaum IDs zugewiesen und diese ID verwendet, um entsprechende CSS-Regeln zu erstellen.
Problem 2 - Entfernen von Eigenschaften mit Standardwerten
Das Zuweisen von IDs zu den Knoten hat gut funktioniert, aber ich habe festgestellt, dass jede meiner CSS-Regeln ~ 300 Eigenschaften hat, die das gesamte CSS unlesbar machen.
Es stellt sich heraus, dass getComputedStyle()alle möglichen CSS-Eigenschaften und -Werte zurückgegeben werden, die für das angegebene Element berechnet wurden. Einige von ihnen waren leer, andere hatten Browser-Standardwerte. Um Standardwerte zu entfernen, musste ich sie zuerst vom Browser abrufen (und jedes Tag hat andere Standardwerte). Die Lösung bestand darin, die Stile des von der Website stammenden Elements mit demselben Element zu vergleichen, das in ein leeres Element eingefügt wurde <iframe>. Die Logik hier war, dass es in einem leeren <iframe>Format keine Stylesheets gibt , sodass jedes Element, das ich dort angehängt habe, nur Standardbrowserstile hatte. Auf diese Weise konnte ich die meisten unbedeutenden Eigenschaften beseitigen.
Problem 3 - nur Kurzschrift-Eigenschaften beibehalten
Das nächste , was ich entdeckt habe , war , dass die Eigenschaften Stenografie - Äquivalent wurden unnötig ausgedruckt (zB da war border: solid black 1pxund dann border-color: black;, border-width: 1pxitd.).
Um dies zu lösen, habe ich einfach eine Liste von Eigenschaften mit Kurzschriftäquivalenten erstellt und diese aus den Ergebnissen herausgefiltert.
Problem 4 - Entfernen von Präfixeigenschaften
Die Zahl der Objekte in jeder Regel deutlich nach der vorherige Operation niedriger war, aber ich habe festgestellt , dass ich eine Menge habe Sill -webkit-vorane Eigenschaften , dass ich nie hören von haben ( -webkit-app-region? -webkit-text-emphasis-position?).
Ich habe mich gefragt , ob ich eine dieser Eigenschaften behalten sollte , weil einige von ihnen schien nützlich ( -webkit-transform-origin, -webkit-perspective-originetc.). Ich habe jedoch nicht herausgefunden, wie ich das überprüfen kann, und da ich wusste, dass diese Eigenschaften die meiste Zeit nur Müll sind, habe ich beschlossen, sie alle zu entfernen.
Problem 5 - Kombinieren derselben CSS-Regeln
Das nächste Problem, das ich entdeckt habe, war, dass dieselben CSS-Regeln immer wieder wiederholt werden (z. B. wurde für jede <li>mit genau denselben Stilen dieselbe Regel in der erstellten CSS-Ausgabe erstellt).
Hier ging es nur darum, Regeln miteinander zu vergleichen und diese zu kombinieren, die genau die gleichen Eigenschaften und Werte hatten. Infolgedessen #LI_1{...}, #LI_2{...}bekam ich statt #LI_1, #LI_2 {...}.
Problem 6 - Bereinigen und Korrigieren des Einrückens von HTML
Da ich mit dem Ergebnis zufrieden war, wechselte ich zu HTML. Es sah nach einem Durcheinander aus, vor allem, weil die outerHTMLEigenschaft die Formatierung genau so beibehält, wie sie vom Server zurückgegeben wurde.
Das einzige, was HTML-Code outerHTMLbenötigt, war eine einfache Neuformatierung des Codes. Da es in jeder IDE verfügbar ist, war ich mir sicher, dass es eine JavaScript-Bibliothek gibt, die genau das tut. Und es stellt sich heraus, dass ich recht hatte (sehr sauber) . Was mehr ist, habe ich unnötige Attribute Entfernung extra (bekam style, data-ng-repeatetc.).
Problem 7 - Filter brechen CSS
Da unter bestimmten Umständen die oben genannten Filter möglicherweise CSS im Snippet beschädigen, habe ich alle optional gemacht. Sie können sie im Menü Einstellungen deaktivieren .
