6.2.8 Sammeleigenschaften

Als Sammeleigenschaften werden solche Eigenschaften bezeichnet, die als „ein Wert“ zusammengefasst werden können. Dabei werden die Werte durch Leerzeichen getrennt nach der Eigenschaftsbezeichnung hintereinander aufgeschrieben.

Beispiel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
div {
  border-width: 2px;
  border-style: solid;
  border-color: #ff0000;
}

/* kann zusammengefasst werden zu */

div {
  border: 2px solid #ff0000;
}

Tabelle: Wichtige Sammeleigenschaften

Sammeleigenschaft Einzelne Eigenschaften Zusammengefasste Eigenschaft
border border-width, border-style, border-color border: 2px solid #ff0000;
margin margin-top, margin-right, margin-bottom, margin-left margin: 10px 15px 20px 25px;
padding padding-top, padding-right, padding-bottom, padding-left padding: 5px 10px;
font font-style, font-variant, font-weight, font-size, line-height, font-family font: italic small-caps bold 16px/20px Arial, sans-serif;
background background-color, background-image, background-position, background-repeat, background-size, background-attachment background: #ffffff url('image.png') no-repeat center/cover fixed;
list-style list-style-type, list-style-position, list-style-image list-style: square inside url('bullet.png');
outline outline-width, outline-style, outline-color outline: 2px dotted red;

Weitere Details und Beispiele zu Sammeleigenschaften finden Sie in der offiziellen CSS-Dokumentation auf MDN.

Reihenfolge und unvollständige Angaben

  1. Reihenfolge: Bei allen genannten Sammeleigenschaften ist die Reihenfolge der Werte wichtig. Ein falsches Anordnen der Werte führt dazu, dass der Browser die CSS-Anweisung nicht korrekt interpretiert.

  2. Werte auslassen:

    • Wenn ein Wert weggelassen wird, verwendet der Browser die Standardwerte. Zum Beispiel:

      1
      border: 2px solid;
      In diesem Fall bleibt die Farbe beim Standardwert currentColor.

    • Möchten wir einen bestimmten Wert nicht ändern, können wir ihn explizit weglassen, indem wir nur die relevanten Werte angeben. Beim border-Selektor könnten wir etwa den border-style unverändert lassen und nur die Breite und Farbe definieren:

      1
      border: 3px red;
      Hier bleibt der vorherige Stil (solid, dotted, etc.) erhalten.

Vor- und Nachteile von Sammeleigenschaften

Vorteile

  • Kürzere und übersichtliche Stylesheets: Die Zusammenfassung mehrerer Eigenschaften reduziert die Zeilenanzahl und steigert die Lesbarkeit.

  • Einfachere Wartung: Änderungen an zusammengefassten Werten können schneller und an weniger Stellen vorgenommen werden.

  • Konsistenz: Durch Sammeleigenschaften ist die Struktur des Stylesheets klarer und einheitlicher.

Nachteile

  • Standardwerte müssen bekannt sein: Wenn ein Wert nicht explizit angegeben wird, greift der Browser auf Standardwerte zurück, was zu unerwartetem Verhalten führen kann.

  • Reihenfolge beachten: Die Reihenfolge der Werte ist unbedingt einzuhalten. Ein Fehler führt dazu, dass der Browser die Regel ignoriert.

  • Fehlende Flexibilität bei einzelnen Anpassungen: In manchen Fällen kann es notwendig sein, einzelne Eigenschaften zu überschreiben, was durch Sammeleigenschaften erschwert wird.