The CSS Podcast – 020: Functions
Bisher haben Sie in diesem Kurs verschiedene CSS-Funktionen kennengelernt.
Im Modul grid haben Sie bereits minmax() und fit-content() kennengelernt, mit denen Sie die Größe von Elementen festlegen können.
Im Modul color haben Sie die Funktionen rgb() und hsl() kennengelernt, mit denen Sie Farben definieren können.
Wie viele andere Programmiersprachen hat auch 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, damit Sie besser verstehen, wo und wie sie verwendet werden.
Was ist eine Funktion?
Eine Funktion ist ein benannter, in sich geschlossener Code, der eine bestimmte Aufgabe ausführt. Eine Funktion erhält einen Namen, sodass Sie sie in Ihrem Code aufrufen und Daten an die Funktion übergeben können. Dies wird als Übergabe von Argumenten bezeichnet.
Viele CSS-Funktionen sind reine Funktionen. Wenn Sie also dieselben Argumente an sie übergeben, erhalten Sie unabhängig davon, was im restlichen Code passiert, immer dasselbe Ergebnis.
Diese Funktionen werden häufig neu berechnet, wenn sich Werte in Ihrem CSS-Code ändern, ähnlich wie bei anderen Elementen in der Sprache, z. B. berechnete kaskadierte Werte wie currentColor.
In CSS können Sie nur die bereitgestellten Funktionen verwenden, anstatt eigene zu schreiben. Funktionen können jedoch in einigen Kontexten ineinander verschachtelt werden, um ihnen mehr Flexibilität zu bieten. Darauf gehen wir später in diesem Modul noch genauer ein.
Funktionsselektoren
.post :is(h1, h2, h3) {
line-height: 1.2;
}
Sie haben im Pseudoklassenmodul mehr über Funktionsselektoren erfahren, die Funktionen wie :is() und :not() detailliert beschreiben.
Die an diese Funktionen übergebenen Argumente sind CSS-Selektoren, die dann ausgewertet werden.
Wenn es eine Übereinstimmung mit Elementen gibt, wird der Rest der CSS-Regel auf sie angewendet.
Benutzerdefinierte Eigenschaften und var()
:root {
--base-color: #ff00ff;
}
.my-element {
background: var(--base-color);
}
Eine benutzerdefinierte Eigenschaft ist eine Variable, mit der Sie Werte in Ihrem CSS-Code tokenisieren können.
Benutzerdefinierte Eigenschaften werden auch von der Kaskade beeinflusst. Das bedeutet, dass sie kontextbezogen bearbeitet oder neu definiert werden können.
Einem benutzerdefinierten Attribut müssen zwei Bindestriche (--) vorangestellt werden. Außerdem muss die Groß-/Kleinschreibung beachtet werden.
Für die Funktion var() ist ein erforderliches Argument erforderlich: das benutzerdefinierte Attribut, das Sie als Wert zurückgeben möchten.
Im Snippet oben wurde --base-color der Funktion var() als Argument übergeben.
Wenn --base-color definiert ist, gibt var() den Wert zurück.
.my-element {
background: var(--base-color, hotpink);
}
Sie können auch einen Fallback-Deklarationswert an die var()-Funktion übergeben.
Wenn --base-color nicht gefunden werden kann, wird stattdessen die übergebene deklaration verwendet, die in diesem Beispiel die Farbe hotpink ist.
Funktionen, die einen Wert zurückgeben
Die var()-Funktion ist nur eine der CSS-Funktionen, die einen Wert zurückgeben.
Funktionen wie attr() und url() folgen einer ähnlichen Struktur wie var(). Sie übergeben ein oder mehrere Argumente und verwenden sie auf der rechten Seite Ihrer CSS-Deklaration.
a::after {
content: attr(href);
}
Die Funktion attr() nimmt den Inhalt des href-Attributs des <a>-Elements an und legt ihn als content des Pseudoelements ::after fest.
Wenn sich der Wert des Attributs href des <a>-Elements ändern sollte, wird dies automatisch in diesem content-Attribut berücksichtigt.
.my-element {
background-image: url('/path/to/image.jpg');
}
Die Funktion url() verwendet eine string-URL, die zum Laden von Bildern, Schriftarten und Inhalten verwendet wird.
Wenn keine gültige URL übergeben wird oder die Ressource, auf die die URL verweist, nicht gefunden wird, wird von der url()-Funktion nichts zurückgegeben.
Farbfunktionen
Sie haben alles über Farbfunktionen im Modul color gelernt. Wir empfehlen Ihnen dringend, diesen Artikel zu lesen, falls Sie ihn noch nicht gelesen haben.
In CSS sind u. a. rgb(), rgba(), hsl(), hsla(), hwb(), lab() und lch() verfügbar.
Alle haben eine ähnliche Form, bei der Konfigurationsargumente übergeben und eine Farbe zurückgegeben wird.
Mathematische Ausdrücke
Wie viele andere Programmiersprachen bietet CSS nützliche mathematische Funktionen zur Unterstützung verschiedener Berechnungsarten.
calc()
Die Funktion calc() verwendet einen einzelnen mathematischen Ausdruck als Parameter.
Dieser mathematische Ausdruck kann eine Mischung aus Typen sein, z. B. Länge, Zahl, Winkel und Frequenz. Einheiten können auch gemischt werden.
.my-element {
width: calc(100% - 2rem);
}
In diesem Beispiel wird mit der Funktion calc() die Breite eines Elements auf 100% des übergeordneten Elements festgelegt, in dem das Element enthalten ist. Dann wird 2rem von diesem berechneten Wert entfernt.
: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 sein.
Sie können auch benutzerdefinierte Eigenschaften in einer var()-Funktion als Teil eines Ausdrucks übergeben.
min() und max()
Die Funktion min() gibt den kleinsten berechneten Wert eines oder mehrerer übergebener Argumente zurück.
Die Funktion max() bewirkt das Gegenteil: Sie ruft den größten Wert von einem oder mehreren übergebenen Argumenten ab.
.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 Höhe des Darstellungsbereichs) und 20rem sein.
Clamp()
Die Funktion clamp() verwendet drei Argumente: die Mindestgröße, die ideale Größe und das Maximum.
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
In diesem Beispiel ist font-size basierend auf der Breite des Darstellungsbereichs fließend.
Die vw-Einheit wird einer rem-Einheit hinzugefügt, um das Zoomen des Bildschirms zu erleichtern, da eine vw-Einheit unabhängig von der Zoomstufe dieselbe Größe hat.
Durch die Multiplikation mit einer rem-Einheit basierend auf der Stammschriftgröße erhält die Funktion clamp() 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 das Rechteck visuell abzugrenzen oder eine Form für den Inhalt bereitzustellen.
Es gibt Formfunktionen, die mit beiden Eigenschaften verwendet werden können.
Bei einfachen Formen wie circle(), ellipse() und inset() wird die Größe mithilfe von Konfigurationsargumenten festgelegt.
Bei komplexeren Formen wie polygon() werden durch Kommas getrennte Paare aus 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%);
}
Wie polygon() gibt es auch eine path()-Funktion, die eine SVG-Füllregel als Argument verwendet.
Dies ermöglicht hochkomplexe Formen, die in einem Grafiktool wie Illustrator oder Inkscape gezeichnet und dann in Ihren CSS-Code kopiert werden können.
Transformationen
In dieser Übersicht über CSS-Funktionen stellen wir Ihnen noch die Transformationsfunktionen vor, mit denen sich Elemente verzerren, vergrößern oder verkleinern lassen.
Alle der folgenden Funktionen werden mit dem Attribut transform verwendet.
Rotation
Sie können ein Element mit der Funktion rotate() drehen. Damit wird ein Element um seine Mittelachse gedreht.
Sie können stattdessen auch die Funktionen rotateX(), rotateY() und rotateZ() verwenden, um ein Element um eine bestimmte Achse zu drehen.
Sie können Grad, Drehung und Bogenmaß übergeben, um die Drehung zu bestimmen.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
Die Funktion rotate3d() verwendet vier Argumente.
Die ersten 3 Argumente sind Zahlen, die die X-, Y- und Z-Koordinaten definieren. Das vierte Argument ist die Rotation, bei der wie bei den anderen Rotationsfunktionen Grad, Winkel und Drehungen akzeptiert werden.
.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 die X- und die Y-Achse gleich skaliert und die Definition beider ist eine Abkürzung für X und Y.
Genau wie bei rotate() gibt es die Funktionen scaleX(), scaleY() und scaleZ(), um ein Element auf einer bestimmten Achse zu skalieren.
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
Außerdem gibt es wie die rotate-Funktion die scale3d()-Funktion.
Dies ähnelt scale(), erfordert aber drei Argumente: den Skalierungsfaktor X, Y und Z.
Übersetzer
Mit den translate()-Funktionen wird ein Element verschoben, während es seine Position im Dokumentablauf beibehält.
Als Argumente werden Längen- und Prozentwerte akzeptiert.
Die translate()-Funktion übersetzt ein Element entlang der X-Achse, wenn ein Argument definiert ist, und ein Element entlang der X- und der Y-Achse, wenn beide Argumente definiert sind.
.my-element {
transform: translatex(40px) translatey(25px);
}
Sie können – wie bei anderen Transformationsfunktionen – mit translateX, translateY und translateZ spezifische Funktionen für eine bestimmte Achse verwenden.
Sie können auch translate3d verwenden, um die X-, Y- und Z-Übersetzung in einer Funktion zu definieren.
Verzerren
Zum Verzerren eines Elements können Sie die skew()-Funktionen verwenden, die Winkel als Argumente akzeptieren.
Die skew()-Funktion ähnelt der von translate().
Wenn Sie nur ein Argument definieren, wirkt sich dies nur auf die X-Achse aus. Wenn Sie beides definieren, wirkt sich dies auf die X- und die Y-Achse aus.
Sie können auch skewX und skewY verwenden, um jede Achse unabhängig zu beeinflussen.
.my-element {
transform: skew(10deg);
}
Nutzerperspektive
Schließlich können Sie die Property perspective verwenden, die Teil der Transformationsfamilie von Attributen ist, um die Entfernung zwischen dem Nutzer und der Z-Ebene zu ändern.
Dies erzeugt ein Gefühl von Distanz und kann verwendet werden, um in Ihren Designs eine Schärfentiefe zu erzeugen.
Das Beispiel von David Desandro aus einem sehr nützlichen Artikel zeigt, wie sich damit zusammen mit den Properties perspective-origin-x und perspective-origin-y echte 3D-Erlebnisse schaffen lassen.
Animationsfunktionen, Farbverläufe und Filter
CSS bietet auch Funktionen, mit denen Sie Elemente animieren, Verläufe auf sie anwenden und ihr Aussehen mithilfe grafischer Filter anpassen können. Damit dieses Modul so prägnant wie möglich bleibt, werden sie in den verknüpften Modulen behandelt. Alle Funktionen haben eine ähnliche Struktur wie die in diesem Modul gezeigten Funktionen.
Wissen testen
Testen Sie Ihr Wissen über Funktionen
Mit welchen Zeichen können CSS-Funktionen identifiziert werden?
[]{}():::CSS hat integrierte mathematische Funktionen.
Eine calc()-Funktion kann in einen anderen calc() wie font-size: calc(10px + calc(5px * 3)); eingefügt werden
Bei welchen der folgenden Optionen handelt es sich um CSS-Formfunktionen?
ellipse()square()circle()rect()inset()polygon()