CSS Datei optimieren bzw. säubern

[bergblume]

kurze frage... meine style.css datei ist mittlerweile ziemlich "aufgedunsen" und es werden nicht mehr alle elemente dort benötigt.
wie kann ich nun die css am besten bereinigen und evtl. automatisch auf die nur noch benötigten elemente verkleinern?

danke, bergblume

[DPHAZE]

kurze frage... meine style.css datei ist mittlerweile ziemlich "aufgedunsen" und es werden nicht mehr alle elemente dort benötigt.
wie kann ich nun die css am besten bereinigen und evtl. automatisch auf die nur noch benötigten elemente verkleinern?

danke, bergblume

Hallo,

Funktionierende automatische Lösungen gibt es dafür meines Wissens nicht. Du kannst aber durchaus Firebug einsetzen, um überflüssige Selektoren und Klassen in deinem css zu finden.
Löschen und dein css aufräumen musst du aber nach wie vor von Hand.

Bis dann....

[bergblume]

hallo dphaze,

danke für deine Atnwort... das hatte ich schon befürchtet... meine bisherige suche nach einem automatisieren CSS-Cleaner war bisher leider im www vergebens.
vll. hat ja jmd. hier doch nochnen link zu so nem tool?!

Vg, bergblume

[x23piracy]

Hi,

lustig ich hab zum gleichen Thema auch einen Thread aufgemacht (nicht lustig)
Habe mich eben nochmal bemüht google zu befragen und habe doch tatsächlich
was brauchbares gefunden:

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

Screenshot:


Wenn ich das Tool verstanden habe klickst du für jede Seite deiner Webseite unten
rechts auf das Icon: "Find unused Selectors" die generierte Liste zur Website XY wird dann immer kleiner.

Wichtig ist natürlich das du wenn was übrig bleibt auch sicher bis alle seiten einmal angesurft zu haben
(template files, und vielleicht zusätzliche html seiten)

@bergblume

Weißt du wie ich css tags nur für einen bestimmten Browser definiere? Also z.b. filter was nur im ie
funktioniert kann man das so machen das dies auch nur der ie erhält?


Gruß Jens

[bergblume]

@bergblume

Weißt du wie ich css tags nur für einen bestimmten Browser definiere? Also z.b. filter was nur im ie
funktioniert kann man das so machen das dies auch nur der ie erhält?

nein, leider nicht! 

hi jens,

danke dir... das tool hatte ich lustigerweise auch schon auf dem radar und bei mir installiert...
leider muss ich dann ja auch manuell jede zeile bei mir abgleichen... bei mir sind das aktuell 775 unused selectors... das ist voll die sissyfussarbeit wenn ich das alles manuel nun löschen willl... oder habe ich bei dem tool was grundlegendes übersehen?

gruss, bergblume

[x23piracy]

Hi,

775? Du meinst doch die gesamtsumme? guck mal oder der schon Daten für mehrere Seiten
gesammelt hat (Dropdown oben im Fenster), ja wie soll das gehen css ist statisch das meldet
nicht benutze tag #fenster o.ä. das kann nur gut gehen wenn du lückenlos alle seiten
ansurfst (ich meine damit nicht jedes bild, die Hauptseiten)

Ganz am Ende sollte die Liste überschaubar sein und dann muss man halt per Hand ran, ich
denke das geht nicht anders und automatisch will ich nix löschen lassen da passiert sicher
nur b***s***

Ich muss mir das Tool noch genauer ansehen, ist mir jetzt erstmal auch neu.

EDIT: Das geklicke auf das Symbol kann man sich sparen:



Ich glaube es ist sinnvoll das im Hintergrund ein paar Tage mitlaufen zu lassen falls man es nicht
auf die Reihe bekommt alle relevanten Seiten durchzusurfen weil einem nicht einfällt was noch fehlt.

nein, leider nicht!  

Schau mal: http://www.positioniseverything.net/articles/cc-plus.html
Da gehts aber nur darum den IE in seinen verschiedenen Versionen zu identifizieren.

Mitlerweile wäre mir ja fast ein User Agent Check lieber der dann ein passendes css serviert.
Wäre nur blöd wen der User generell seinen Agent faked, aber das ist dann sein Problem.

EDIT2:

Ich habe jetzt mal so einige Seiten bei mir durchgesurft und es werden immer weniger ungenutzte css
Einträge, interessant ist auch der Rechtsklick auf nicht verwendete css Einträge die man dann auf used
setzen kann (bei den Sachen wo man genau weiß das sie verwendet werden).



Ich mache das jetzt noch ein paar Tage so und am Ende hab ich dann höchstwahrscheinlich alle ungenutzten
css Einträge.

EDIT3:

Cool, das Teil frisst auch sitemaps sofern diese Lückenlos ist, kannst du deine ganze Seite abgrasen lassen



Ich möchte garnicht wissen wie lange das dauern könnte in einer Galerie mit extrem vielen Bildern, wobei
es ja eigentlich nicht notwendig sein sollte alle details seiten zu spidern, da ist doch eh alles gleich bis auf
das image und die thumbs.

Weiß jemand wie man die google.php so stricken muss das quasi alle links der galerie repräsentiert werden
ausgenommen der details.php links?


Gruß Jens

[DPHAZE]

[...]

@bergblume

Weißt du wie ich css tags nur für einen bestimmten Browser definiere? Also z.b. filter was nur im ie
funktioniert kann man das so machen das dies auch nur der ie erhält?


Gruß Jens

Hallo,

ich bin zwar nicht Bergblume, aber bzgl. deines IE Problems würde ich dir vorschlagen, einfach über Conditional Comments dem IE seine Anweisungen aufzudrücken. Ist die stabilste Lösung bei komplexen Stylesheets und kommt ohne CSS-Hacks aus.
Wenn das zu viel Arbeit macht, brauchst du dir um Anweisungen wie {filter:..;}, so ja in deiner konkreten Frage, keine Sorge machen. Diese Anweisung ist von Natur aus MS IE spezifisch und wird generell von anderen Browsern ignoriert (das Pendant für {Filter} wäre z.B. bei den Geckos {Opacity}).

[x23piracy]

Conditional Comments...
(das Pendant für {Filter} wäre z.B. bei den Geckos {Opacity}).

Hi,

danke das hatte ich inzwischen auch herausgefunden, mir ging es darum die Meldungen im FF nicht mehr in der
Fehlerkonsole zu haben aber beim FF wohl normal. Es gibt also nicht die Möglichkeit direkt innerhalb von css werte
außer dem IE direkt zuzuweisen?


Guß Jens

[DPHAZE]

Conditional Comments...
(das Pendant für {Filter} wäre z.B. bei den Geckos {Opacity}).

Hi,

danke das hatte ich inzwischen auch herausgefunden, mir ging es darum die Meldungen im FF nicht mehr in der
Fehlerkonsole zu haben aber beim FF wohl normal. Es gibt also nicht die Möglichkeit direkt innerhalb von css werte
außer dem IE direkt zuzuweisen?


Guß Jens

Nun, du kannst auch innerhalb eines Stylesheets den IE von bestimmten Anweisungen ausschliessen (das sind automatisch die Anweisungen, welche er nicht kennt) oder best. Anweisungen nur für den IE angeben.
Letzteres führt jedoch erneut zu Fehlermeldungen in den Konsolen anderer Browser, die diese Anweisungen nicht interpretieren können.
Du kannst im Umkehrschluss die standardkonformen Browser in einem "Multistylesheet" nicht vom lesen best. Anweisungen ausschliessen. Soll heißen, jeglicher Gecko/Webkit wird dir immer einen Fehler in die Konsole schreiben, weil du das Lesen einzelner und nicht für sie bestimmte Anweisungen eben NICHT explizit für diese Browser ausschliessen kannst.

Nehmen wir das Beispiel von oben. Sobald du in deinem Stylesheet die Anweisung {filter} setzt wirft dir der Firefox, Safari, Chrome und wie sie alle heissen einen Fehler raus, da es nicht möglich ist ihn/sie davor zu bewahren, diese Anweisung lesen und interpretieren zu wollen. Der IE führt die Anweisung jedoch brav (mehr oder minder) aus, da sie ausschliesslich für ihn da ist.

[x23piracy]

Hi,

danke das war jetzt klar genug für mich 


Gruß Jens