Variablen , Zahlen, Einheiten

Variablen

Man kann in HTML5 Variablen definieren. Variablen haben einen Namen und einen Wert. So kann man beispielsweise einer Variablen einen Farbwert zuweisen und über den Variablennamen, diese Farben verschiedenen CSS Eigenschaften zuweisen.

Der Selektor :root in diesem Beispiel verweist auf das oberste Element in der Objekthierachie (DOM).
Die Variable beginnt immer mit 2 Bindestrichen gefolgt von einem selbstgewählten Namen.

Die Zuweisung der Variablen geschieht mit der Funktion var(--variblenname) In der Funktionsklammer darf kein Leerzeichen erscheinen.

Beispiel

:root {
  --hauptfarbe: #c32e04;
}

h1 {
  color: var(--hauptfarbe);
}
p{
    background-color: var(--hauptfarbe);
}

Man kann auch einen Fallbackwert angeben, der greift, wenn die Variable nicht vorhanden sein sollte

p{
    background-color: var(--hauptfarbe, #c32e04);
}

Oder einen Fallbacklösung, die auch bei älteren Browsern funktioniert ist folgende. Da überschreibt die zweite Anweisung die erste, wenn die Variable vorhanden ist.

p{
    background-color: #c32e04;
    background-color: var(--hauptfarbe);
}

Berechnungen calc()

Prozentuale und absolute Werte mischen

Mit der CSS3 Funktion calc() kann man in CSS3 relative Maße und absolute Maße mischen.

calc(100% - 150px)

Das Beispiel bedeutet 100 Prozent minus 150 Pixel. Auch andere Berechnungen sind möglich.

* Multiplikation
/ Division
+ Addition
- Subtraktion

Zahlen

positive und negative reelle Zahlen
Dezimaltrennzeichen ist der Punkt

Einheiten

Siehe hierzu auch das Thema font-size.

siehe unten Umrechner

Absolute Einheiten

px Pixel (abhängig von der Pixeldichte des Endgeräts)
pt Punkt (1/72 inch = 0,3527 Millimeter)
pc Pica (12 Punkt = 1/6 inch = 4,2324 Millimeter)
in Inch (2,54 cm)
cm Zentimeter
mm Millimeter

Relative Einheiten

% Prozent (benötigt eine Bezugsgröße = Vorgabe des Browsers)
em Längeneinheit entspricht der aktuellen Schriftart und Schriftgröße (1em = 100%)
ex Längeneinheit entspricht der aktuellen Schriftart und Schriftgröße (1ex = 100%) Orientierung am Buchstaben x
rem Root-em Orientiert sich ab der Schriftgröße, die für das Wurzelelement (HTML) festgelegt wurde
vw viewport-Breite (1vw ein hunderstel der Breite des Viewport)
vh viewport-Höhe (1vh ein hunderstel der Höhe des Viewport)
vmin Orientiert sich am kleineren Wert des Viewports
vmax Orientiert sich am größeren Wert des Viewports

Winkelmaße (Rotationen)

deg Grad (Ein Kreis 360°)
grad Gon (Ein Neukreis 400°)
rad Radiant (57,295° = 180 Grad / π)

Auflösung

dpi (dots per inch, Pixel pro Zoll)
dpcm (dots per cm, Pixel pro Zentimeter)

Zeitangaben (Animationen, Übergänge, Audioausgabe)

s Sekunde
ms Millisekunde

Frequenzen (Audioausgabe)

hz Hertz
khz Kilohertz

Umrechner Pixel in rem

Die Größen in em oder rem anzugeben hat den Vorteil, dass sich das Layout immer an die Schriftgröße anpasst. Die Umrechnung von Pixel in rem ist einfach:
Pixelbreite / Basisgröße = Breite in rem.
z.B: 320 Pixel / 16px,rem = 20 rem.

Umrechner feste Spaltengrößen in Prozent

Wenn man aus einem festen Gridsystem ein fluides Gridsystem erstellen will, so muss man die Pixelwerte der gefloateten Blockelemente in Prozent umrechnen:

(Spaltenbreite * 100) / Gesamtbreite des Gridsystems = Spaltenbreite in Prozent