Dabei seit: 28.12.2005 Ort: Berlin Alter: 38 Geschlecht:
Verfasst Mo 13.02.2006 13:00 Titel
[FAQ] CSS Shorthand Properties
Webseiten die schnell und ohne langes Laden vom Browser aufgerufen werden, sind das Ziel einer nahezu jeden Anwendung. Möglichkeiten wie dies zu erreichen ist, gibt es zahlreiche. Beispielsweise der Verzicht von Tabellen zum Layouten oder das Images nicht zur Darstellung von Texten verwendet werden. Eine weitere Alternative ist der Einsatz von Shorthand Properties innerhalb von CSS Dateien. Die zusammenfassenden Eigenschaften ( shorthand properties ) sind also eine Zusammenfassung mehrerer Eigenschaften, die zu einer Kategorie gehören ( bspw. background, font, lists oder padding / margin ).
Mehrere Eigenschaften zusammengefasst zu einer Eigenschaft, ermöglichen es die Styles wie einzelne Elemente so kompakt und flexibel wie nur möglich zu gestalten. Oft können so 8-10 Zeilen von Eigenschaften zu 2-3 zusammengefast werden. Eine umfangreiche Styledatei von mehreren hundert Zeilen und bis zu 20KB oder mehr, kann mittels Shorthand Properties und Vererbung von Eigenschaften bestimmter Elementen eine nicht zu vernachlässigende Verkleinerung erreichen, sofern die Shorthand Properties korrekt gesetzt werden.
Font
Die Font Eigenschaft mit ihren zahlreichen Varianten bezüglich Style, Weight, Size etc. bietet sich nahezu für den Einsatz von Shorthand Properties an. Hier kann eine zusammenfassende Eigenschaft für die gleichzeitige Einstellung von "font-style", "font-variant", "font-weight", "font-size", "line-height" und "font-family" definiert werden.
Code:
element {
font-style: normal oder italic oder oblique;
font-variant:normal oder small-caps;
font-weight: normal oder bold oder bolder oder lighter;
font-size: (number+unit) oder (xx-small - xx-large);
line-height: normal order (number+unit);
font-family:name,"more names";
}
element {
font: italic small-caps bold 1em/1.2em "Arial","Helvetcia",sans-serif;
}
Background
Ein weiteres Einsatzgebiet der Shorthand Properties findet sich in der Eigenschaft Background wieder. Hier können auch oft mehrere Eigenschaften wie Hintergrundfarbe, Image, Position Abstand ect., eben all die für die Definition des Hintergrundes von Nöten sind, zusammengefasst werden.
Code:
element {
background-color: color oder #hex oder (rgb / % oder0-255);
background-image:url(URI);
background-repeat: repeat oder repeat-x oder repeat-y oder no-repeat;
background-position: X Y oder (top oder bottom oder center) (left oder right oder center);
background-attachment: scroll order fixed;
}
element {
background: #fff url(images/image.png) no-repeat 20px 100px fixed;
}
Lists
Die Listeneigenschaften "list-style-type", "list-style-position" und "list-style-image" können ebenso zu einer kompakten Eigenschaft zusammengefasst werden.
Code:
element {
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
element {
list-style:square inside url(image.gif);
}
Margin/Padding
Die Eigenschaft Margin oder Padding zur Positionierung eines Elementes, kommt in den meisten Style Dateien mehrmals vor. Somit sind sie ebenfalls prädistiniert für Shorthand Properties. Hierbei können alle 4 Richtungen (top, right, bottom, left) hintereinander angegeben werden, wobei es wichtig ist eben genau diese Reihenfolge beizubehalten. Selber einmal probieren und ihr werdet sofort merken, welche Position die Richtige ist.
Border sind ein weiteres Einsatzgebiet, denn die Art und Weise ( bspw. dotted, solid ), die Dicke und deren Farbgebung können natürlich auch zusammengefasst werden, wie an dem unteren Beispiel sehr gut zu erkennen ist. Die Reihenfolge der Borderstärke ist die selbe wie bei Margin / Padding.
Fazit: Man kann nicht nur innerhalb der Seitenstruktur ( Stichwort Div-Suppe oder Tabellenlayouts ) im Bereich (X)HTML an KiloBytes sparen, sondern eben auch dank der Zusammenfassungsmöglichkeiten innerhalb von CSS Dateien.
Zuletzt bearbeitet von Sarky am Mo 13.02.2006 14:17, insgesamt 1-mal bearbeitet
Dabei seit: 29.04.2003 Ort: Eisenach Alter: 29 Geschlecht:
Verfasst Mo 13.02.2006 14:32 Titel
Re: [FAQ] CSS Shorthand Properties
DevEdge hat geschrieben:
Margin/Padding
Die Eigenschaft Margin oder Padding zur Positionierung eines Elementes, kommt in den meisten Style Dateien mehrmals vor. Somit sind sie ebenfalls prädistiniert für Shorthand Properties. Hierbei können alle 4 Richtungen (top, right, bottom, left) hintereinander angegeben werden, wobei es wichtig ist eben genau diese Reihenfolge beizubehalten. Selber einmal probieren und ihr werdet sofort merken, welche Position die Richtige ist.
Dabei seit: 28.12.2005 Ort: Berlin Alter: 38 Geschlecht:
Verfasst Mo 13.02.2006 14:54 Titel
@ datenkind : Das ist mir natürlich bekannt, man kann auch drei Werte hintereinander bringen, aber um eventuelle Anfänger oder noch nicht so sattelfeste StyleSheet Anwender noch mehr zu verschrecken, habe ich jeweils alle vier Werte beibehalten, damit man einfach erkennen kann, welche Richtung für welchen Werte steht. Aber trotzdem danke für die Ergänzung ;o)
Dabei seit: 04.12.2004 Ort: München Alter: 24 Geschlecht:
Verfasst Mo 13.02.2006 15:05 Titel
Man sollte unbedingt auch mit Vererbung arbeiten, das spart einiges an Code ein.
Es ist nicht sinnvoll für jedes div und die darunter liegenden Elemente eine eigene class/id festzulegen.
Auch sollte man auf die vorgegebenen Elemente zurückgreifen, z.B. Überschriften immer mit h1, h2, h3,...
So spart man sich einiges an Tipparbeit und übersichlicher wird der Code auch noch.
Dabei seit: 19.06.2003 Ort: /dev/null Alter: 30 Geschlecht:
Verfasst Mo 17.05.2010 09:42 Titel
Bei font ist sollte man darauf hinweisen, dass font-size und font-family IMMER angegeben werden müssen. Zudem werden die anderen werte, sofern nicht angegeben immer initial mit "normal" befüllt. nimmt man solche shorthand angaben z.B. also für headlines oder strong tags, muss auch "bold" angegeben werden.
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
Willkommen auf dem Portal für Mediengestalter
Wollte es als Ergänzung dazusetzen.
