Funktionen

Bisher haben Sie in diesem Kurs mehrere CSS-Funktionen kennengelernt. Im Modul Raster haben Sie minmax() und fit-content() kennengelernt, mit denen Sie die Größe von Elementen festlegen können. Im Modul color haben Sie rgb() und hsl() kennengelernt, mit denen Sie Farben definieren können.

Wie viele andere Programmiersprachen bietet CSS viele integrierte Funktionen, auf die Sie bei Bedarf zugreifen können.

Jede CSS-Funktion hat einen bestimmten Zweck. In dieser Lektion erhalten Sie einen allgemeinen Überblick, der Ihnen ein besseres Verständnis dafür vermittelt, wo und wie Sie sie verwenden können.

Was ist eine Funktion?

Eine Funktion ist ein benanntes, in sich geschlossenes Code-Snippet, das eine bestimmte Aufgabe erledigt. Eine Funktion wird benannt, damit Sie sie in Ihrem Code aufrufen und Daten an die Funktion übergeben können. Dies wird als Übergeben von Argumenten bezeichnet.

Ein Diagramm einer Funktion, wie oben beschrieben

Viele CSS-Funktionen sind reine Funktionen. Das bedeutet, dass sie immer dasselbe Ergebnis zurückgeben, wenn Sie ihnen dieselben Argumente übergeben, unabhängig davon, was im Rest Ihres Codes passiert. Diese Funktionen werden häufig neu berechnet, wenn sich Werte in Ihrem CSS ändern, ähnlich wie bei anderen Elementen der Sprache, z. B. bei berechneten kaskadierten Werten wie currentColor.

In CSS können Sie nur die bereitgestellten Funktionen verwenden, anstatt eigene zu schreiben. In einigen Kontexten können Funktionen jedoch verschachtelt werden, was ihnen mehr Flexibilität verleiht. Darauf gehen wir später in diesem Modul noch genauer ein.

Funktionelle Auswahl

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Im Modul zu Pseudoklassen haben Sie bereits funktionale Auswahlkriterien kennengelernt, darunter Funktionen wie :is() und :not(). Die an diese Funktionen übergebenen Argumente sind CSS-Selektoren, die dann ausgewertet werden. Wenn eine Übereinstimmung mit Elementen vorliegt, wird der Rest der CSS-Regel auf sie angewendet.

Benutzerdefinierte Properties und var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Eine benutzerdefinierte Property ist eine Variable, mit der Sie Werte in Ihrem CSS-Code tokenisieren können. Benutzerdefinierte Properties sind ebenfalls von der Kaskade betroffen, d. h., sie können kontextbezogen manipuliert oder neu definiert werden. Benutzerdefinierte Properties müssen mit zwei Bindestriche (--) beginnen. Bei der Groß- und Kleinschreibung wird unterschieden.

Die Funktion var() benötigt ein Argument: das benutzerdefinierte Attribut, das Sie als Wert zurückgeben möchten. Im obigen Snippet wird der Funktion var() das Argument --base-color übergeben. Wenn --base-color definiert ist, wird der Wert von var() zurückgegeben.

.my-element {
    background: var(--base-color, hotpink);
}

Sie können auch einen Fallback-Deklarationswert an die var()-Funktion übergeben. Wenn --base-color also nicht gefunden werden kann, wird stattdessen die übergebene Deklaration verwendet. In diesem Beispiel ist das die Farbe hotpink.

Funktionen, die einen Wert zurückgeben

Die Funktion var() ist nur eine von vielen CSS-Funktionen, die einen Wert zurückgeben. Funktionen wie attr() und url() haben eine ähnliche Struktur wie var(): Sie übergeben ein oder mehrere Argumente und verwenden sie auf der rechten Seite der CSS-Deklaration.

a::after {
  content: attr(href);
}

Die Funktion attr() nimmt hier den Inhalt des Attributs href des Elements <a> und setzt es als content des Pseudoelements ::after. Wenn sich der Wert des href-Attributs des <a>-Elements ändert, wird dies automatisch in diesem content-Attribut berücksichtigt.

.my-element {
    background-image: url('/path/to/image.jpg');
}

Die Funktion url() nimmt eine String-URL als Eingabe an und wird zum Laden von Bildern, Schriftarten und Inhalten verwendet. Wenn keine gültige URL übergeben wird oder die Ressource, auf die die URL verweist, nicht gefunden werden kann, gibt die Funktion url() nichts zurück.

Farbfunktionen

Im Modul color haben Sie alles über Farbfunktionen erfahren. Falls Sie diesen Artikel noch nicht gelesen haben, sollten Sie dies unbedingt nachholen.

Zu den verfügbaren Farbfunktionen in CSS gehören rgb(), rgba(), hsl(), hsla(), hwb(), lab() und lch(). Sie haben alle ein ähnliches Format, bei dem Konfigurationsargumente übergeben und eine Farbe zurückgegeben wird.

Mathematische Ausdrücke

Wie viele andere Programmiersprachen bietet CSS nützliche mathematische Funktionen, die bei verschiedenen Arten von Berechnungen helfen.

calc()

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 7.

Source

Die Funktion calc() verwendet einen einzelnen mathematischen Ausdruck als Parameter. Dieser mathematische Ausdruck kann eine Mischung aus verschiedenen Typen sein, z. B. Länge, Zahl, Winkel und Häufigkeit. Die Einheiten können auch gemischt werden.

.my-element {
    width: calc(100% - 2rem);
}

In diesem Beispiel wird die calc()-Funktion verwendet, um die Breite eines Elements auf 100% des übergeordneten Elements festzulegen und dann 2rem von diesem berechneten Wert abzuziehen.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

Die calc()-Funktion kann in einer anderen calc()-Funktion verschachtelt werden. Sie können benutzerdefinierte Properties auch in einer var()-Funktion als Teil eines Ausdrucks übergeben.

min() und max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

Die Funktion min() gibt den kleinsten berechneten Wert der übergebenen Argumente zurück. Die Funktion max() macht das Gegenteil: Sie gibt den größten Wert der übergebenen Argumente zurück.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

In diesem Beispiel sollte die Breite der kleinste Wert zwischen 20vw (20% der Breite des Darstellungsbereichs) und 30rem sein. Die Höhe sollte der größte Wert zwischen 20vh (20% der Darstellungshöhe) und 20rem sein.

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

Die Funktion clamp() benötigt drei Argumente: die Mindestgröße, die ideale Größe und die maximale Größe.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

In diesem Beispiel ist font-size je nach Breite des Darstellungsbereichs variabel. Die vw-Einheit wird einer rem-Einheit hinzugefügt, um das Zoomen des Bildschirms zu unterstützen, da eine vw-Einheit unabhängig von der Zoomstufe immer dieselbe Größe hat. Durch die Multiplikation mit einer rem-Einheit, die auf der Basisschriftgröße basiert, erhält die clamp()-Funktion einen relativen Berechnungspunkt.

Weitere Informationen zu den Funktionen min(), max() und clamp() finden Sie in diesem Artikel.

Formen

Bei den CSS-Eigenschaften clip-path, offset-path und shape-outside werden Formen verwendet, um den Bereich visuell zu zuschneiden oder eine Form bereitzustellen, um die Inhalte herum zu fließen.

Es gibt Formfunktionen, die mit beiden Properties verwendet werden können. Für einfache Formen wie circle(), ellipse() und inset() können Konfigurationsargumente zur Größenänderung verwendet werden. Für komplexere Formen wie polygon() werden kommagetrennte Paare von X‑ und Y‑Achsenwerten verwendet, um benutzerdefinierte Formen zu erstellen.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Ähnlich wie bei polygon() gibt es auch die Funktion path(), die eine SVG-Füllungsregel als Argument verwendet. So lassen sich sehr komplexe Formen erstellen, die in einem Grafiktool wie Illustrator oder Inkscape gezeichnet und dann in Ihr CSS-Dokument kopiert werden können.

Transformationen

Zum Abschluss dieser Übersicht über CSS-Funktionen kommen wir zu den Transformierungsfunktionen, mit denen sich ein Element verzerren, verkleinern und sogar die Tiefe ändern lässt. Alle folgenden Funktionen werden mit dem Attribut transform verwendet.

Rotation

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Mit der Funktion rotate() können Sie ein Element um seine Mittelachse drehen. Sie können auch die Funktionen rotateX(), rotateY() und rotateZ() verwenden, um ein Element stattdessen um eine bestimmte Achse zu drehen. Sie können Grad, Umdrehungen und Radiante übergeben, um den Drehwinkel festzulegen.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

Die Funktion rotate3d() nimmt vier Argumente an.

Browser Support

  • Chrome: 12.
  • Edge: 12.
  • Firefox: 10.
  • Safari: 4.

Source

Die ersten drei Argumente sind Zahlen, die die X-, Y- und Z-Koordinaten definieren. Das vierte Argument ist die Drehung, die wie bei den anderen Drehfunktionen Grad, Winkel und Umdrehungen akzeptiert.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Skalieren

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Sie können die Skalierung eines Elements mit transform und der Funktion scale() ändern. Die Funktion akzeptiert eine oder zwei Zahlen als Wert, die eine positive oder negative Skalierung bestimmen. Wenn Sie nur ein Zahlenargument definieren, werden sowohl die X- als auch die Y-Achse gleich skaliert. Die Definition beider ist eine Kurzform für X und Y. Ähnlich wie bei rotate() gibt es die Funktionen scaleX(), scaleY() und scaleZ(), um ein Element stattdessen entlang einer bestimmten Achse zu skalieren.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Ähnlich wie bei der Funktion rotate gibt es auch die Funktion scale3d(). Diese Funktion ähnelt scale(), nimmt aber drei Argumente an: den X-, Y- und Z-Maßstab.

Übersetzen

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Mit den Funktionen translate() wird ein Element verschoben, während es seine Position im Dokumentfluss beibehält. Sie akzeptieren Längen- und Prozentwerte als Argumente. Die Funktion translate() verschiebt ein Element entlang der X-Achse, wenn ein Argument definiert ist, und entlang der X- und Y-Achse, wenn beide Argumente definiert sind.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Wie bei anderen Transformationsfunktionen können Sie auch hier mit translateX, translateY und translateZ bestimmte Funktionen für eine bestimmte Achse verwenden. Sie können auch translate3d verwenden, um die X-, Y- und Z-Verschiebung in einer Funktion zu definieren.

Skewing

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Sie können ein Element mit den Funktionen skew() verzerren, die Winkel als Argumente akzeptieren. Die Funktion skew() funktioniert sehr ähnlich wie translate(). Wenn Sie nur ein Argument definieren, wirkt es sich nur auf die X-Achse aus. Wenn Sie beide definieren, wirkt es sich auf die X- und Y-Achse aus. Sie können auch skewX und skewY verwenden, um die einzelnen Achsen unabhängig voneinander zu beeinflussen.

.my-element {
  transform: skew(10deg);
}

Perspektive

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Mit der Property perspective, die zur Gruppe der Transformierungseigenschaften gehört, können Sie den Abstand zwischen dem Nutzer und der Z‑Ebene ändern. Dies vermittelt den Eindruck von Entfernung und kann verwendet werden, um in Ihren Designs eine Schärfentiefe zu erzeugen.

In diesem Beispiel von David Desandro aus seinem sehr nützlichen Artikel wird gezeigt, wie es zusammen mit den Properties perspective-origin-x und perspective-origin-y verwendet werden kann, um echte 3D-Inhalte zu erstellen.

Animationsfunktionen, Farbverläufe und Filter

CSS bietet außerdem Funktionen, mit denen Sie Elemente animate, Verläufe auf sie anwenden und mithilfe von grafischen Filtern ihr Aussehen anpassen können. Um dieses Modul so prägnant wie möglich zu halten, werden sie in den verlinkten Modulen behandelt. Sie folgen alle einer ähnlichen Struktur wie die Funktionen, die in diesem Modul gezeigt werden.

Wissen testen

Wissen über Funktionen testen

An welchen Zeichen sind CSS-Funktionen zu erkennen?

{}
[]
()
:
::

CSS hat integrierte mathematische Funktionen?

Falsch
Richtig

Eine calc()-Funktion kann in einer anderen calc() wie font-size: calc(10px + calc(5px * 3)); platziert werden.

Richtig
Falsch

Welche der folgenden Funktionen sind CSS-Formfunktionen?

polygon()
ellipse()
circle()
rect()
square()
inset()