CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitungen oder Berechnungen aufrufen, um einen CSS-Wert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertfunktionen repräsentieren komplexere Datentypen und können einige Eingabeargumente verwenden, um den Rückgabewert zu berechnen.

Syntax

css

selector {
  property: function([argument]? [, argument]!);
}

Die Wertsynthax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach folgen die Argument(e), und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

Funktionen können mehrere Argumente aufnehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern optional. In einigen funktionalen Notationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.

Hinweis: Die CSS-Wertfunktionen werden als Eigenschaftswerte verwendet und sollten nicht mit Pseudoklassen verwechselt werden. Die funktionalen Pseudoklassen, linguistischen Pseudoklassen und mehrere baumstrukturelle Pseudoklassen erfordern Parameterwerte, sind aber keine Wertfunktionen. Die konditionalen At-Regeln sind ebenfalls keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS-Datentyp repräsentiert Erscheinungstransformationen. Er wird als Wert der transform-Eigenschaft verwendet.

Translate-Funktionen

translateX(): Verschiebt ein Element horizontal.
translateY(): Verschiebt ein Element vertikal.
translateZ(): Verschiebt ein Element entlang der Z-Achse.
translate(): Verschiebt ein Element auf der 2D-Ebene.
translate3d(): Verschiebt ein Element im 3D-Raum.

Rotationsfunktionen

rotateX(): Dreht ein Element um die horizontale Achse.
rotateY(): Dreht ein Element um die vertikale Achse.
rotateZ(): Dreht ein Element um die Z-Achse.
rotate(): Dreht ein Element um einen festen Punkt auf der 2D-Ebene.
rotate3d(): Dreht ein Element um eine feste Achse im 3D-Raum.

Skalierungsfunktionen

scaleX(): Skaliert ein Element horizontal hoch oder herunter.
scaleY(): Skaliert ein Element vertikal hoch oder herunter.
scaleZ(): Skaliert ein Element entlang der Z-Achse hoch oder herunter.
scale(): Skaliert ein Element auf der 2D-Ebene hoch oder herunter.
scale3d(): Skaliert ein Element im 3D-Raum hoch oder herunter.

Schiefenfunktionen

skewX(): Schiebt ein Element in horizontaler Richtung.
skewY(): Schiebt ein Element in vertikaler Richtung.
skew(): Schiebt ein Element auf der 2D-Ebene.

Matrixfunktionen

matrix(): Beschreibt eine homogene 2D-Transformationsmatrix.
matrix3d(): Beschreibt eine 3D-Transformation als 4x4-homogene Matrix.

Perspektive-Funktionen

perspective(): Legt den Abstand zwischen dem Benutzer und der z=0-Ebene fest.

Mathematikfunktionen

Die Mathematikfunktionen erlauben es, dass CSS-Zahlenwerte als mathematische Ausdrücke geschrieben werden.

Jede der folgenden Seiten enthält detaillierte Informationen über die Syntax der jeweiligen Mathematikfunktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Für eine umfassende Einführung in CSS-Mathematikfunktionen, siehe Verwendung von CSS-Mathematikfunktionen.

Grundlegende Arithmetik

calc(): Führt grundlegende arithmetische Berechnungen an numerischen Werten durch.

Vergleichsfunktionen

min(): Berechnet den kleinsten Wert einer Liste von Werten.
max(): Berechnet den größten Wert einer Liste von Werten.
clamp(): Berechnet den zentralen Wert aus Minimal-, Zentral- und Maximalwerten.

Funktionen für gestufte Werte

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit demselben Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere geteilt wird.
rem(): Berechnet einen Rest (mit demselben Vorzeichen wie der Dividend), wenn eine Zahl durch eine andere geteilt wird.

Trigonometrische Funktionen

sin(): Berechnet den trigonometrischen Sinus einer Zahl.
cos(): Berechnet den trigonometrischen Kosinus einer Zahl.
tan(): Berechnet den trigonometrischen Tangens einer Zahl.
asin(): Berechnet den trigonometrischen inversen Sinus einer Zahl.
acos(): Berechnet den trigonometrischen inversen Kosinus einer Zahl.
atan(): Berechnet den trigonometrischen inversen Tangens einer Zahl.
atan2(): Berechnet den trigonometrischen inversen Tangens von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow(): Berechnet den Grundwert, erhöht auf die Potenz einer Zahl.
sqrt(): Berechnet die Quadratwurzel einer Zahl.
hypot(): Berechnet die Quadratwurzel der Summe der Quadrate seiner Argumente.
log(): Berechnet den Logarithmus einer Zahl.
exp(): Berechnet e, erhöht auf die Potenz einer Zahl.

Vorzeichenbezogene Funktionen

abs(): Berechnet den Absolutwert einer Zahl.
sign(): Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

Der <filter-function> CSS-Datentyp repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingabebildes ändern kann. Er wird in den Eigenschaften filter und backdrop-filter verwendet.

blur(): Erhöht den Gaußschen Weichzeichner des Bildes.
brightness(): Erhellt oder verdunkelt ein Bild.
contrast(): Erhöht oder verringert den Kontrast des Bildes.
drop-shadow(): Wendet einen Schlagschatten hinter einem Bild an.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert die Gesamtfarbgebung eines Bildes.
invert(): Invertiert die Farben eines Bildes.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die Gesamtfarbsättigung eines Bildes.
sepia(): Erhöht den Sepia-Effekt eines Bildes.

Farb-Funktionen

Der <color> CSS-Datentyp spezifiziert verschiedene Farbrepräsentationen.

rgb(): Definiert eine bestimmte Farbe anhand ihrer Rot-, Grün-, Blau- und Alpha-(Transparenz)-Komponenten.
hsl(): Definiert eine bestimmte Farbe anhand ihrer Farbton-, Sättigungs-, Helligkeits- und Alpha-(Transparenz)-Komponenten.
hwb(): Definiert eine bestimmte Farbe anhand ihrer Farbton-, Weiß- und Schwarzkomponenten.
lch(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, Chroma und Farbtonkomponenten.
oklch(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, Chroma, Farbton- und Alpha-(Transparenz)-Komponenten.
lab(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, a-Achsen-Abstand und b-Achsen-Abstand im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand im Lab-Farbraum und Alpha (Transparenz).
color(): Spezifiziert einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem gegebenen Farbraum durch einen bestimmten Anteil.
device-cmyk(): Definiert CMYK-Farben geräteabhängig.
light-dark(): Gibt eine der beiden bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

Bildfunktionen

Der <image> CSS-Datentyp bietet grafische Darstellungen von Bildern oder Farbverläufen.

Farbverlaufsfunktionen

linear-gradient(): Lineare Farbverläufe ändern die Farben progressiv entlang einer gedachten Linie.
radial-gradient(): Radiale Farbverläufe ändern die Farben progressiv von einem Mittelpunkt (Ursprung) aus.
conic-gradient(): Kegelförmige Farbverläufe ändern die Farben progressiv um einen Kreis herum.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich dem Type <url>, jedoch mit zusätzlicher Funktionalität, einschließlich Spezifikation der Bildrichtung und Fallback-Bildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das geeignetste CSS-Bild aus einem gegebenen Set aus, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade(): Mischt zwei oder mehr Bilder mit einer definierten Transparenz.
element(): Definiert einen <image>-Wert, der von einem beliebigen HTML-Element erzeugt wird.
paint(): Definiert einen <image>-Wert, der mit einem PaintWorklet erzeugt wird.

Zählerfunktionen

CSS-Zählerfunktionen werden in der Regel mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall verwendet werden können, wo eine <string>-Unterstützung vorhanden ist.

counter(): Gibt eine Zeichenkette zurück, die den aktuellen Wert des benannten Zählers darstellt, falls vorhanden.
counters(): Ermöglicht verschachtelte Zähler und gibt eine verkettete Zeichenkette zurück, die die aktuellen Werte der benannten Zähler darstellt, falls vorhanden.
symbols(): Definiert die Zählerstile direkt inline als Wert einer Eigenschaft.

Formfunktionen

Der <basic-shape> CSS-Datentyp repräsentiert eine grafische Form. Er wird in den Eigenschaften clip-path, offset-path und shape-outside verwendet.

circle(): Definiert eine Kreisform.
ellipse(): Definiert eine Ellipsenform.
inset(): Definiert eine versenkte Rechteckform.
rect(): Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Kanten des Referenzrahmens.
xywh(): Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie der Rechteckbreite und -höhe.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfad-Zeichenkette, um eine Form zu zeichnen.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Referenzfunktionen

Die folgenden Funktionen werden als Eigenschaftswert verwendet, um einen Wert zu referenzieren, der anderswo definiert ist:

attr(): Verwendet die auf dem HTML-Element definierten Attribute.
env(): Verwendet die benutzerseitig definierte Umgebungsvariable.
<url>: Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Wertes einer anderen Eigenschaft.

Rasterfunktionen

Die folgenden Funktionen werden zur Definition eines CSS-Rasters verwendet:

fit-content(): Klemmt eine gegebene Größe auf eine verfügbare Größe gemäß der Formel min(maximum size, max(minimum size, argument)).
minmax(): Definiert einen Größenbereich größer oder gleich min und kleiner oder gleich max.
repeat(): Repräsentiert ein wiederholtes Fragment der Spur-Liste, das eine große Anzahl von Spalten oder Reihen ermöglicht, die ein wiederkehrendes Muster aufweisen.

Schriftartenfunktionen

CSS-Schriftartenfunktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um die Verwendung von alternativen Glyphen zu steuern.

stylistic(): Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Ermöglicht stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erstellt jedoch keine kohärenten Glyphen für einen Zeichensatz; Einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Ermöglicht Schwung-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.
ornaments(): Ermöglicht Verzierungen wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Ermöglicht Anmerkungen wie umrandete Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Easing-Funktionen

Die folgenden Funktionen werden als Wert in Übergangs- und Animationseigenschaften verwendet:

linear(): Easing-Funktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier(): Easing-Funktion, die eine kubische Bézier-Kurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Stopps entlang des Übergangs, wobei jeder Stopp für gleich lange Zeiträume angezeigt wird.

Animations-Funktionen

Die folgenden Funktionen werden als Wert für verschiedene animation-timeline-Eigenschaften verwendet:

scroll(): Setzt die animation-timeline eines Elements auf eine anonyme Scroll-Fortschrittszeitleiste.
view(): Setzt die animation-timeline eines Elements auf eine anonyme Sicht-Fortschrittszeitleiste.

Verankerungspositionierungsfunktionen

Die Verankerungspositionierungsfunktionen werden beim Positionieren und Abmessen von verankerungspositionierten Elementen verwendet, relativ zur Position und Größe ihrer zugeordneten Verankerungselemente.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines verankerungspositionierten Elements in Bezug auf sein zugeordnetes Verankerungselement zurück.
anchor-size(): Gibt eine Länge relativ zur Größe des zugeordneten Verankerungselements zurück.