CSS/Tutorials/Wartungsfreundliches CSS am Beispiel eines Buttons

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

In diesem Artikel soll gezeigt werden, wie Sie mit der Verwendung des relativen Längenmaßes em gegenüber einem Einsatz von festen Pixelwerten flexible und später einfach zu ändernde Layouts erreichen.

Code so übersichtlich zu gestalten, dass er später leicht les- und änderbar ist, ist eine der größten Herausforderungen im Webdesign. Einer der wichtigsten Grundsätze, um Code wartungsfreundlich zu gestalten, ist DRY ("Don't repeat yourself!"). So ist es sinnvoll CSS-Regelsätze weitgehend zusammenzufassen, um spätere Änderungen zentral vornehmen zu können.

Hinweis

Adventskalender 2017

Dieser Artikel ist der Beitrag zum 06. Dezember.

Zurück zum

Dieses Tutorial soll zeigen, dass die Verwendung von relativen Längenmaßen die Anzahl der Stellschrauben bei späteren Änderungen weiter reduzieren kann. Es basiert auf einem Beispiel von Lea Verou aus ihrem Buch CSS-Secrets.

Anwendungsbeispiel[Bearbeiten]

feste Pixelwerte[Bearbeiten]

Beispiel: Button mit festen Pixelwerten
button { 
  padding: 6px 16px; 
  border: 1px solid green;
  background: #5a9900 linear-gradient(#8db243, #5a9900); 
  border-radius: 0 8px 8px 8px; 
  box-shadow: 0 lpx 5px gray; 
  color: white;
  text-shadow: 0 -1px 1px #333; 
  font-size: 20px; 
  line-height: 30px;
}
Der Button enthält CSS-Festlegungen mit festen Pixelwerten.
Bei einer späteren Änderung der Größe des Buttons müssen die einzelnen Werte jeweils für sich geändert werden.

Bezug auf die Schriftgröße[Bearbeiten]

Einige CSS-Werte stehen nicht für sich alleine, sondern beziehen sich auf andere, vorher getroffene Festlegungen. So ist der Zeilenabstand direkt von der Schriftgröße abhängig. Wenn die Bedeutung des Buttons hervorgehoben werden soll, kann er etwas größer dargestellt werden. Im oberen Beispiel müssen dafür sowohl die CSS-Eigenschaften font-size als auch line-height angepasst werden, hier werden beide nun miteinander verknüpft:

Beispiel: Verknüpfung von Schriftgröße und Zeilenabstand
button { 
  font-size: 20px; 
  line-height: 1.5;
}
Die Zeilenhöhe passt sich nun automatisch an eine Anpassung der Schriftgröße an. Ein Wert von 150% (kurz: 1.5) lässt genug Platz nach oben und unten.

Bei einer etwaigen Änderung der Schriftgröße der Elternelemente, bzw. des gesamten Dokuments muss hier der Wert für die Schriftgröße des Buttons entsprechend angepasst werden. Besser ist es, relative Längenmaße auch für die Schriftgröße zu verwenden:

Beispiel: relative Schriftgröße und Zeilenabstand
button { 
  font-size: 125%;   
  line-height: 1.5;
}
Die Schriftgröße des Buttons wird nun auf 125% des vererbten Werts festgelegt. (Der Wert von 125% entsteht aufgrund der Beobachtung, dass die voreingestellte Schriftgröße in den meisten Browsern 16px beträgt.)
Empfehlung: Legen Sie Schriftgrößen in Prozentangaben oder relativen Längenmaßen wie em oder rem fest.

Eine Standardschriftgröße sollte, wenn überhaupt, nur zentral für das html oder body-Element festgelegt werden.

Besser ist es, die gewünschte Schriftgröße völlig dem Benutzer zu überlassen. Dies erreichen Sie, wenn Sie keine festen Schriftgrößen vorgeben!

skalierbare Werte für Ränder und Schatten[Bearbeiten]

Wenn die Schriftgröße nun geändert wird, vergrößert sich der Button. Gleichzeitig bleiben die auf die originale Größe abgestimmten Effekte unverändert, so dass die Proportionen nicht mehr stimmen und der Button „komisch“ aussieht.

Abhilfe schafft eine Verknüpfung der Ränder und Schatten mit der Schriftgröße:

Beispiel: Button mit relativen Längenmaßen ansehen …
button { 
  padding: .4em .8em; 
  background: #5a9900 linear-gradient(#8db243, #5a9900); 
  border: 1px solid green;
  border-radius: 0 0.4em 0.4em 0.4em; 
  box-shadow: 0 .2em 0.4em gray; 
  color: white;
  text-shadow: 0 -.05em .05em #333; 
  font-size: 125%; 
  line-height: 1.5;
}
In diesem Beispiel wurden alle Werte bis auf die Dicke des Rands in em notiert.
Bei einer späteren Änderung der Schiftgröße skalieren Ränder und Schatten einfach mit.

Es bleibt Ihnen überlassen, welche CSS-Festlegungen sie skalierbar, bzw. ob feste Pixelwerte erhalten bleiben sollen. Der dunkelgrüne Rand bleibt in unserem Beispiel immer ein Pixel dick, andere Werte werden skaliert.

Farbgestaltung[Bearbeiten]

Neben der Skalierbarkeit der Abmessungen sollte auch Augenmerk auf die Farbgestaltung gelegt werden. Häufig gibt es mehrere Buttons mit unterschiedlichen Funktionen auf der Webseite.

Im derzeitigen Zustand müssen die vier Deklarationen für border-color, background, box-shadow und text-shadow geändert werden. Dabei bleibt der Arbeitsaufwand für ein Berechnen der Farbwerte der einzelnen Schattierungen und Farbtöne noch unberücksichtigt. Der verwendete grauen Schatten funktioniert nur bei einem weißen Hintergrund, auf einem farbigen Hintergund wäre er wirkungslos.

Diese Mühe können Sie sich durch die Verwendung von halb-transparentem Weiß bzw, Schwarz für hellere und dunklere Farbtöne sparen:

Beispiel: Button mit relativen Farbschattierungen ansehen …
button { 
  background: #3839ab linear-gradient(hsla(0, 0%, 100%,.2), transparent); 
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 .2em 0.4em rgba(0,0,0,.5); 
  color: white;
  text-shadow: 0 -.05em .05em rgba(0,0,0,.5); 
}

button.cancel {
  background-color: #c32e04;
}

button.ok {
  background-color: #5a9900;
}
Der farbige Hintergrund wird nicht mehr mit drei Farbwerten realisiert. Der erste Wert diente ursprünglich nur als Fallback, falls der Verlauf nicht dargestellt werden konnte. Nun erfüllt er seine Funktion als Hintergrundfarbe, über die nun ein Verlauf gelegt wird. Dieser besteht aus einem weißen Farbwert mit einer Transarenz im Alphakanal von 0.2 und dem Wert transparent. Dabei wurde für den ersten Wert die hsla-Scheibweise verwendet.

Rand und die beiden Schatten werden rgba-Werte für Schwarz mit unterschiedlichen Transparenzwerten zugewiesen.

Die Farbgestaltung der beiden Buttons geschieht nun über einen einzigen Wert, die Hintergundfarbe in background-color. Der in der zusammenfassenden Eigenschaft background notierte Verlauf nimmt diese Werte auf und färbt den Button entsprechend.

Siehe auch[Bearbeiten]

Weitere Artikel zum Thema em: