mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:30 Benutzername: Passwort: Auto-Login

Thema: [FAQ] CSS Shorthand Properties vom 13.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> FAQ - Nonprint -> [FAQ] CSS Shorthand Properties
Autor Nachricht
DevEdge
Threadersteller

Dabei seit: 28.12.2005
Ort: Berlin
Alter: 50
Geschlecht: Männlich
Verfasst Mo 13.02.2006 12:00
Titel

[FAQ] CSS Shorthand Properties

Antworten mit Zitat Zum Seitenanfang

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.

Code:

element {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}

element {
  margin: 1px 2px 3px 4px (top, right, bottom, left);
}



Border

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.

Code:

element {
  border-top: 4px solid #000;
  border-left: 1px solid #BBC;
  border-right: 2px solid #123;
  border-bottom: 3px solid #456;
}

element {
  border: 1px solid #000;
  border-width: 4px 2px 3px 1px;
  border-color: #000 #123 #456 #BBC;
}




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 13:17, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Sarky

Dabei seit: 29.06.2002
Ort: Düsseldorf
Alter: 42
Geschlecht: Männlich
Verfasst Mo 13.02.2006 13:16
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für diesen Beitrag!
Verschoben in FAQ - Nonprint
  View user's profile Private Nachricht senden
Anzeige
Anzeige
datenkind

Dabei seit: 28.04.2003
Ort: Eisenach
Alter: 41
Geschlecht: Männlich
Verfasst Mo 13.02.2006 13:32
Titel

Re: [FAQ] CSS Shorthand Properties

Antworten mit Zitat Zum Seitenanfang

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.

Code:

element {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}

element {
  margin: 1px 2px 3px 4px (top, right, bottom, left);
}


Kann mancher gut gebrauchen, Edge Lächel

Obacht, das nur als Beispiel, geht auch für Border etc.

Man kann die Angabe auch nochmals verkürzen, wenn man entweder nur zwei oder drei unterschiedliche Zustände benötigt:

Code:
element {
  margin: 1px 2px (top/bottom, left/right);
}


Code:
element {
  margin: 1px 2px 3px(top, left/right, bottom);
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DevEdge
Threadersteller

Dabei seit: 28.12.2005
Ort: Berlin
Alter: 50
Geschlecht: Männlich
Verfasst Mo 13.02.2006 13:54
Titel

Antworten mit Zitat Zum Seitenanfang

@ 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)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Thalion

Dabei seit: 04.12.2004
Ort: München
Alter: 36
Geschlecht: Männlich
Verfasst Mo 13.02.2006 14:05
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DevEdge
Threadersteller

Dabei seit: 28.12.2005
Ort: Berlin
Alter: 50
Geschlecht: Männlich
Verfasst Mo 13.02.2006 14:29
Titel

Antworten mit Zitat Zum Seitenanfang

@Thalion: Absolut richtig, aber Vererbung und Semantik waren in diesem Fall nicht das Thema ;o) Vielleicht ein andermal ;o)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
datenkind

Dabei seit: 28.04.2003
Ort: Eisenach
Alter: 41
Geschlecht: Männlich
Verfasst Mo 13.02.2006 14:38
Titel

Antworten mit Zitat Zum Seitenanfang

Edge, ich bin wahrlich nicht davon ausgeganen, dass es dir unbekannt wäre *zwinker* Wollte es als Ergänzung dazusetzen.

Vererbung ist allerdings durchaus interessant, bin auf deinen nächsten Artikel dahingehend gespannt *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 17.05.2010 08:42
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> FAQ - Nonprint


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.