"Shorthand"-Angaben (zur Größenoptimierung)

[Eddie]

Hallo allerseits,

ich habe heute folgenden Artikel gefunden: http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-shorthand-at-a-glance/

Zum einen wuerde mich natuerlich eure Meinung dazu interessieren, zum anderen habe ich direkt eine Frage (ich setze das Ganze naemlich gerade um):

Also, kann ich statt
   margin:0px 0px 20px 10px;
auch
   margin:0   0   20px 10px;
verwenden?
Der Validator meckert jedenfalls nicht, ganz geheuer ist es mir trotzdem nicht...

Danke für eure Hilfe,
Eddie

[Henryk Plötz]

Moin,

Also, kann ich statt
   margin:0px 0px 20px 10px;
auch
   margin:0   0   20px 10px;
verwenden?

Ja, kannst du: http://www.w3.org/TR/CSS21/syndata.html#length-units "After a zero length, the unit identifier is optional."

[Eddie]

Hallo Henryk,

Ja, kannst du: http://www.w3.org/TR/CSS21/syndata.html#length-units "After a zero length, the unit identifier is optional."

Danke, hat geholfen!

Eddie

[Eddie]

Hallo allerseits,

und noch eine Frage:

Sind diese Angaben äquivalent?
border:0;
border:none:
border-style:none;

(vorausgesetzt, ich habe nicht noch andere border-Attribute)

Danke nochmal,
Eddie

[Axel Richter]

Hallo,

Sind diese Angaben äquivalent?
border:0;

Das setzt border-width auf 0 und alle anderen border-Eigenschaften auf ihren Initialwert http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties. Es entspricht also:
border:0 none [color];
mit [color]= Wert der aktiven color-Eigenschaft.

border:none:

Ist syntaktisch falsch ;-))

border:none;
entspricht:
border:medium none [color];
siehe oben. Da aber border-style:none; eine border-width:0; impliziert http://www.w3.org/TR/CSS21/box.html#value-def-border-style, ist es identisch mit border:0;.

border-style:none;

Das setzt _nur_ die Eigenschaft border-style:none; aber damit auch border-width:0; und ist somit auch gleichbedeutend mit border:0;.

Ich bevorzuge border:0 none;

Die Geschichte mit den Initialwerten muss man allerdings _wirklich_ beherzigen. Bei border würde nämlich:
border:solid;
border:2px;
keinen Rahmen erzeugen. Bei background ist es ähnlich. Nach:
background: #F00;
background: url("marble.png");
ist die Hintergrundfarbe wieder transparent. Andersrum wäre das Hintergrundbild wieder none.

viele Grüße

Axel

[Eddie]

Hallo Axel,

danke dir fuer die ausfuehrliche Antwort! Jetzt war ich aber trotzdem mal so mutig...

Ich bevorzuge border:0 none;

... und habe
border:0;
gesetzt, und zwar an allen Stellen, an denen ich keinen Rahmen (bzw. einen Rahmen mit 0px) haben will. Haeltst du das so fuer ein Problem?

Danke dir,
Eddie

[Eddie]

Hallo nochmal,

wie weit kann ich denn gehen bei der Entrümpelung meiner CSS-Files?

Folgender Code wird immer noch als valide gemeldet:

[...]
body{font-family:Arial, Helvetica, Helv, Geneva, sans-serif;font-size:101%;color:#800000;height:100%;margin:0;padding:0;background-color:#FFEFBD;background-repeat:repeat-x;}table{font-size:1em;}table.noBorder{border:none;border-collapse:collapse;border-spacing:0;}
[...]

Da ist garantiert nichts Ueberfluessiges mehr drin, keine Leerzeichen, keine Zeilenumbrueche, Unleserlichkeit in Reinform!
Nur: ich glaube mich dunkel zu erinnern, dass ich mit sowas schonmal Probleme bekommen habe. Mit irgendeinem Browser oder so. Ist aber ewig her, und sicher bin ich mir schon gleich garnicht...

Was haltet ihr also davon?

Danke für eure Hilfe,
Eddie

[MudGuard]

Hi,

wie weit kann ich denn gehen bei der Entrümpelung meiner CSS-Files?
Folgender Code wird immer noch als valide gemeldet:
body{font-family:Arial, Helvetica, Helv, Geneva, sans-serif;font-size:101%;color:#800000;height:100%;margin:0;padding:0;background-color:#FFEFBD;background-repeat:repeat-x;}table{font-size:1em;}table.noBorder{border:none;border-collapse:collapse;border-spacing:0;}

Frage: um wieviele Bytes kannst Du die Dateigröße damit reduzieren?
Und um wieviele Bytes die (gzip-komprimierte) Trafficmenge?
Lohnt sich der Aufwand überhaupt?
Bedenke dabei auch, daß in den meisten Fällen (natürlich abhängig von den Cache-Einstellungen des Clients) das CSS-File nur einmal pro Besucher übertragen wird, weitere Anfragen werden üblicherweise nur noch mit 304 not modified beantwortet.
Guck doch mal ins Logfile, wieviel Traffic das CSS-File tatsächlich erzeugt.

Ich würde vor/nach { und } und nach dem ; die Leerzeichen erhalten als Minimum, auch nach dem Komma, das mehrere Selektoren trennt.

Da ist garantiert nichts Ueberfluessiges mehr drin, keine Leerzeichen, keine Zeilenumbrueche, Unleserlichkeit in Reinform!

Doch, da ist überflüssiges drin.
Es ließe sich im body das background-repeat komplett einsparen - gibt ja kein Hintergrundbild, das wiederholt werden könnte.

Was haltet ihr also davon?

Um es mit Cheatah zu sagen: Abstand.

cu,
Andreas

[Eddie]

Hallo Andreas,

Frage: um wieviele Bytes kannst Du die Dateigröße damit reduzieren?

Allein durch das Streichen von Zeilenumbruechen und Leerzeichen um die 2,5 Kb, meine CSS-Files sind ziemlich gross.

Und um wieviele Bytes die (gzip-komprimierte) Trafficmenge?

Sollte ich vielleicht mal einfuehren, nicht?
Ich hab mich noch nicht damit beschaeftigt, wie aufwendig ist das denn?

Guck doch mal ins Logfile, wieviel Traffic das CSS-File tatsächlich erzeugt.

2,87%, das sind monatlich ca. 800 MB, durch eine Ersparnis von 2,5 KB (s.o, ca. 12.5%) spare ich also 100 MB monatlich. Naja, kein so ein riesen Posten, aber immerhin. Was bei mir noch dazu kommt, ist, dass viele meiner Besucher in irgendwelchen langsamen dritte-Welt-Internet-Cafes am Modem haengen. Da macht das schon was aus!

Ich würde vor/nach { und } und nach dem ; die Leerzeichen erhalten als Minimum, auch nach dem Komma, das mehrere Selektoren trennt.

Also z.B. so?

...
}
img
{
width:472px;
height:172px;
}
div
{
...

Leerzeichen und Umbrueche sind doch gleichwertig, oder?

Doch, da ist überflüssiges drin.
Es ließe sich im body das background-repeat komplett einsparen - gibt ja kein Hintergrundbild, das wiederholt werden könnte.

Doch gibt's, steht aber aus internen Gruenden im Body-Tag.

Danke dir,
Eddie

[daniel84]

Hallo Eddie,

body{font-family:Arial, Helvetica, Helv, Geneva, sans-serif;font-size:101%;color:#800000;height:100%;margin:0;padding:0;background-color:#FFEFBD;background-repeat:repeat-x;}table{font-size:1em;}table.noBorder{border:none;border-collapse:collapse;border-spacing:0;}

Da ist garantiert nichts Ueberfluessiges mehr drin

Doch. Du kannst z.B. Schriftarten und -grösse zusammenfassen: http://de.selfhtml.org/css/eigenschaften/schrift.htm#font. Auch die Hintergrund-Angaben kannst du - wenn es denn ein Hintergrundbild hätte - zusammenfassen: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background. Und wenn du den Border auf "none" (also keinen Rahmen) setzt, sind IMHO die Angaben zu border-collapse und -spacing völlig überflüssig.

Gruss aus Luzern,
Daniel

[Eddie]

Hallo Daniel,

Doch. Du kannst z.B. Schriftarten und -grösse zusammenfassen: http://de.selfhtml.org/css/eigenschaften/schrift.htm#font.

Das geht aber nur, wenn ich auch alle Angaben mache, oder? Also, um nur
font-size und font-style zusammenzufassen, geht es doch nicht?

Und wenn du den Border auf "none" (also keinen Rahmen) setzt, sind IMHO die Angaben zu border-collapse und -spacing völlig überflüssig.

Ok, schau ich mir nochmal an!

Danke dir,
Eddie

[daniel84]

Hallo Eddie,

Doch. Du kannst z.B. Schriftarten und -grösse zusammenfassen: http://de.selfhtml.org/css/eigenschaften/schrift.htm#font.
Das geht aber nur, wenn ich auch alle Angaben mache, oder? Also, um nur
font-size und font-style zusammenzufassen, geht es doch nicht?

Gemäss CSS-Spec sollte es auch gehen, wenn nicht alle Angaben gemacht werden. Dein Fall entspricht genau dem 2. Beispiel auf der verlinkten Seite.

Gruss aus Luzern,
Daniel

[Thomas J.S.]

Hallo,

wie weit kann ich denn gehen bei der Entrümpelung meiner CSS-Files?

Folgender Code wird immer noch als valide gemeldet:

[...]
body{font-family:Arial, Helvetica, Helv, Geneva, sans-serif;font-size:101%;color:#800000;height:100%;margin:0;padding:0;background-color:#FFEFBD;background-repeat:repeat-x;}table{font-size:1em;}table.noBorder{border:none;border-collapse:collapse;border-spacing:0;}
[...]

Da ist garantiert nichts Ueberfluessiges mehr drin,

Z.b:
body{font:101% Arial,Helvetica,Helv,Geneva,sans-serif;color:maroon;margin:0;padding:0;background:#ffefbd repeat-x}

color:maroon, würdest du in diesem Fall ein Zeichen sparen.
background:#ffefbd (solltest du kompression verwenden, lassen sich Kleinbuchstaben "besser" kompriemieren, weil sie öfter vorkommen.)
Was für eine Schrift ist "Helv"?

Nur: ich glaube mich dunkel zu erinnern, dass ich mit sowas schonmal Probleme bekommen habe. Mit irgendeinem Browser oder so. Ist aber ewig her, und sicher bin ich mir schon gleich garnicht...

Wenn alles auf die kuzmögliche Sytax kürzst, muss du damit rechnen, dass mehr Browser damit Probleme haben. Vor allem wenn - wie du sagst - deine Besucher aus der 3. Welt kommen, wo vermutlich noch mehr ältere Browser anzutreffen sind.

Grüße
Thomas

[Eddie]

Hallo Thomas,

color:maroon, würdest du in diesem Fall ein Zeichen sparen.

Ok, jetzt seh ich ein, dass man's auch uebertreiben kann :-)

background:#ffefbd (solltest du kompression verwenden, lassen sich Kleinbuchstaben "besser" kompriemieren, weil sie öfter vorkommen.)
Was für eine Schrift ist "Helv"?

Aeh, mmmh, ja also,... peinlich.

Danke nochmal,
Eddie

[Tim Tepaße]

Hallo,

background:#ffefbd (solltest du kompression verwenden, lassen sich Kleinbuchstaben "besser" kompriemieren, weil sie öfter vorkommen.)

Man könnte #ffefbd noch verkürzen, wenn man eine leichte Farbkorrektur vornimmt: Das zweite Byte EF zu EE und das dritte Byte zu BB verändert. Im Farbraum sollte diese Veränderung minimal sein, bei EF zu EE wird nur das kleinste Bit verändert, bei BD zu BB nur der Wert der kleinsten beiden Bits. Dafür schreibt sich der Farbwert sich jetzt aber #FFEEBB, was man zu #FEB oder in klein #feb verkürzen kann.

Tim