Css Extrahieren

[CHaaks]

Moin Moin Liebe Forenteilnehmer,

kann mir jemand von Euch ein Tool empfehlen, mit dem ich die verwendeten CSS-Tags einer Seite extrahieren kann?

Also ich möchte gerne eine Webseite im Browser laden, und dann das Tool benutzen und raus kommt eine css Datei, die mir genau die css Definitionen gibt, die für diese Seite gelten.

Keine Angst, ich will damit nicht fremde Seiten kopieren.
Lediglich den eigenen Code aufräumen :)

Vielen Dank schon mal im Voraus.

MfG
CHaaks

[michaa]

Also ich möchte gerne eine Webseite im Browser laden, und dann das Tool benutzen und raus kommt eine css Datei, die mir genau die css Definitionen gibt, die für diese Seite gelten.

Warum etwas generieren, was längst im Browsercache liegt?

[CHaaks]

Also ich möchte gerne eine Webseite im Browser laden, und dann das Tool benutzen und raus kommt eine css Datei, die mir genau die css Definitionen gibt, die für diese Seite gelten.

Warum etwas generieren, was längst im Browsercache liegt?

Ich möchte im Ergebnis nur die CSS Selektoren haben, die im CSS-File definiert wurden. Nicht die, die zwar definiert wurden, aber für die Darstellung der aktuellen Seite nicht benötigt werden.

Mfg
CHaaks

[suit]

Wie wär's mit einem Entwicklungswerkzeug wie etwa Firebug oder Dragonfly?

[Phil]

Wie wär's mit einem Entwicklungswerkzeug wie etwa Firebug oder Dragonfly?

Da muss man aber dann jedes Element einzelnd selektieren und sich alles zusammenkopieren und letzendlich zusammenführen

[suit]

Wie wär's mit einem Entwicklungswerkzeug wie etwa Firebug oder Dragonfly?

Da muss man aber dann jedes Element einzelnd selektieren und sich alles zusammenkopieren und letzendlich zusammenführen

Wie stellst du dir denn vor, dass sämtliche CSS-Regeln extrahiert werden, und nur die die "zählen"?

[dave]

Hi,

Wie stellst du dir denn vor, dass sämtliche CSS-Regeln extrahiert werden, und nur die die "zählen"?

Mit Javascript die CSS-Dateien durchloopen, dann alle Regeln der Datei durchloopen und dann prüfen ob diese Regel auf mindestens ein Element auf der Seite zutrifft?

Probleme kriegt man mit Klassen die erst per Javascript unter bestimmten umständen gesetzt werden und mit Regeln die auf der aktuellen Seite nicht aber auf einer anderen sehr wohl verwendet werden.

Oder übersehe ich da ein Problem?

~dave

[suit]

Oder übersehe ich da ein Problem?

Andere Mütter haben auch schöne Töchter - mit anderen Worten: woher weißt du, welche CSS regeln nicht auch für andere HTML-Files gelten oder nur in Kombination mit anderen CSS-Regeln gelten, die ggf. in diesem Dokument garnicht zusätzlich eingebunden werden?

[dave]

Hi,

Andere Mütter haben auch schöne Töchter - mit anderen Worten: woher weißt du, welche CSS regeln nicht auch für andere HTML-Files gelten oder nur in Kombination mit anderen CSS-Regeln gelten, die ggf. in diesem Dokument garnicht zusätzlich eingebunden werden?

Hab ich das nicht schon selbst erwähnt?

Probleme kriegt man [...] mit Regeln die auf der aktuellen Seite nicht aber auf einer anderen sehr wohl verwendet werden.

Wobei man das ganze dann halt für jede Seite machen müsste, dann hat man nur noch das Problem mit den nur unter bestimmten Umständen gesetzen Klassen (z.B. mit JavaScript gesetzte).

~dave

[suit]

Andere Mütter haben auch schöne Töchter - mit anderen Worten: woher weißt du, welche CSS regeln nicht auch für andere HTML-Files gelten oder nur in Kombination mit anderen CSS-Regeln gelten, die ggf. in diesem Dokument garnicht zusätzlich eingebunden werden?

Hab ich das nicht schon selbst erwähnt?

Nicht ganz - dass ein CSS-Dokument nicht notwendigerweise nur für ein HTML-Dokument gelten muss, hast du z.B. nicht erwähnt.

Es können eben Regeln drin sein, die in anderen Dokumenten derselben Site (!= Seite) durchaus gebraucht werden.

Probleme kriegt man [...] mit Regeln die auf der aktuellen Seite nicht aber auf einer anderen sehr wohl verwendet werden.

Wobei man das ganze dann halt für jede Seite machen müsste, dann hat man nur noch das Problem mit den nur unter bestimmten Umständen gesetzen Klassen (z.B. mit JavaScript gesetzte).

Wie gesagt: sowas lässt sich sinnvoller per Hand machen - bei extrem großen Sites, ist ein modulares System mit bewusster Redundanz (aus Gründen der Wartbarkeit) oder nicht vermeidbar.

[ChrisB]

Hi,

Also ich möchte gerne eine Webseite im Browser laden, und dann das Tool benutzen und raus kommt eine css Datei, die mir genau die css Definitionen gibt, die für diese Seite gelten.

https://addons.mozilla.org/de/firefox/addon/css-usage/
“CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.”

MfG ChrisB

[CHaaks]

Hi,

Also ich möchte gerne eine Webseite im Browser laden, und dann das Tool benutzen und raus kommt eine css Datei, die mir genau die css Definitionen gibt, die für diese Seite gelten.

https://addons.mozilla.org/de/firefox/addon/css-usage/
“CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.”

MfG ChrisB

Moin,

vielen Dank für den Link.
Habe mir das Plugin installiert und es kommt dem, was ich möchte echt ziemlich nahe :) - vielen Dank.
Leider kann man das Ergebnis nicht speichern oder übersehe ich da etwas?

Hatte auch schon den dustmeselector ausprobiert. Der gibt zwar brav die nicht verwendeten Tags wieder, allerdings auch nur diese. Man müsste also, wenn man das Ergebnis hat, sozusagen zu Fuß alle Tags aus der CSS Datei manuell extrahieren.

Mit deinem Tool kann ich aber schon mal viel Anfangen, weil man sich damit wenigstens die CSS-Definitionen zusammenkopieren kann und einem somit schon vieeel Arbeit abgenommen wird.

Mfg
CHaaks

[CHaaks]

Ok,

Wenn man mal genau hinguckt, dann sieht man auch die Option "export cleaned css" :).

Ich bin absolut begeistert - genau nach so einem Tool habe ich gesucht.

Vielen Vielen Dank nochmal.

Mfg
CHaaks

[suit]

https://addons.mozilla.org/de/firefox/addon/css-usage/
“CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.”

Ich nehme an, du hast das noch nicht selbst ausprobiert :)

Meine Zweifel bez. der Funktion dieser Software sind stark - bei einer Site mit sagen wir 150 Einzelseiten mit verschiedenen Elementen muss man "alles durchklicken" um einen schitt zu bekommen. Dann hat man weiß man aber immer noch nicht, welche Regeln ggf. nur unter bestimmten umständen zu tragen kommen.

z.B. ein menschenlesbarer Warnhinweis beim einer Formularvalidierung der bestimmte Klassen verwendet (z.b. "notice" oder "warning"), die aber beim "normalen" Aufrufen der Seite nicht vorkommen.

[ChrisB]

Hi,

Ich nehme an, du hast das noch nicht selbst ausprobiert :)

Natürlich nicht :-)

Meine Zweifel bez. der Funktion dieser Software sind stark - bei einer Site mit sagen wir 150 Einzelseiten mit verschiedenen Elementen muss man "alles durchklicken" um einen schitt zu bekommen. Dann hat man weiß man aber immer noch nicht, welche Regeln ggf. nur unter bestimmten umständen zu tragen kommen.

Selbstverständlich kann einem solch ein Tool nicht komplett die eigene (Denk-)Arbeit abnehmen, sondern höchstens unterstützen - in der Hinsicht verhält es sich auch nicht anders, als mit bspw. irgendwelchen WYSIWYG-Editoren.

MfG ChrisB

[suit]

Selbstverständlich kann einem solch ein Tool nicht komplett die eigene (Denk-)Arbeit abnehmen, sondern höchstens unterstützen - in der Hinsicht verhält es sich auch nicht anders, als mit bspw. irgendwelchen WYSIWYG-Editoren.

Ich hab' aber das Gefühl, der OP erwartet genau das.

[CHaaks]

Selbstverständlich kann einem solch ein Tool nicht komplett die eigene (Denk-)Arbeit abnehmen, sondern höchstens unterstützen - in der Hinsicht verhält es sich auch nicht anders, als mit bspw. irgendwelchen WYSIWYG-Editoren.

Ich hab' aber das Gefühl, der OP erwartet genau das.

Sagen wir mal es wäre schon gewesen, wenn es sowas gegeben hätte.
Aber das Plugin nimmt einem schon mal absolut viel Arbeit ab, weil es die benutzten Klassen eingrenzt.

Und DAS ist auf jedenfall besser als nix, bzw alle anderen Tools, die ich bis jetzt gefunden habe.

Mfg
CHaaks

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

https://addons.mozilla.org/de/firefox/addon/css-usage/
“CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.”

Mal ausprobiert: Das Ding lässt die unnötige Regel 'p:focus { foo: bar }' drin, obwohl p-Elemente überhaupt nicht fokussierbar sind – es sei denn, sie haben ein @tabindex-Attribut.

Qapla'