Wyodrębnianie tylko pliku CSS używanego na określonej stronie

Załóżmy, że masz dynamicznie generowaną witrynę, nad którą pracowało zbyt wiele osób w przeszłości i obecnie, a teraz masz kolekcję wspólnych arkuszy stylów, które zawierają ponad 20 000 linii CSS. W ogóle nie jest zorganizowany, istnieje kilka selektorów opartych na klasach i identyfikatorach, ale także zbyt wiele selektorów opartych na tagach. A potem powiedzmy, że masz 100 szablonów, które używają tych stylów, za pośrednictwem jakiegoś kontrolera.

Czy jest jakieś narzędzie, coś, co działa jak Firebug, które możesz wskazać na adres URL i które określi wszystkie odpowiednie selektory CSS dla tej strony i zrzuci je do pliku? Zasadniczo jakiś sposób na rozdzielenie wspólnych arkuszy stylów na części strona po stronie.

Wcześniej korzystałem z Dust-Me Selectors, który jest wtyczką do przeglądarki Firefox. Jest bardzo łatwy w użyciu i wszechstronny, ponieważ utrzymuje połączoną listę na wielu stronach, na których używane są wartości CSS.

Wadą jest to, że nie byłem w stanie zautomatyzować go do pajania całej witryny, więc ostatecznie użyłem go tylko na kluczowych stronach / szablonach mojej witryny. Niemniej jest to bardzo przydatne.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

W przeciwieństwie do powyższego komentarza, Dust-Me Selectors 2.2 jest kompatybilny z Firefoksem 3.6 (właśnie go zainstalowałem).

Bez wątpienia najlepszym narzędziem, które faktycznie robi dokładnie to, co chcesz, pobierając tylko używany CSS na stronie i pozwalając po prostu skopiować go do schowka, jest to rozszerzenie Chrome CSS Używane

Ładny przykład obrazu

Te wyglądają obiecująco:

• Unused-CSS.com - usługa, która przeszukuje Twoją witrynę i przesyła Ci wyniki e-mailem
• Wykorzystanie CSS - dodatek Firebug

(Nie dla przeglądarki Firefox, ale może to komuś pomoże)

Jeśli pracujesz na Chrome, możesz użyć tego rozszerzenia:

Usuń i połącz CSS ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )

• umożliwia pobranie połączonego pliku CSS ze wszystkimi używanymi stylami
• pokazuje nieużywane style w wyskakującym okienku
• zawiera wygenerowane style

Natknąłem się na Uncss-Online - nieoficjalny serwer, bardzo wygodny do testowania lub jednorazowego użytku! Myślę, że to najlepsze narzędzie, z jakim się spotkałem.

UnCSS to narzędzie, które usuwa nieużywane CSS z arkuszy stylów. Działa na wielu plikach i obsługuje CSS z wstrzyknięciem Javascript. Można go wykorzystać w ten sposób:

• Skopiuj i wklej swój kod HTML i CSS do podanych pól
• Kliknij przycisk
• Poczekaj, aż magia się wydarzy
• Nieużywany CSS zniknął, weź resztę i użyj go!

Możesz sprawdzić ich stronę Github, aby uzyskać inne zaawansowane sposoby korzystania z tego narzędzia

SnappySnippet

Istnieje reklama typu open source w chrome o nazwie SnappySnippet, którą uważam za dużo lepszą niż inne, po prostu rozszerza już dostępne narzędzia programistyczne w Chrome. Możesz nawet wyodrębnić tylko jedną część strony z wszystkimi odpowiednimi plikami CSS. Spójrz na ten post dotyczący stackoverflow

Oto moje rozwiązanie wykorzystujące JavaScript:

    var css = [];
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i];
        var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
        if (rules)
        {
            css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
            for (var j=0; j<rules.length; j++)
            {
                var rule = rules[j];
                if ('cssText' in rule)
                    css.push(rule.cssText);
                else
                    css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
            }
        }
    }
    var cssInline = css.join('\n')+'\n';

Na koniec cssInlinejest tekstowa lista wszystkich arkuszy strony i ich zawartości.

Przykład:

    /* Stylesheet : http://example.com/cache/css/javascript.css */
    .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
    .javascript { color: rgb(172, 172, 172); }
    .javascript .imp { font-weight: bold; color: red; }

    /* Stylesheet : http://example.com/i/main_master.css */
    html { }
    body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
    a { color: rgb(204, 0, 51); text-decoration: none; }
    a:hover { color: rgb(153, 153, 153); text-decoration: none; }
    .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
    #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
    #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
    #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
    #header a { color: rgb(255, 255, 255); }
    #menu_2 { height: 290px; }

    /* Stylesheet : [inline styles] */
    .hidden { display: none; }

• uncss: Znajdź nieużywany CSS - narzędzie cli, używa phantomjs i wykonuje JS na stronie, może być używane na adresach URL
• grunt-uncss - działa tylko na plikach statycznych
• ( krytyczny css - wyodrębnia CSS dla elementów widocznych w oknie przeglądarki)

Sprawdź PurifyCSS i to dla tych, którzy potrafią obsługiwać CLI lub Gulp / Grunt / Webpack

Możesz usunąć nieużywany styl z pojedynczej strony lub wielu stron lub z całego projektu, nawet jeśli klasy są wstrzykiwane przez JavaScript.

Jeśli możesz wygooglować, istnieje mnóstwo zasobów, z których możesz dowiedzieć się o PurifyCSS.

To rozszerzenie do Firefoksa prawdopodobnie rozwiąże Twój problem, Dust-Me Selectors . Jest też mała aplikacja komputerowa o nazwie CssCleaner lub CssHelper, ale nie udało mi się znaleźć do niej linku ... (po prostu mam ją tutaj na moim komputerze, pobraną dawno temu do podobnego zadania)

Jeśli masz do czynienia z pojedynczymi stronami, możesz również użyć mojego bookmarkletu, aby szybko pobrać tylko ten CSS, który jest faktycznie używany przez stronę internetową:

1. Przejdź tutaj (jeśli ten link jest uszkodzony, możesz go również pobrać z pastebin ).
2. Przeciągnij duży przycisk pod „Pobierz zakładkę” na pasek narzędzi zakładek.

Otóż ​​to. Teraz, gdy chcesz hermetyzować stronę statyczną (tj. Aby była przenośna lub jeśli zamierzasz wyświetlać ją z własnego elementu iframe), po prostu kliknij zakładkę, a wszystkie używane arkusze CSS na bieżącej stronie zostaną wyświetlone w nakładce. Kliknij cień, aby zamknąć nakładkę.

Zaletą tego rozwiązania jest to, że obsługuje responsywne strony, ponieważ zapytania o media są również wyodrębniane. Dodatkowo zapytania o media są sortowane według rozmiaru widocznego obszaru (np. @media (max-width: 767px)Pojawią się po @media (max-width: 1023px) ).

Jeśli zajdzie taka potrzeba, mogę również dodać opcję zminimalizowania wygenerowanego CSS. Ponieważ używam tego bookmarkletu tylko na własne potrzeby, nie był on szeroko testowany, więc prosimy o zgłaszanie wszelkich problemów w komentarzach.

UWAGA: Aby ten bookmarklet działał z plikami lokalnymi w przeglądarce Chrome, dodaj --allow-file-access-from-filesdo celu skrótu Chrome. Przykład:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Spróbuj użyć tego narzędzia, które jest po prostu prostym skryptem js https://github.com/shashwatsahai/CSSExtractor/ To narzędzie pomaga w uzyskaniu CSS z określonej strony z listą wszystkich źródeł aktywnych stylów i zapisaniu go w formacie JSON ze źródłem jako klucz i reguły jako wartość. Ładuje cały CSS z linków href i informuje o wszystkich zastosowanych stylach. Możesz zapisać dane wyjściowe w pliku JSON pod dowolną nazwą.

Hmm ... Rzuciłbym w to brutalną siłę, wyodrębniając różne selektory CSS za pomocą analizy pliku CSS po stronie serwera, a następnie uruchamiając każdy z nich jako selektor jQuery w przeglądarce. Niezbyt eleganckie, ale powinno działać?

Od września 2020 roku to pytanie ma już prawie 10 lat. Większość dostarczonych rozwiązań już nie działa lub powiązane projekty zniknęły.

Jednak pytanie jest nadal niezwykle istotne, ponieważ Google używa teraz szybkości strony jako jednego z wskaźników priorytetyzacji.

Po przeanalizowaniu wszystkich wymienionych linków znalazłem purgecss.com . Wydaje się, że jest to najlepsza opcja, aby wyczyścić nieużywane CSS w nowoczesnych aplikacjach internetowych / SPA przy użyciu Angular, React, Vue itp. Istnieje również integracja kompilacji z PostCSS, Webpack, Grunt i Gulp.

Ponadto wydaje się, że UnCSS nadal jest utrzymywany. Jest tak potężny jak PurgeCSS, ale nie jest tak zintegrowany z procesami kompilacji ani jednostronicowymi aplikacjami javascript.

Możesz również użyć http://getcssusedinapage.com, aby uzyskać kod CSS używany na stronie. Jest darmowy, szybki i zapewnia wiele szczegółów wraz ze zminimalizowanym i zoptymalizowanym kodem CSS, który możesz po prostu skopiować i wkleić w swojej witrynie