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 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()
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 Breite des Darstellungsbereichs) 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 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
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.
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
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
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
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 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?
Eine calc()
-Funktion kann in einer anderen calc()
wie font-size: calc(10px + calc(5px * 3));
platziert werden.
Welche der folgenden Funktionen sind CSS-Formfunktionen?
polygon()
ellipse()
circle()
rect()
square()
inset()