SnappySnippet
W końcu znalazłem trochę czasu na stworzenie tego narzędzia. Możesz zainstalować SnappySnippet z Github. Umożliwia łatwą ekstrakcję HTML + CSS z określonego (ostatnio sprawdzonego) węzła DOM. Ponadto możesz wysłać kod bezpośrednio do CodePen lub JSFiddle. Cieszyć się!
Inne funkcje
- czyści HTML (usuwając niepotrzebne atrybuty, naprawiając wcięcia)
- optymalizuje CSS, aby był czytelny
- w pełni konfigurowalny (wszystkie filtry można wyłączyć)
- Prace z
::beforei ::afterpseudo-elementy
- ładny interfejs użytkownika dzięki projektom Bootstrap i Flat-UI
Kod
SnappySnippet jest oprogramowaniem typu open source, a kod można znaleźć na GitHub .
Realizacja
Ponieważ dużo się nauczyłem, robiąc to, postanowiłem podzielić się niektórymi problemami, które napotkałem, i moimi rozwiązaniami, być może ktoś uzna to za interesujące.
Pierwsza próba - getMchedCSSRules ()
Na początku próbowałem pobrać oryginalne reguły CSS (pochodzące z plików CSS na stronie internetowej). Co zadziwiające, jest to bardzo proste window.getMatchedCSSRules(), jednak nie wyszło dobrze. Problem polegał na tym, że braliśmy tylko część selektorów HTML i CSS, które pasowały w kontekście całego dokumentu, a które nie pasowały już w kontekście fragmentu kodu HTML. Ponieważ analizowanie i modyfikowanie selektorów nie wydawało się dobrym pomysłem, zrezygnowałem z tej próby.
Druga próba - getComputedStyle ()
Potem zacząłem od czegoś, co sugerowało @CollectiveCognition - getComputedStyle(). Jednak naprawdę chciałem oddzielić CSS od HTML zamiast wstawiania wszystkich stylów.
Problem 1 - oddzielenie CSS od HTML
Rozwiązanie tutaj nie było zbyt piękne, ale dość proste. Przypisałem identyfikatory do wszystkich węzłów w wybranym poddrzewie i użyłem tego identyfikatora do stworzenia odpowiednich reguł CSS.
Problem 2 - usuwanie właściwości z wartościami domyślnymi
Przypisywanie identyfikatorów do węzłów działało dobrze, jednak dowiedziałem się, że każda z moich reguł CSS ma ~ 300 właściwości, dzięki czemu cały CSS jest nieczytelny.
Okazuje się, że getComputedStyle()zwraca wszystkie możliwe właściwości CSS i wartości obliczone dla danego elementu. Niektóre z nich były puste, niektóre miały domyślne wartości przeglądarki. Aby usunąć wartości domyślne, musiałem je najpierw pobrać z przeglądarki (a każdy tag ma inne wartości domyślne). Rozwiązaniem było porównanie stylów elementu pochodzącego ze strony internetowej z tym samym elementem wstawionym do pustego <iframe>. Logika była taka, że nie ma arkuszy stylów w pustych <iframe>, więc każdy element, który tam dodałem, miał tylko domyślne style przeglądarki. W ten sposób mogłem pozbyć się większości nieistotnych właściwości.
Problem 3 - zachowanie tylko właściwości skróconych
Następne, co zauważyli, że właściwości o równoważnych skróconą niepotrzebnie drukowany (na przykład tam border: solid black 1px, a następnie border-color: black;, border-width: 1pxitd.).
Aby rozwiązać ten problem, po prostu stworzyłem listę właściwości, które mają skrócone odpowiedniki i odfiltrowałem je z wyników.
Problem 4 - usunięcie prefiksowanych właściwości
Liczba obiektów w każdej reguły był znacząco niższy po poprzedniej operacji, ale odkryłem, że parapet miałem dużo -webkit-prefiksem właściwości, które nigdy nie słyszeć o ( -webkit-app-region? -webkit-text-emphasis-position?).
Zastanawiałem się, czy powinienem trzymać żadnej z tych właściwości, ponieważ niektóre z nich wydawało się przydatna ( -webkit-transform-origin, -webkit-perspective-originetc.). Jednak nie wymyśliłem, jak to sprawdzić, a ponieważ wiedziałem, że przez większość czasu te właściwości są po prostu śmieciami, postanowiłem je wszystkie usunąć.
Problem 5 - połączenie tych samych reguł CSS
Kolejnym problemem, który zauważyłem, było to, że te same reguły CSS są powtarzane w kółko (np. Dla każdej <li>z dokładnie tymi samymi stylami istniała ta sama reguła w utworzonym wyjściu CSS).
Chodziło tylko o porównanie zasad i połączenie tych, które miały dokładnie ten sam zestaw właściwości i wartości. W rezultacie zamiast #LI_1{...}, #LI_2{...}mam #LI_1, #LI_2 {...}.
Problem 6 - czyszczenie i poprawianie wcięć HTML
Ponieważ byłem zadowolony z wyniku, przeszedłem na HTML. Wyglądało to na bałagan, głównie dlatego, że outerHTMLwłaściwość utrzymuje formatowanie dokładnie tak, jak zostało zwrócone z serwera.
Jedyny outerHTMLpotrzebny kod HTML, który był potrzebny, to proste formatowanie kodu. Ponieważ jest to coś dostępnego w każdym środowisku IDE, byłem pewien, że istnieje biblioteka JavaScript, która to robi. I okazuje się, że miałem rację (jquery-clean) . Co więcej, mam niepotrzebne usuwania atrybutów ( style, data-ng-repeatetc.).
Problem 7 - filtry łamiące CSS
Ponieważ istnieje szansa, że w niektórych okolicznościach wspomniane powyżej filtry mogą uszkodzić CSS we fragmencie, wszystkie z nich uczyniłem opcjonalnymi. Możesz je wyłączyć w menu Ustawienia .
