Jak większość programistów stron internetowych, czasami lubię patrzeć na źródła stron internetowych, aby zobaczyć, jak zbudowane są ich znaczniki. Narzędzia takie jak Firebug i Chrome Developer Tools ułatwiają sprawdzenie kodu, ale jeśli chcę skopiować izolowaną sekcję i bawić się nią lokalnie, trudno byłoby skopiować wszystkie pojedyncze elementy i związane z nimi css. I prawdopodobnie tyle samo pracy, aby zapisać całe źródło i wyciąć niepowiązany kod.

Byłoby wspaniale, gdybym mógł kliknąć prawym przyciskiem myszy węzeł w Firebug i mieć opcję „Zapisz HTML + CSS dla tego węzła”. Czy takie narzędzie istnieje? Czy można rozszerzyć Firebug lub Chrome Developer Tools, aby dodać tę funkcję?

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 .

Początkowo zadałem to pytanie, szukając rozwiązania Chrome (lub FireFox), ale natknąłem się na tę funkcję w narzędziach programistycznych Internet Explorer. Prawie to, czego szukam (oprócz javascript)

Wynik:

Przeglądarki Webkit (nie jestem pewien co do FireBug) pozwalają na łatwe kopiowanie HTML elementu, więc jest to jedna z części procesu.

Uruchomienie tego (w konsoli javascript) przed skopiowaniem kodu HTML elementu spowoduje przeniesienie wszystkich obliczonych stylów dla podanego elementu nadrzędnego, a także wszystkich elementów podrzędnych, do atrybutu stylu wbudowanego, który będzie wówczas dostępny jako część HTML .

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

Jest to całkowity hack i będziesz miał wiele atrybutów „śmieci”, aby przejść, ale przynajmniej powinieneś zacząć.

Stworzyłem to narzędzie wiele lat temu w tym samym celu:
http://www.betterprogramming.com/htmlclipper.html

Możesz go używać i ulepszać.

Można to zrobić za pomocą wtyczki Firebug o nazwie notatnik

Możesz sprawdzić opcję Javascript w ustawieniach

Edytować:

To też może pomóc

Firequark to rozszerzenie Firebug, które wspomaga proces zgarniania ekranu HTML. Firequark automatycznie wyodrębnia selektor css dla jednego lub wielu węzłów HTML ze strony internetowej za pomocą Firebug (wtyczki programistycznej dla przeglądarki Firefox). Wygenerowany selektor css można podać jako dane wejściowe do skrobaczek ekranu HTML, takich jak Scrapi, w celu wyodrębnienia informacji. Firequark został zbudowany, aby uwolnić moc selektora css do korzystania ze zgarniania ekranu HTML.

divclip to zaktualizowana wersja htmlclippera Florentina Sardana

z nowoczesnymi ulepszeniami: ES5, HTML5, CSS o zasięgu ...

możesz programowo wyodrębnić stylizowany div za pomocą:

var html = require("divclip").bySel(".article-body");
console.log(html);

Cieszyć się.

Nie są potrzebne żadne wtyczki. Można to zrobić bardzo prosto za pomocą natywnych narzędzi programistycznych programu Internet Explorer 11 za pomocą jednego kliknięcia, bardzo czysto. Po prostu kliknij element i sprawdź ten element, kliknij prawym przyciskiem myszy jakiś blok i wybierz „Kopiuj element ze stylami”. Możesz to zobaczyć na poniższym obrazku.

Zapewnia bardzo czysty kod css

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

Ostatnio stworzyłem rozszerzenie chrome „eXtract Snippet” do kopiowania sprawdzanego elementu, html i tylko odpowiednich zapytań css i multimediów ze strony. Zauważ, że dałoby to ci właściwy CSS

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

Nie mam pojęcia o narzędziu z jednym rozwiązaniem, ale możesz jednocześnie korzystać z rozszerzenia Firebug i Web Developer .

Użyj Firebug, aby skopiować potrzebną sekcję HTML (Inspect Element) i Web Developer, aby zobaczyć, który css jest powiązany z elementem (Calling Web Developer „View Style Information” - działa jak „Inspect Element” Firebuga, ale zamiast pokazywać HTML znacznik pokazuje skojarzony CSS z tym znacznikiem).

To nie jest dokładnie to, czego chcesz (jedno kliknięcie na wszystko), ale jest dość blisko, a przynajmniej intuicyjne.

Potrzebuję również tej funkcji w Firebug! Do tego czasu innym podejściem jest używanie tej usługi online do usuwania klas i konwertowania css na style wbudowane.

http://clipboardjs.com robi to i całkiem dobrze. Chociaż twoje oczekiwania na to, że skopiowana wersja będzie dokładnie taka jak w oryginale, więc możesz z nią grać i uczyć się, może nie być realistyczne.

Wystarczy skopiować żądaną część ze strony i wkleić w edytorze wysiwyg. Sprawdź źródło HTML, klikając przycisk „Źródło” na pasku narzędzi edytora.

Znalazłem ten najłatwiejszy sposób, kiedy pracowałem na stronie Drupal. Używam wysiwyg CKeditor.

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

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

Zaadaptowałem najlepiej głosowaną odpowiedź jako przeciągalną broszurę.

Wystarczy odwiedzić tę stronę i przeciągnąć przycisk „Uruchom kod jQuery” na pasek zakładek.

Tam jest plugin Firefox, który zapisuje HTML strony, CSS itp., Ale nie widziałem takiego, który dokonuje częściowego zapisu.

Pamiętam, że IE 5.5 miał to, czego szukałeś;)

Przejrzałem wszystkie narzędzia wymienione tutaj jako odpowiedź. Ale dają powtarzający się, brudny HTML CSS z piękną twarzą, na którą patrzysz. Nie dają ci JS.

Co robię:

1. Najpierw filtruję reklamy, które nie są wymagane na stronie
2. Następnie zapisz pełną stronę internetową wraz z łączeniem zasobów.
3. Usuń niepotrzebne pliki HTML, CSS i JS
4. ostrożnie rozłączaj zasoby jeden po drugim.