<length>

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Der Wert <length> besteht aus einer Längenangabe. Diese setzt sich aus Zusammen aus <number> und einer Masseinheit (px, em, pc, in, mm, …). Dazwischen darf sich keinen Leerschlag oder ein anderes Zeichen befinden.

Der Wert <length> wird von vielen Eigenschaften benutzt, bspw. width, marginpadding, font-size, border-width, text-shadow

Einige Eingenschaften lassen keine negative Werte zu, andere hingegen schon. In eingigen Fällen wird auch der Wert <percentage> akzeptiert, auch wenn dieser nicht zu den <length> Werten gehört.

Interpolation

Values of the <length> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the timing function associated with the animation.

Werte

Relative Längenangaben

Relativ zur Schriftgrösse

ch
Breite der Null ("0") der aktuellen Schriftart.
width:15ch;
em
Schriftgrößen, 1em = aktuelle Schriftgröße
font-size: 12px;
height: 3em; => height: 36px
width:15em;
ex
Schrifthöhe, 1ex = aktuelle Schrifthöhe
width:15ex;
rem
Die Schriftgröße des Wurzelelements (z.B. die Schriftgröße des html Elements) .
width:15rem;

Relativ zum Viewport

Die Viewport Werte werden vom sichtbaren Teil des Dokuments abgeleitet. Sie sind also abhängig von der Festergrösse, bzw. der Grösse des Anzeigegeräts. Gecko ist dabei der einzige Browser, der die Werte bei einer Veränderung anpasst.

Inerhalb einer @page Regel sind Viewport-Werte nicht zulässig und werden ignoriert.

vh
Ein Hunderstel der Viewport Höhe.
vw
Ein Hunderstel der Viewport Breite.
vmin
Ein Hunderstel des kleineren der beiden Werte von Höhe und Breite des Viewports.
vmax
Ein Hunderstel des größeren der beiden Werte von Höhe und Breite des Viewports.

Absolute Längenangaben

px
Pixel, je nach Anzeigegerät
width:150px;
cm
Zentimeter
width:10cm;
mm
Millimeter, 1mm = 0,1cm
width:10mm;
in
Zoll, 1in = 2.54cm
width:10in;
pc
Picas, 1pc = 12pt = 1/6in
width:10pc;
pt
Punkte, 1pt = 1/72in
width:10pt;
mozmm
Berechnet unter berücksichtigung der Auflösung genau einen Millimenter.

Absolute Werte, mit ausnahme von mozmm Sind immer abhängig von der Auflösung des Anzeigegeräts.

Der Wert in bspw. ist nicht immer ein Zoll, sondern entspricht 96px. Der Wert entspricht nur einem Zoll auf einer Anzeige von 96dpi, bei anderen Auflösungen variiert der Wert entsprechend.

Spezifikations

Spezifikation Status Anmerkung
CSS Values and Units Module Level 3
Die Definition von '<length>' in dieser Spezifikation.
Anwärter Empfehlung ch, rem, vw, vh, vmin, vmax hinzugefügt
CSS Level 2 (Revision 1)
Die Definition von '<length>' in dieser Spezifikation.
Empfehlung pt, pc, px definiert
CSS Level 1
Die Definition von '<length>' in dieser Spezifikation.
Empfehlung  

Browser Kompatibilität

Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 oder früher) 3.0 3.5 1.0
ch 27 1.0 (1.7 oder früher) [1] 9.0 Nicht unterstützt Nicht unterstützt
rem 4 (532.3) 3.6 (1.9.2) 9.0 11.6 4.1
vh, vw 20 19 (19) 9.0 Nicht unterstützt 6.0
vmin

20

19 (19) 9.0 (with the non-standard name vm) Nicht unterstützt 6.0
vmax 26 19 (19) Nicht unterstützt Nicht unterstützt Nicht unterstützt (537.30)
Viewport-percentage lengths invalid in @page ? 21 (21) ? ? ?
mozmm Nicht unterstützt 4.0 (2.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
1in always is 96dpi (Ja) 4.0 (2.0) (Ja) (Ja) (Ja)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Ja) (Ja) (Ja) (Ja) (Ja)
ch Nicht unterstützt (Ja) ? ? ?
rem 2.1 (Ja) ? 12.0 4
vh, vw, vmin (Ja) 19.0 (19) ? Nicht unterstützt 6.0
vmax Nicht unterstützt (bug 91440) 19.0 (19) ? Nicht unterstützt Nicht unterstützt (bug 91440)
Viewport-percentage lengths invalid in @page ? 21.0 (21.0) ? ? ?

[1] In Gecko 1.0-1.9.0 (Firefox 1.0-3.0) ch was the width of 'M' and it didn't work for border-width and outline-width CSS properties.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, supermueller, fscholz, Lucky42, SJW
 Zuletzt aktualisiert von: Sebastianz,