Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

<percentage>

Übersicht

Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Viele CSS Eigenschaften akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen <number> Wert unmittelbar gefolgt von einem Prozentzeichen % angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.

Viele Längeneigenschaften verwenden Prozentwerte, wie width, margin und padding. Prozentwerte können auch in font-size vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.

Hinweis: Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen <length> Wert, verwendet, nicht der Prozentwert.

Interpolation

Werte des <percentage> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die Timingfunktion bestimmt, die mit der Animation verbunden ist.

Beispiele

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div>
</div> 

Ergibt:

<div style="font-size:18px;">
  Text in Normalgröße (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

Ergibt:

Spezifikation

Spezifikation Status Kommentar
CSS Values and Units Module Level 3
Die Definition von '<percentage>' in dieser Spezifikation.
Anwärter Empfehlung Keine signifikante Änderung zu CSS Level 2 (Revision 1)
CSS Level 2 (Revision 1)
Die Definition von '<percentage>' in dieser Spezifikation.
Empfehlung Keine Änderung zu CSS Level 1
CSS Level 1
Die Definition von '<percentage>' in dieser Spezifikation.
Empfehlung  

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung yes yes yes yes yes

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: Sebastianz, Prinz_Rana, fscholz
 Zuletzt aktualisiert von: Sebastianz,