Funktionen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

The CSS Podcast – 020: 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.

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 andere Elemente in der Sprache, z. B. berechnete kaskadierte Werte 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 gelernt, wie Sie Funktionsauswahlen wie :is() und :not() verwenden. 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 Bindestrichen (--) 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 vorherigen 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(), hsl(), lab(), lch(), oklab(), oklch() und color(). 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.

Arithmetische Funktionen

calc()

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()

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 Darstellungsbereichsbreite) und 30rem sein. Die Höhe sollte der größte Wert zwischen 20vh (20% der Darstellungshöhe) und 20rem sein.

clamp()

Die Funktion clamp() benötigt drei Argumente: die Mindestgröße, die ideale Größe und die Maximalgröß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.

Trigonometrische Funktionen

Mit trigonometrischen Funktionen können Sie anhand eines Winkels jeden Punkt auf einem Kreis finden, zyklische Phänomene wie Schallwellen modellieren, Umlaufbahnen beschreiben und vieles mehr. In CSS können Sie trigonometrische Funktionen verwenden, um Eigenschaften basierend auf Drehung, Zeitanimationen, Drehung von Elementen basierend auf einem Punkt und anderen Verwendungszwecken festzulegen.

Weitere Informationen und Beispiele finden Sie in unserem Artikel zu trigonometrischen Funktionen.

sin(), cos() und tan()

Die Funktionen sin(), cos() und tan() nehmen ein Winkelargument an und geben den Sinus, Kosinus und die Tangente zurück. Die Funktionen sin() und cos() geben eine Zahl zwischen -1 und 1 zurück. Die Funktion tan() gibt eine Zahl zwischen -Infinity und +Infinity zurück. Das Argument „Winkel“ kann eine beliebige unterstützte Winkeleinheit sein.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

Im vorherigen Beispiel haben --sine-degrees und --sine-radians denselben Wert (in diesem Fall 0.7071).

Im vorherigen Beispiel werden die Funktionen sin() und cos() verwendet, um schwingende Animationen auf den Achsen x und y zu erstellen. Dazu wird das Ergebnis mit dem angegebenen Radius multipliziert. Wenn Sie beide Funktionen gleichzeitig verwenden, entsteht eine Animation, bei der sich das Objekt um die eigene Achse dreht. Wir verwenden ein benutzerdefiniertes Attribut, --angle, um den Winkel für alle Funktionsaufrufe flüssig zu animieren.

asin(), acos() und atan()

Die Funktionen asin(), acos() und atan() sind die Umkehrungen der Funktionen sin(), cos() und tan(). Sie nehmen eine Zahl als Argument an und geben einen Winkelwert zwischen -90deg und 90deg zurück. Die Funktionen asin() und acos() akzeptieren eine Zahl zwischen -1 und 1, während die Funktion atan() eine Zahl zwischen -Infinity und +Infinity akzeptiert.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

Die Funktion atan2() nimmt zwei Argumente an, die einen Punkt relativ zum Ursprung darstellen, und gibt den Winkel zurück, der die Richtung zu diesem Punkt angibt. So können Sie Elemente so drehen, dass sie auf einen bestimmten Punkt ausgerichtet sind. Die Argumente können Zahlen, Maßeinheiten oder ein Prozentsatz sein. Beide Argumente müssen jedoch derselben Art sein.

Im Beispiel oben wird die atan2()-Funktion verwendet, um den Winkel zwischen dem Mittelpunkt des Darstellungsbereichs und der aktuellen Mausposition zu bestimmen. Der Wert y ist das erste Argument und der Wert x das zweite. Mit dem Winkel werden dann die „Pupillen“ relativ zum Mittelpunkt der „Augen“ positioniert, damit sie der Maus folgen.

hypot()

Die Funktion hypot() nimmt zwei Längenargumente an, die die Seiten eines rechtwinkligen Dreiecks darstellen, und gibt die Länge der Hypotenuse zurück. Sie können dies als Tastenkürzel für die Berechnung mithilfe von Exponentialfunktionen verwenden. Beide Argumente müssen denselben Einheitentyp haben. hypot() gibt denselben Typ zurück.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Exponentialfunktionen

pow() und exp()

Die Funktion pow() nimmt zwei numerische Argumente, die Basis und den Exponenten, entgegen und potenziert die Basis mit dem Exponenten. Beide Argumente müssen Zahlen ohne Einheiten sein. Die Funktion exp() nimmt ein einzelnes Argument entgegen und entspricht dem Aufruf der Funktion pow() mit der Basis e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

Die sqrt()-Funktion nimmt ein numerisches Argument an und gibt dessen Quadratwurzel zurück. Das Argument darf keine Einheiten enthalten.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

Die Funktion log() gibt den Logarithmus eines numerischen Werts zurück. Wenn ein Argument übergeben wird, wird der natürliche Logarithmus zurückgegeben. Wenn ein zweites Argument übergeben wird, verwendet die Funktion log() dieses als Basis für den Logarithmus.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Funktionen mit Vorzeichen

abs()

Die abs()-Funktion verwendet ein numerisches Argument und gibt den absoluten (positiven) Wert des Argumentwerts zurück.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

Im vorherigen Beispiel würde ein alpha-Wert von -1 zu transparentem Text führen. Die Funktion abs() gibt jedoch den absoluten Wert von 1 zurück, was zu vollständig deckendem Text führt.

sign()

Die sign()-Funktion nimmt ein numerisches Argument an und gibt das Vorzeichen des Arguments zurück. Für positive Werte wird 1 zurückgegeben, für negative Werte -1. Für Nullwerte wird 0 zurückgegeben.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

In den vorherigen Beispielen ist 75vh der höchste Wert, wenn --value positiv ist. Ist der Wert negativ, ist 25vh der höchste Wert. Wenn der Wert null ist, ist 50vh der höchste Wert.

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 verwendet werden, um die Größe festzulegen. 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

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 zu bestimmen.

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

Die Funktion rotate3d() nimmt vier Argumente an.

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);
}

Mit der individuellen Property rotate können Sie ein Element drehen. Wenn Sie die Funktion außerhalb der transform-Property verwenden, können Sie sie unabhängig von anderen Transformationen ändern. Es werden ähnliche Werte wie bei den Drehfunktionen akzeptiert.

Skalieren

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.

Sie können die einzelne Eigenschaft scale verwenden, um ein Element zu skalieren. Wenn du sie außerhalb der Property transform verwendest, kannst du sie unabhängig von anderen Transformationen überblenden.

Übersetzen

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 bestimmte Funktionen für eine bestimmte Achse verwenden. Verwenden Sie dazu translateX, translateY und translateZ. Sie können auch translate3d verwenden, um die X-, Y- und Z-Translation in einer Funktion zu definieren.

Wie bei scale und rotate können Sie auch die Property translate außerhalb der Property transform verwenden, um ein Element zu verschieben.

.my-element{
  translate: 20px 30px;
}

Schiefen

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

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 animieren, 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 wurden.

Wissen testen

Wissen über Funktionen testen