[Floele]

Vor einiger Zeit hab ich mich mal an die Arbeit gemacht, einen CSS Optimierer und Formatierer zu entwickeln, und zwar auf Basis eines eigenen CSS Parsers, da (soweit ich weiß) alle bisherigen PHP basierten Parser reguläre Ausdrücke benutzen um das CSS auseinander zu nehmen, was dementsprechend fehleranfällig ist.
Um den Parser geht es mir hier allerdings weniger, ich wollte mal wissen, was ihr von dem Optimierer haltet oder ob ihr sogar einen Fehler findet
Nur mal so als Vergleich: Das CSS von Winfuture lässt sich damit um ca. 50% verkleinern, mit Menschenverstand sitzt da aber nochmal 50% drin (also insgesamt 75%, das hatte ich aber schonmal erwähnt).

Link:
http://cdburnerxp.se...s_optimiser.php

Edit:
Mittlerweile gibt es auch eine ausführbare Datei und ein dazugehöriges Projekt auf sf.net, CSSTidy.

Ein paar Beispiele wie das Teil so optimiert, gilt für alle Eigenschaften und Selektoren (nicht nur margin und a ):

• Farben wie "black" oder rgb(0,0,0) werden zu #000000 und wenn möglich zu #000 umgewandelt, falls der Farbname kleiner ist wird dieser verwendet.
  
• a {eigenschaft:x} b {eigenschaft:x} wird zu a,b {eigenschaft:x}
  
• a {eigenschaft:x;eigenschaft:y} wird zu a {eigenschaft:y} (alles was doppelt ist wird eben zusammengefasst)
  
• margin:1px 1px 1px 1px; wird zu margin:1px;
  
• margin:1px 0px; wird zu margin:1px 0;
  
• a {margin-top:10px;margin-bottom:10px;margin-left:10px;margin-right:10px;} wird zu a {margin:10px;}
  
• margin:010.0px wird zu margin:10px (unnötige Nachkommastellen etc werden entfernt)
  
• alle unnötigen Leerzeichen (white-space) werden entfernt, Ausmaß je nach "Komprimierungsstufe"
  
• alle background-Eigenschaften werden zusammengefasst
  
• alle Kommentare werden entfernt
  
• letzter ; kann entfernt werden
  
• verschiedene Fehler werden behoben wie fehlende Einheiten, falsche Farbnamen, fehlerhafte Zeilenumbrüche in Strings und fehlende ; sowie (nicht erlaubte) = anstatt :

Dieser Beitrag wurde von Floele bearbeitet: 12. Oktober 2005 - 20:19

[Meatwad]

nice script, erstpaart mir bei jedem aufruf 1,44KB traffic! THX ALOT!

[Floele]

Hast du das von deinem Homeserver optimiert? Da ließe sich mit den Schriften nämlich noch was vereinfachen

[Meatwad]

ja, habe die von meinem server optimiert!
was ließe sich denn noch optimieren?

[Floele]

Machs mal so

body{
font:10px verdana,arial,"ms sans serif",sans-serif;
}

h3 {
font-size:16px;
line-height:18px;
padding-left:5px;
color:#e9f2fc;
margin:10px;
}

.smallheader {
font-size:10px;
padding-left:10px;
padding-right:5px;
line-height:14px;
color:#e9f2fc;
}

.small {
font-size:10px;
padding-left:5px;
line-height:14px;
color:#e9f2fc;
}

.info {
font-size:10px;
line-height:13px;
padding-left:5px;
color:#e9f2fc;
}

.infohead {
font-size:10px;
line-height:12px;
padding-left:20px;
color:#e9f2fc;
}

.newshead {
font-size:12px;
line-height:13px;
padding-left:5px;
color:#333;
}

input,textarea,select {
background-color:#CCC;
color:#333;
border-style:solid;
border-width:1px;
padding:0;
}

.quotesource,.quote {
display:block;
border:1px solid #888;
background-color:#D6DFE7;
margin:10px 20px;
padding:2px;
}

.banner,p,.historytable {
font-size:12px;
line-height:14px;
padding-left:20px;
text-align:justify;
color:#000;
margin:0 0 2ex;
}

a:link,a:visited,a:active,a:hover {
color:#707770;
text-decoration:none;
}

Dann ists noch ein bisschen kleiner

[Meatwad]

ja, danke ich habs eben getestet aba da ist einiges verrutscht... bei dem formular habe ich ein <table> gemacht und dann konnte ich kein <p> einbauen und somit sind die tags dann ganz verrutscht.....

[Floele]

OK, so müsste es aber dann stimmen.

body {
font-family:verdana,arial,"ms sans serif",sans-serif;
}

h3 {
font-size:16px;
line-height:18px;
padding-left:5px;
color:#e9f2fc;
margin:10px;
}

.smallheader {
font-size:10px;
padding-left:10px;
padding-right:5px;
line-height:14px;
color:#e9f2fc;
}

.small {
font-size:10px;
padding-left:5px;
line-height:14px;
color:#e9f2fc;
}

.info {
font-size:10px;
line-height:13px;
padding-left:5px;
color:#e9f2fc;
}

.infohead {
font-size:10px;
line-height:12px;
padding-left:20px;
color:#e9f2fc;
}

.newshead {
font-size:12px;
line-height:13px;
padding-left:5px;
color:#333;
}

input,textarea,select {
background-color:#CCC;
font-family:verdana,arial,sans-serif;
font-size:10px;
color:#333;
border-style:solid;
border-width:1px;
padding:0;
}

.quotesource,.quote {
display:block;
border:1px solid #888;
background-color:#D6DFE7;
margin:10px 20px;
padding:2px;
}

.banner,p,.historytable {
font-size:12px;
line-height:14px;
padding-left:20px;
text-align:justify;
color:#000;
margin:0 0 2ex;
}

a:link,a:visited,a:active,a:hover {
color:#707770;
text-decoration:none;
}

[Meatwad]

das ging auch nicht aber dann habe ich etwas im code von der page verändert un nu gehts super! DANKE MAN! echt geil das script!

ich hatte vorher 2,41KB und jetzt nurnoch 1,11KB(!!!) für die css...


thx^^

[Slayer]

Ich kenne den CSS Optimierer schon ein wenig länger und nutze ihn auch immer wieder.
Muss sagen, dass Floele sich da wirklich große Mühe gegeben hat und dieses Script hat noch gefehlt.
Es ist wirklich immer sinnvoll und es stimmt auch alles wirklich.

Bin mal gespannt, ob da jemand einen Fehler findet

Respekt, Floele, das hast du gut gemacht.
Dieses Script sollte mehr bekannt werden!

[Floele]

Zitat (Corey: 17.05.2005, 22:25)

Dieses Script sollte mehr bekannt werden!
<{POST_SNAPBACK}>

Joa, das könnte nicht schaden. Um den Bekanntheitsgrad kümmere ich mich aber erst wenn ich es als fertig einschätze. Bei Google ist das Teil doch schon ganz gut positioniert

[Urza]

Zitat (Floele: 17.05.2005, 16:53)

Vor einiger Zeit hab ich mich mal an die Arbeit gemacht, einen CSS Optimierer und Formatierer zu entwickeln, und zwar auf Basis eines eigenen CSS Parsers, da (soweit ich weiß) alle bisherigen PHP basierten Parser reguläre Ausdrücke benutzen um das CSS auseinander zu nehmen, was dementsprechend fehleranfällig ist.
<{POST_SNAPBACK}>

um doch mal darauf zu sprechen zu kommen ^^ wie hast du denn den parser geschrieben? und wie hast du ihn eingebunden?

[Floele]

Also wie ich den geschrieben habe, kannst du ja selbst nachgucken. Im Großen und Ganzen funktioniert er so, dass er mit einer for-Schleife jedes einzelne Zeichen durchgeht und je nach Kontext dann entsprechende Aktionen durchführt. Der Parser hat sozusagen verschiedene Modi ("im String", "in Eigenschaft", "in Selektor", usw.) in denen verschiedene Zeichen verschiende Bedeutungen haben.

Über das Einbinden werde ich wohl noch was schreiben, kurzgefasst sieht es so aus:

include('parser.inc.php');
$css = new csstidy();

if($css->parse('text')) // falls das CSS ausreichend wohlgeformt ist
{
 echo $css->print_code();
}

Dieser Beitrag wurde von Floele bearbeitet: 21. August 2005 - 10:00

[Slayer]

Würde mich auch mal interessieren, wie man so eine Klasse dann einbindet
Dein oberer Beitrag zeigt das ja schon ganz simpel, aber wie sieht das dann ausführlich aus

Dieser Beitrag wurde von Corey bearbeitet: 18. Mai 2005 - 17:04

[Floele]

Naja, im Prinzip ist das Beispiel von mir voll funktionsfähig. Welche Daten du dem Parser und übergibst ist natürlich dir überlassen. Das Ding hat natürlich auch noch zusätzliche Funktionen (um Templates zu laden etc.) aber das erkläre ich dann wenn es fertig ist

[Slayer]

Zitat (Floele: 18.05.2005, 18:15)

Naja, im Prinzip ist das Beispiel von mir voll funktionsfähig. Welche Daten du dem Parser und übergibst ist natürlich dir überlassen. Das Ding hat natürlich auch noch zusätzliche Funktionen (um Templates zu laden etc.) aber das erkläre ich dann wenn es fertig ist
<{POST_SNAPBACK}>

Kannst es ja auch auf die Homepage machen, wäre wirklich sehr sinnvolll
Finde ich gut von dir, dass du nichts "zu verbergen hast".

Bin schon total gespannt und werde deinen Parser und Optimierer nun für alle meine CSS Codes benutzen

Also großes Danke dafür!