Optimierung - Tipps, Tricks und Vereinfachungen bei den CSS-Dateien

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Was kann beim Erstellen von CSS-Dateien vereinfacht werden?

20Mär2014

Tipps, Tricks und Vereinfachungen bei den CSS-Dateien


Im Laufe der Erstellung dieser Webseiten sind mir einige Dinge immer wieder untergekommen, auf die ich zurückgreifen musste, oder wo ich mir entsprechende Hilfen suchen musste. Diese kleineren Tipps und Tricks beim Erstellen von CSS (Cascading Style Sheet)-Dateien werden hier hintereinander aufgeschrieben und festgehalten.
Zum Beispiel die vereinfachten Schreibweisen bei "padding" oder "margin", das Zentrieren einer Box, die Fehlerbehebung des Box-Model und noch vieles mehr.


Übersicht der Themen auf dieser Seite


Innenabstand: padding

Der Innenabstand "padding" legt den Abstand zwischen dem Inhalt und den Rändern fest. Zur Vereinfachung kann man folgende Angaben machen:

  • Ein Wert gilt für den Abstand:
    1. Wert: oben, unten, links und rechts
  • Zwei Werte gelten für den Abstand:
    1. Wert: oben und unten, 2. Wert: links und rechts
  • Drei Werte gelten für den Abstand:
    1. Wert: oben, 2. Wert: links und rechts, 3. Wert: unten
  • Vier Werte gelten für den Abstand:
    1. Wert: oben, 2. Wert: rechts, 3. Wert: unten, 4. Wert: links

Benötigt man nur einen Wert, so lohnt sich für die Optimierung der CSS (Cascading Style Sheet)-Dateien die folgende Schreibweise:

  • Innenabstand oben: padding-top
  • Innenabstand rechts: padding-right
  • Innenabstand unten: padding-bottom
  • Innenabstand links: padding-left
#divpad1 {
    background: #e0f2f4;
    border: 1px solid #000;
    padding: 0;
}
Hier ist kein Innenabstand aufgeführt "padding: 0".
Die Höhe wird vom Text und die Breite vom Elternelement, dem "div-Container" mit dem Namen "rahmen", begrenzt.
#divpad2 {
    ...
    padding: 20px 100px;
}
Hier ist ein Innenabstand mit "padding: 20px 100px" aufgeführt.
Damit ist der Abstand des Textes oben und unten auf 20 Pixel und links und rechts auf 100 Pixel vom Rand festgelegt.

Außenabstand: margin

Der Außenabstand "margin" erzeugt einen transparenten Abstand zu einem anderen Element und wirkt sich nicht auf das Hintergrundbild oder die Hintergrundfarbe aus. Zur Vereinfachung kann man folgende Angaben machen:

  • Ein Wert gilt für den Abstand:
    1. Wert: oben, unten, links und rechts
  • Zwei Werte gelten für den Abstand:
    1. Wert: oben und unten, 2. Wert: links und rechts
  • Drei Werte gelten für den Abstand:
    1. Wert: oben, 2. Wert: links und rechts, 3. Wert: unten
  • Vier Werte gelten für den Abstand:
    1. Wert: oben, 2. Wert: rechts, 3. Wert: unten, 4. Wert: links

Auch hierfür gilt: Nutzt man nur einen Wert, benötigt die folgende Schreibweise etwas weniger Speicherplatz:

  • Außenabstand oben: margin-top
  • Außenabstand rechts: margin-right
  • Außenabstand unten: margin-bottom
  • Außenabstand links: margin-left
#divmar1 {
    background: #e0f2f4;
    border: 1px solid #000;
    margin: 0;
}
Hier ist kein Außenabstand aufgeführt "margin: 0".
Die Höhe der Box wird vom Text und die Breite vom Elternelement, dem "div-Container" mit dem Namen "rahmen", begrenzt. Der Abstand links und rechts vom Seitenrand ergibt sich aus der Angabe "padding: 2em" in der Deklaration des "div-Container".
#divmar2 {
    ...
    margin: 40px 30px;
}
Hier ist ein Außenabstand mit "margin: 40px 30px" aufgeführt.
Damit ist der Abstand der Box oben und unten auf 40 Pixel und links und rechts auf 30 Pixel vom Rand festgelegt.

Radius: border-radius

Die Eigenschaft "border-radius" wird für Rahmen mit abgerundeten Ecken verwendet. Zur Vereinfachung kann man folgende Angaben machen:

  • Ein Wert gilt für alle vier Ecken:
    1. Wert: oben links, oben rechts, unten rechts und unten links
  • Zwei Werte gelten für folgende Ecken:
    1. Wert: oben links und unten rechts, 2. Wert: oben rechts und unten links
  • Drei Werte gelten für folgende Ecken:
    1. Wert: oben links, 2. Wert: oben rechts und unten links, 3. Wert: unten rechts
  • Vier Werte gelten für folgende Ecken:
    1. Wert: oben links, 2. Wert: oben rechts, 3. Wert: unten rechts, 4. Wert: unten links
  • Slash "/" Schreibweise gelten für elliptische Ecken:
    Werden weitere Werte nach einem Slash "/" notiert, werden die Werte vor dem Slash für den horizontalen Radius, und die Werte nach dem Slash für den vertikalen Radius verwendet.

Ein Beispiel mit drei Angaben.

#divrad1 {
    line-height: 1.5em;
    margin: 10px;
    padding: 20px;
    background: #e0f2f4;
    border: 1px solid #000;
    border-radius: 10px 35px 50px;
}
Hier ist ein Radius mit "border-radius: 10px 35px 50px" aufgeführt.
Der Radius oben links beträgt 10Pixel, oben rechts und unten links beträgt der Radius 35Pixel und unten rechts beträgt er 50Pixel.

Und ein Beispiel für elliptische Ecken.

#divrad2 {
    ...
    border-radius: 10px 35px 50px / 50px;
}
Hier ist ein Radius mit "border-radius: 10px 35px 50px / 50px;" aufgeführt.
Der Radius auf der horizontalen Ebene ist wie in dem vorherigen Beispiel festgelegt. Für den vertikalen Radius ist dann für alle Ecken ein Radius von 50 Pixel ausgewählt.

Zentrieren der Box mit dem Außenabstand: margin

Möchte man einen Container mit einer bestimmten Breite, zum Beispiel 80% der Seite, horizontal zentrieren, so geschieht das mit der Angabe "margin: 0 auto".

#divmar3 {
    width: 80%;
    background: #e0f2f4;
    border: 1px solid #000;
    margin: 20px;
}
Mit "margin: 20px" wird die Box mit einem Abstand von 20 Pixel vom oberen und linken Rand gesetzt. Der Abstand nach rechts ergibt sich aus der Breitenangabe der Box mit 80%.
#divmar4 {
    ...
    margin: 20px auto;
}
Mit "margin: 20px auto" wird die Box horizontal zentriert.

Der Fehler beim Box Model und deren Behebung

Ein großes Problem ist die Festlegung der Breite einer Box. Denn zu der festgelegten Breite "width" kommen noch der Innenabstand "padding" und der Rahmen "border" hinzu.

#divmar5 {
    width: 80%;
    background: #e0f2f4;
    margin: 20px auto;
    border: 10px solid #000;
    padding: 20px;
}
Bei dieser Box ist eine Breite von 80% der Seite angegeben, aber es kommen noch 20 Pixel für den Innenabstand und 10 Pixel durch den Rand nach allen Seiten hinzu.
#divmar6 {
    width: 80%;
    background: #e0f2f4;
    margin: 20px auto;
}
Dies ist eine Box mit der gleichen Breite aber ohne Rahmen und Innenabstand
#divmar7 {
    width: 80%;
    background: #e0f2f4;
    margin: 20px auto;
    border: 10px solid #000;
    padding: 20px;
    box-sizing: border-box;
}
Und das ist wieder die Box mit einer Breite von 80% der Seite, 20 Pixel für den Innenabstand und 10 Pixel für den Rand.
Aber durch die Eigenschaft "box-sizing: border-box" werden die Werte von "padding" und "border" nicht mehr der Breite hinzugerechnet!

Erzeugen eines doppelten Rand um eine Box

Für die Einblendung einer Diashow wollte ich einen doppelten, farbigen Rand um die Bilder legen. Mit zwei einfachen Deklarationen im CSS (Cascading Style Sheet) mit "border" und "outline" ist das möglich.

#rand {
    width: 50%;
    background: #e0f2f4;
    margin: 40px auto;
    border: 10px solid #000;
    outline: 10px solid #497cab;
}

Hier erscheint zum Beispiel ein beliebiger Text, aber auch bei einem Bild bleibt der Rand bestehen.


Ein Rand nur auf drei Seiten einer Box

Für die Einblendung eines Textes bei einem Slider wollte ich nur an drei Seiten einen weißen Rand und dafür benötigte ich anstatt drei Zeilen im CSS (Cascading Style Sheet) nur zwei Zeilen.

#erand h3 {
    color: #497cab;
    font: bolder 1.6em/2 Arial;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 2px 5px 1px #101010, 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    height: 2.3em;
    width: 50%;
    margin: 40px auto;

    border: 1px solid #000;
    border-left: 0;
}

Höchenschwand


Darstellung der verschiedenen zeitlichen Funktionen bei der transition-timing-function

Für den zeitlichen Verlauf einer Transition oder Animation gibt es verschiedene Möglichkeiten der Einstellung, die ich nachfolgend einmal visuell verdeutliche, in dem Sie mit dem Mauszeiger über das Feld gehen.

default
linear
ease-in
ease-out
ease-in-out
cubic-bezier
steps
  • "default" (Standard): Die Transition beginnt langsam, nimmt schnell Geschwindigkeit auf und endet wieder langsam.
  • "linear": Gleichbleibende Geschwindigkeit.
  • "ease-in": Die Transition beginnt langsam und endet schnell.
  • "ease-out": Die Transition startet schnell und endet langsam.
  • "ease-in-out": Die Transition beginnt und endet langsam, in der Mitte ist die Geschwindigkeit am höchsten.
  • "cubic-bezier(x1, y1, x2, y2)": Die Transition ist frei einstellbar. Die ersten zwei Werte bestimmen die Startgeschwindigkeit, der dritte und vierte Wert die Endgeschwindigkeit. Der Geschwindigkeitsverlauf ergibt sich aus der Kurve, welche Start- und Endpunkt verbindet. In diesem Beispiel ist ein leichtes Überschwingen eingestellt (cubic-bezier(0.1, 0.1, 0.2, 1.2)).
  • "steps(x1, y1, x2, y2)": Die Transition springt von Sekunde zu Sekunde, und verweilt jeweils eine Sekunde (steps(3,start)).

Für die Dauer der Transition habe ich 2 Sekunden gewählt. Die Schreibweise wird im folgenden CSS (Cascading Style Sheet) am Beispiel der "ease-in-out"-Funktion dargestellt

#divttf .balken {
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

Oder die verkürzte Schreibweise:

#divttf .balken {
    transition: 2s ease-in-out;
}

Eigenschaften der Schrift in einer CSS-Regel: font

In einem CSS (Cascading Style Sheet) kann die Schriftart, Schriftgröße, Schriftvariante, Schriftstil, Schriftgewichtung und Zeilenhöhe für die verwendete Schrift festgelegt werden. CSS font ist die entsprechende Kurzschrift bei der alle sechs Eigenschaften in einer Regel zusammengefasst werden. In der nachfolgenden Liste habe ich sie der Reihe nach aufgeführt:

  • Schriftstil: font-style:
    Der Schriftstil kann kursiv, normal oder schräg gestellt werden. Wobei zwischen kursiv und schräg gestellt kaum ein Unterschied zu sehen ist.
    Erlaubt sind die Schlüsselworte: italic, normal, oblique.
  • Schriftvariante: font-variant:
    Durch diese Eigenschaft kann man alle Buchstaben als Großbuchstaben darstellen. Wirkliche Großbuchstaben werden dann noch größer dargestellt.
    Erlaubt sind die Schlüsselworte: small-caps (Kapitälchen), normal.
  • Schriftgewichtung: font-weight:
    Diese Eigenschaft legt fest, wie fett eine Schrift dargestellt wird.
    Erlaubt sind Zahlen (100 - 900) und die Schlüsselworte: normal, bold, bolder, lighter.
  • Schriftgröße: font-size:
    Durch diese Eigenschaft kann man die Schriftgröße anpassen.
    Erlaubt sind Größenangaben, Prozentangaben und die Schlüsselworte: xx-small, x-small, small, medium, large, x-large, xx-large.
  • Zeilenhöhe: line-height:
    Auf diese Weise lässt sich der Zeilenabstand bestimmen.
    Erlaubt sind Werte, Größenangaben oder Prozentangaben.
  • Schriftart: font-family:
    Der Wert gibt entweder eine Schriftart oder eine Schriftfamile an.
    Es ist möglich mehrere Schriftarten, durch ein Komma getrennt, anzugeben. Die erste Schriftart die auf dem Betriebssystem des Besuchers installiert ist, wird dargestellt. Schriftarten die ein Leerzeichen enthalten, zum Beispiel "Comic Sans MS", müssen in Anführungszeichen gesetzt werden.
    Daneben sind noch die folgenden generischen Schriftfamilien definiert:
    • "serif", eine Schriftart mit Serifen (Serifen (franz. Füßchen) sind Verzierungen am Anfang oder Ende von Buchstabenstrichen)
    • "sans-serif", eine Schriftart ohne Serifen
    • "cursive", eine Schriftart für Schreibschrift
    • "monospace", eine Schriftart mit dicktengleichen Zeichen (Buchstaben, Ziffern und Leerzeichen haben die gleiche Zeichenbreite)

Die Kurzschreibweise für diesen Satz sieht zum Beispiel wie folgt aus:

                                   Schriftfamilie: font-family: --+
                                                                  |
                   Schriftart: font-family (Alternative) --+      |
                                                           |      |
     Schriftart: font-family (bevorzugt) --+               |      |
                                           |               |      |
p {                                        |               |      |
    font: italic small-caps 700 1.6em/1.3 'Comic Sans MS', Arial, cursive;
}         |      |          |   |     |
          |      |          |   |     |
          |      |          |   |     +-- Zeilenhöhe: line-height
          |      |          |   |
          |      |          |   +-- Schriftgröße: font-size
          |      |          |
          |      |          +-- Schriftgewichtung: font-weight
          |      |
          |      +-- Schriftvariante: font-variant
          |
          +-- Schriftstil: font-style

Man muss nicht alle Angaben machen, aber zwingend sind die Angaben "font-size" und "font-family". Wird eine Zeilenhöhe angegeben, muss der Schrägstrich vor "line-height" gesetzt werden. Er trennt die Schriftgröße von der Zeilenhöhe (line-height). Durch diese Kurzschreibweise habe ich meine CSS (Cascading Style Sheet)-Dateien wieder um einige Bits verkleinert.

Zum Seitenanfang springen Λ