Funktionen

Der CSS-Podcast – 020: Funktionen

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

Wie viele andere Programmiersprachen CSS hat viele integrierte Funktionen auf die Sie jederzeit zugreifen können.

Jede CSS-Funktion hat einen bestimmten Zweck, erhalten Sie einen allgemeinen Überblick, sodass Sie besser verstehen, wo und wie Sie diese einsetzen können.

Was ist eine Funktion?

Eine Funktion ist ein benannter, eigenständiger Code, der eine bestimmte Aufgabe ausführt. Eine Funktion wird benannt, 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 übergeben, erhalten Sie immer dasselbe Ergebnis, unabhängig davon, was im übrigen Code passiert. Diese Funktionen werden oft neu berechnet, wenn sich Werte in Ihrem CSS ändern. ähnlich wie andere Elemente in der Sprache, wie etwa 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 sein. um ihnen mehr Flexibilität zu geben. Darauf gehen wir später in diesem Modul noch genauer ein.

Funktionsselektoren

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

Sie haben Funktionsselektoren in der Modul „Pseudoklassen“ die detaillierte Funktionen wie :is() und :not() 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 ebenfalls von der Kaskade beeinflusst. Das bedeutet, dass sie kontextbezogen bearbeitet oder neu definiert werden können. Einer benutzerdefinierten Eigenschaft müssen zwei Bindestriche (--) vorangestellt werden. Dabei wird zwischen Groß- und Kleinschreibung unterschieden.

Die var() -Funktion verwendet ein erforderliches Argument: der benutzerdefinierten Eigenschaft, die Sie als Wert zurückgeben möchten. Im obigen Snippet wurde für die var()-Funktion --base-color 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 Funktion var() übergeben. Wenn --base-color nicht gefunden werden kann, Stattdessen wird die übergebene declaration 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() hat eine ähnliche Struktur wie var(): Sie übergeben ein oder mehrere Argumente und setzen sie auf der rechten Seite Ihrer CSS-Deklaration ein.

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

Hier die Funktion attr() verwendet den Inhalt des href-Attributs des <a>-Elements. und legen es als content des Pseudoelements ::after fest. Wenn sich der Wert des Attributs href des <a>-Elements ändert, wird dies automatisch in diesem content-Attribut widergespiegelt.

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

Für die Funktion url() wird eine string-URL angegeben, mit der Bilder, Schriftarten und Inhalte geladen werden. Wenn keine gültige URL übergeben wird oder die Ressource, auf die die URL verweist, nicht gefunden wird: wird von der Funktion url() nichts zurückgegeben.

Farbfunktionen

Sie haben alles über Farbfunktionen im Modul color erfahren. Wenn Sie diese E-Mail noch nicht gelesen haben, empfehlen wir Ihnen dringend, dies nachzuholen.

Einige der in CSS verfügbaren Farbfunktionen sind rgb(), rgba(), hsl(), hsla(), hwb(), lab() und lch(). Alle haben eine ähnliche Form, in der Konfigurationsargumente übergeben und eine Farbe zurückgegeben wird.

Mathematische Ausdrücke

Wie viele andere Programmiersprachen CSS bietet nützliche mathematische Funktionen, die Sie bei verschiedenen Berechnungsarten unterstützen.

calc()

Die calc() verwendet einen einzelnen mathematischen Ausdruck als Parameter. Dieser mathematische Ausdruck kann eine Mischung aus Typen sein, wie Länge, Zahl, Winkel und Frequenz. 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 festzulegen. 100% des übergeordneten Elements besteht, und entfernen dann 2rem von diesem berechneten Wert.

: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 min() -Funktion gibt den kleinsten berechneten Wert von einem oder mehreren übergebenen Argumenten zurück. Die max() funktioniert das Gegenteil: 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 Die Breite sollte der kleinste Wert zwischen 20vw sein die 20% der Breite des Darstellungsbereichs entspricht, und 30rem. Die Höhe sollte der größte Wert zwischen 20vh sein – das entspricht 20% der Höhe des Darstellungsbereichs – und 20rem.

clamp()

Die clamp() 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 an die Breite des Darstellungsbereichs angepasst. Die Einheit vw wird einem rem-Anzeigenblock hinzugefügt, um das Zoomen auf dem Bildschirm zu unterstützen. da die vw-Einheit unabhängig von der Zoomstufe gleich groß ist. Multiplikation mit einer rem-Einheit (basierend auf der Stammschriftgröße): gibt der clamp()-Funktion einen relativen Berechnungspunkt an.

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

Formen

Die clip-path, offset-path und shape-outside CSS-Eigenschaften verwenden Formen, um Ihre Box visuell zu beschneiden oder eine Form für den Inhalt bereitzustellen.

Es gibt Formfunktionen, die mit beiden Eigenschaften verwendet werden können. Einfache Formen wie circle(), ellipse() und inset() und anhand von Konfigurationsargumenten die Größe anpassen. Komplexere Formen wie polygon() Verwenden Sie durch Kommas getrennte Wertepaare auf der X- und Y-Achse, 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 sehr komplexe Formen, die in einem Grafiktool gezeichnet werden können. wie Illustrator oder Inkscape, und kopieren Sie sie dann in Ihr CSS.

Transformationen

In dieser Übersicht über CSS-Funktionen sind schließlich die Transformationsfunktionen, mit denen sich Elemente verzerren, vergrößern oder verkleinern und sogar die Tiefe ändern. Die folgenden Funktionen werden mit dem Attribut transform verwendet.

Rotation

Sie können ein Element drehen, indem Sie die rotate() , mit der ein Element um seine Mittelachse gedreht wird. Sie können auch die rotateX(), rotateY() und rotateZ() um ein Element stattdessen um eine bestimmte Achse zu drehen. Sie können Grad-, Dreh- und Bogenmaßeinheiten übergeben, um die Drehung zu bestimmen.

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

Die rotate3d() vier Argumente.

Die ersten drei Argumente sind Zahlen, die die X-, Y- und Z-Koordinaten definieren. Das vierte Argument ist die Rotation, wie die anderen Rotationsfunktionen, Grad, Winkel und Drehungen akzeptiert.

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

Skalieren

Sie können die Skalierung eines Elements mit transform und den scale() verwenden. 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. Beide Definieren sind eine Abkürzung für X und Y. Genau wie rotate(), es gibt scaleX(), scaleY() und scaleZ() um ein Element stattdessen auf einer bestimmten Achse zu skalieren.

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

Wie bei der rotate-Funktion gibt es auch scale3d() verwenden. Dies ähnelt scale(), es sind jedoch drei Argumente erforderlich: der Skalierungsfaktor X, Y und Z.

Übersetzen

Die translate() -Funktionen verschieben ein Element, während es seine Position im Dokumentfluss beibehält. Sie akzeptieren Längen- und Prozentwerte als Argumente. Die Funktion translate() übersetzt ein Element entlang der X-Achse, wenn ein Argument definiert ist. und übersetzt ein Element 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 bestimmte Funktionen für eine bestimmte Achse verwenden, mit translateX, translateY und translateZ Sie können auch translate3d mit der Sie die X-, Y- und Z-Verschiebung in einer Funktion definieren können.

Pendeln

Sie können ein Element mithilfe der skew() Funktionen, die Winkel als Argumente akzeptieren. Die Funktion skew() funktioniert ähnlich wie die Funktion translate(). Wenn Sie nur ein Argument definieren, wirkt sich das nur auf die X-Achse aus. wirkt sich dies auf die X- und Y-Achse aus. Sie können auch skewX und skewY, um jede Achse einzeln zu beeinflussen.

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

Perspektive

Schließlich können Sie die Property perspective , das zur Transformationsfamilie der Eigenschaften gehört, um den Abstand zwischen dem Nutzer und der Z-Ebene zu ändern. So entsteht ein Gefühl von Distanz und kann in Ihren Designs eine Tiefenschärfe erzeugen.

Dieses Beispiel von David Desandro aus seinem sehr nützlichen Artikel zeigt, zusammen mit den Eigenschaften perspective-origin-x und perspective-origin-y, um echte 3D-Erlebnisse zu schaffen.

Animationsfunktionen, Farbverläufe und Filter

CSS bietet auch Funktionen zum Animieren von Elementen. Sie können Verläufe anwenden und das Aussehen mithilfe von grafischen Filtern verändern. Um dieses Modul so kurz wie möglich zu halten, werden sie in den verlinkten Modulen behandelt. Alle haben eine ähnliche Struktur wie die in diesem Modul vorgestellten Funktionen.

Wissen testen

Testen Sie Ihr Wissen über Funktionen