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()
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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()
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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()
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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.
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Anhand welcher Zeichen können CSS-Funktionen identifiziert werden?
[]
{}
::
:
()
CSS hat integrierte mathematische Funktionen.
Eine calc()
-Funktion kann innerhalb eines anderen calc()
wie font-size: calc(10px + calc(5px * 3));
platziert werden.
Welche der folgenden sind CSS-Formfunktionen?
polygon()
ellipse()
circle()
rect()
square()
inset()