Prozentwerte in CSS

Prozentangaben bestehen stets aus einer numerischen Angabe, an die ohne Zwischenraum der Identifizierer % angehängt ist. Negative Prozentangaben sind erlaubt, der Angabe kann das Zeichen '+' oder '-' vorangestellt werden.

Beispiele:

{ width: 80%; }
{ pause: +5%; }
{ right: -3%; }

Prozentangaben sind relative Werte, die sich immer auf einen anderen Wert beziehen. Dafür gibt es grundsätzlich nur drei Möglichkeiten:

Der Prozentwert einer Eigenschaft bezieht sich auf den Wert einer anderen Eigenschaft desselben Elementes, z. B. ist ein Prozentwert für line-height abhängig von der font-size desselben Elements.
Der Prozentwert einer Eigenschaft bezieht sich auf den Wert einer Eigenschaft eines Vorfahrenelementes, z. B. ist ein Prozentwert für font-size abhängig von der font-size des Elternelements.
Der Prozentwert einer Eigenschaft bezieht sich auf den Kontext der Formatierung, z. B. ist ein Prozentwert für width oder height abhängig von der Breite oder Höhe des umschließenden Elements.

Umrechnung:

Mit der Einführung von CSS 2.1 wurden die Umrechnung von Prozentwerten und von relativen Längenwerten vereinheitlicht. Sie folgt jetzt einem neuen vierstufigen Ablauf, der im Folgenden dargestellt ist:

Spezifizierter Wert → Berechneter Wert → Verwendeter Wert → Aktueller Wert.

Jeder Eigenschaft wird zunächst, basierend auf den Deklarationen aller zutreffenden Stylesheets, mit Hilfe der folgenden Prozedur ein Spezifizierter Wert zugeordnet. Dies ist der Wert, der vorgegeben ist:
1. Wenn die Kaskade einen Wert ergibt, verwende diesen.
2. Bei der Vererbung von einem Elternelement nutze den Berechneten Wert des Elternelementes.
3. Anderenfalls verwende den Ausgangswert der Eigenschaft.
Daraus wird anschließend mit Hilfe der Kaskade der Berechnete Wert abgeleitet.
1. Wenn der spezifizierte Wert nicht inherit ist, dann wird der berechnete Wert so ermittelt, wie es unter dem Stichwort 'Berechneter Wert' in der Beschreibung jeder Eigenschaft festgelegt ist.
2. Im Falle der Vererbung ist der vom Elternelement ererbte Wert gleichzeitig der spezifizierte Wert und der berechnete Wert.
Der berechnete Wert ist der Wert, der an die Kindelemente weitervererbt wird. Deshalb existiert er auch dann, wenn die zugehörige Eigenschaft auf ein Element nicht anwendbar ist. Berechnete Werte können auch voneinander abhängig sein, beispielsweise wenn es sich um eine Prozentangabe handelt.
Ist ein Wert nicht direkt in Pixel angegeben, sondern in Prozent, Ems, Exs oder anderen relativen Einheiten, wird dieser Wert im nächsten Schritt in Pixel umgerechnet. Das Ergebnis ist der Verwendete Wert. Dies ist der endgültige absolute Wert, der grundsätzlich an das eigentliche Layout angebracht wird.
In einigen Fällen ist der verwendete Wert auf Grund äußerer Umstände aber noch nicht zur Benutzung geeignet. Deshalb muss als vierter Schritt noch ein Rundungsverfahren nachgeschaltet werden. Dies ist zum Beispiel bei der Bildschirmausgabe der Fall, wo zur Darstellung in Pixeln ganze Zahlen benötigt werden, oder bei Systemen, die nur eine begrenzte Anzahl von Farben darstellen können. Das Ergebnis ist der Aktuelle Wert, der angewendet wird, wenn alle nötigen Rundungen durchgeführt wurden.

Beispiel zur Vererbung von Prozentwerten

Ein div-Container ist mit dem Wert 50% für die Breite deklariert. Darin befindet sich ein Absatz, der den Breitenwert erbt:

Bei einer Bildschirmbreite von 1152 Pixel berechnet der Browser die Breite des div-Containers mit 576 Pixel. Dies ist der berechnete Wert, der an den Absatz weitervererbt wird. Der Prozentsatz wird nicht vererbt. Der Absatz ist deshalb ebenfalls 576 Pixel breit, nicht 288 Pixel. (padding, border und margin werden natürlich berücksichtigt.)

Verwendung

Für jede Eigenschaft ist individuell definiert, auf welche der drei erlaubten Arten ein Prozentwert dort angewendet wird. Die folgende Tabelle ist eine Zusammenfassung für alle Eigenschaften, die Prozentwerte zulassen.

Eigenschaften	Bezugswert	Erläuterungen
`background-color`	`#fff` oder `rgb(255,255,255)`	Es müssen drei Werte angegeben werden im Format `rgb(xx%,xx%,xx%)`.
`background-position`	Box des zugehörigen Elements	Ein oder zwei Werte können angegeben werden. Sie gelten für die Lage der UrsprungsGrafik innerhalb der `padding`-Kante der Box.
`bottom`	Höhe des umschließenden Blocks.	Wenn die Höhe des umschließenden Blocks nicht explizit gegeben ist, wird der Prozentwert wie `auto` gewertet. Negative Werte sind erlaubt.
`color`	`#fff` oder `rgb(255,255,255)`	Es müssen drei Werte angegeben werden im Format `rgb(xx%,xx%,xx%)`.
`font-size`	Der berechnete Wert der `font-size` des Elternelementes.	Bei Umrechnungen aus Prozentwerten soll die Skaliertabelle für absolute Werte unberücksichtigt bleiben. Negative Werte sind nicht erlaubt.
`height`	Höhe des umschließenden Blocks.	Wenn die Höhe des umschließenden Blocks nicht explizit spezifiziert wurde, d. h. wenn sie von der Höhe des Inhalts abhängt, werden Prozentwerte wie `auto` interpretiert. Negative Werte sind nicht erlaubt.
`left`	Breite des umschließenden Blocks.	Negative Werte sind erlaubt.
`line-height`	Berechneter Wert der `font-size` des Elements.	Negative Werte sind illegal.
`margin`	Breite des umschließenden Blocks.	Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind erlaubt.
`margin-[t\|r\|b\|l]`	Breite des umschließenden Blocks.	Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Für `margin-top` und `margin-bottom` ist bei Druckausgabe (auch für die Vorschau auf dem Bildschirm) die Seitenhöhe, d. h. die Höhe des umschließenden Blocks, die maßgebliche Größe. Negative Werte sind erlaubt.
`max-height`	Höhe des umschließenden Blocks.	Die Höhe des umschließenden Blocks muss explizit definiert sein. Ist das nicht der Fall, wird der deklarierte Wert wie `none` interpretiert. Negative Werte sind nicht erlaubt.
`max-width`	Breite des umschließenden Blocks.	Negative Werte sind nicht erlaubt.
`min-height`	Höhe des umschließenden Blocks.	Die Höhe des umschließenden Blocks muss explizit definiert sein. Ist das nicht der Fall, wird der deklarierte Wert wie `0` interpretiert. Negative Werte sind nicht erlaubt.
`min-width`	Breite des umschließenden Blocks.	Negative Werte sind nicht erlaubt.
`padding`	Breite des umschließenden Blocks.	Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind nicht erlaubt.
`padding-[t\|r\|b\|l]`	Breite des umschließenden Blocks.	Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind nicht erlaubt.
`pause`	Invertierter Wert der Sprechgeschwindigkeit (`speech-rate`).	Der invertierte Wert entspricht der Wortlänge, diese wird mit `100%` gleichgesetzt.
`pause-after`	Invertierter Wert der Sprechgeschwindigkeit (`speech-rate`).	Der invertierte Wert entspricht der Wortlänge, diese wird mit `100%` gleichgesetzt.
`pause-before`	Invertierter Wert der Sprechgeschwindigkeit (`speech-rate`).	Der invertierte Wert entspricht der Wortlänge, diese wird mit `100%` gleichgesetzt.
`right`	Breite des umschließenden Blocks.	Negative Werte sind erlaubt.
`text-indent`	Breite des umschließenden Blocks.	(Keine.)
`top`	Höhe des umschließenden Blocks.	Wenn die Höhe des umschließenden Blocks nicht explizit gegeben ist, wird der Prozentwert wie `auto` gewertet. Negative Werte sind erlaubt.
`vertical-align`	`line-height` des Elements.	Positive Werte heben, negative Werte senken die Box um den angegebenen Wert. `0%` hat die gleiche Wirkung wie `baseline`.
`volume`	Ererbter Wert.	Der berechnete Wert wird auf `100%` zurückgesetzt, wenn er größer als 100 ist und auf `0%` zurückgesetzt, wenn er negativ ist.
`width`	Breite des umschließenden Blocks.	Wenn die Breite des umschließenden Blocks von der Breite des aktuellen Elements abhängt, dann ist das Ergebnislayout undefiniert. Negative Werte sind nicht erlaubt.

TOP

Notizen: