CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung 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 Wertsyntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach folgen die Argumente, und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

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

Hinweis: Die CSS-Wertfunktionen werden als Eigenschaftswerte verwendet und sollten nicht mit Pseudo-Klassen verwechselt werden. Die funktionellen Pseudo-Klassen, sprachlichen Pseudo-Klassen und mehrere baumstrukturelle Pseudo-Klassen erfordern Parameterwerte, sind aber keine Wertfunktionen. Auch die Bedingungsregeln mit @ sind keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS-Datentyp repräsentiert Transformationen des Erscheinungsbilds. Er wird als ein Wert der transform-Eigenschaft verwendet.

Übersetzungsfunktionen

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 nach oben oder unten.
scaleY(): Skaliert ein Element vertikal nach oben oder unten.
scaleZ(): Skaliert ein Element entlang der z-Achse nach oben oder unten.
scale(): Skaliert ein Element auf der 2D-Ebene nach oben oder unten.
scale3d(): Skaliert ein Element im 3D-Raum nach oben oder unten.

Schrägstellungsfunktionen

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

Matrixfunktionen

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

Perspektivfunktionen

perspective(): Setzt den Abstand zwischen dem Nutzer und der z=0-Ebene.

Mathematikfunktionen

Die Mathematikfunktionen erlauben es, CSS numerische Werte als mathematische Ausdrücke zu schreiben.

Jede der unten stehenden Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Browser-Kompatibilitätsdaten, Beispiele und mehr. Für eine umfassende Einführung in CSS-Mathematikfunktionen siehe Using CSS math functions.

Grundrechenarten

calc(): Führt grundlegende arithmetische Berechnungen mit 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 einem Minimum, einem zentralen und einem Maximum.

Stufenwertfunktionen

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit dem gleichen Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere geteilt wird.
rem(): Berechnet einen Rest (mit dem gleichen 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 Arkussinus einer Zahl.
acos(): Berechnet den trigonometrischen Arkuskosinus einer Zahl.
atan(): Berechnet den trigonometrischen Arkustangens einer Zahl.
atan2(): Berechnet den trigonometrischen Arkustangens von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow(): Berechnet die Basis, die auf die Potenz einer Zahl erhoben wird.
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 absoluten Wert einer Zahl.
sign(): Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

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

blur(): Erhöht die Bildgaussianische Unschärfe.
brightness(): Hellt ein Bild auf oder dunkelt es ab.
contrast(): Erhöht oder verringert den Bildkontrast.
drop-shadow(): Fügt einen Schlagschatten hinter ein Bild.
grayscale(): Wandelt ein Bild in Graustufen um.
hue-rotate(): Ändert den gesamten Farbton eines Bildes.
invert(): Kehrt die Farben eines Bildes um.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die Gesamtsättigung eines Bildes.
sepia(): Erhöht den Sepia-Ton eines Bildes.

Farbfunktions

Der <color> CSS-Datentyp spezifiziert unterschiedliche Farbdarstellungen.

rgb(): Definiert eine bestimmte Farbe anhand ihrer roten, grünen, blauen und alpha (Transparenz) Komponenten.
hsl(): Definiert eine bestimmte Farbe anhand ihres Farbtons, ihrer Sättigung, Helligkeit und alpha (Transparenz) Komponenten.
hwb(): Definiert eine bestimmte Farbe anhand ihres Farbtons, Weiß- und Schwarzanteils.
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-Achsenabstand und b-Achsenabstand im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, a-Achsenabstand, b-Achsenabstand im Lab-Farbraum und alpha (Transparenz).
color(): Spezifiziert einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem bestimmten Farbraum in einem bestimmten Verhältnis.
color-contrast(): Wählt den höchsten Farbkontrast aus einer Liste von Farben in Bezug auf einen Basisfarbwert.
device-cmyk(): Definiert CMYK-Farben in einer geräteabhängigen Weise.
light-dark(): Gibt eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

Bildfunktionen

Der <image> CSS-Datentyp liefert eine grafische Darstellung von Bildern oder Verläufen.

Verlauffunktionen

linear-gradient(): Lineare Verläufe übertragen Farben schrittweise entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe übertragen Farben schrittweise von einem Mittelpunkt aus.
conic-gradient(): Konische Verläufe übertragen Farben schrittweise um einen Kreis.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

Bildfunktionen

image(): Definiert ein <image> in ähnlicher Weise wie der <url> Typ, jedoch mit zusätzlichen Funktionalitäten einschließlich der Angabe der Bildausrichtung und Ersatzbildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das geeignetste CSS-Bild aus einem gegebenen Satz aus, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade(): Mischt zwei oder mehr Bilder bei einer definierten Transparenz.
element(): Definiert einen <image>-Wert, der aus einem beliebigen HTML-Element generiert wird.
paint(): Definiert einen <image>-Wert, der mit einem PaintWorklet generiert wird.

Zählerfunktionen

CSS-Zählerfunktionen werden im Allgemeinen mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall dort verwendet werden können, wo ein <string> unterstützt wird.

counter(): Gibt einen String zurück, der den aktuellen Wert des benannten Zählers repräsentiert, falls es einen gibt.
counters(): Ermöglicht verschachtelte Zähler und gibt einen zusammengefügten String zurück, der die aktuellen Werte der benannten Zähler, falls vorhanden, repräsentiert.
symbols(): Definiert die Zählerstile inline, direkt als Wert einer Eigenschaft.

Formfunktionen

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

circle(): Definiert eine Kreisform.
ellipse(): Definiert eine Ellipsenform.
inset(): Definiert eine rechteckige Form als Einsatz.
rect(): Definiert eine rechteckige Form unter Verwendung der Abstände von den oberen und linken Rändern der Referenzbox.
xywh(): Definiert eine rechteckige Form unter Verwendung der angegebenen Abstände von den oberen und linken Rändern der Referenzbox und der Breite und Höhe des Rechtecks.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert einen SVG-Pfadstring, um eine Form zu zeichnen.
shape(): Akzeptiert eine kommagetrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Referenzfunktionen

Die folgenden Funktionen werden als Wert von Eigenschaften verwendet, um auf einen anderswo definierten Wert zu verweisen.

attr(): Verwendet die Attribute, die an das HTML-Element definiert sind.
env(): Verwendet die vom Nutzeragenten als Umgebungsvariable definierte.
<url>: Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den Wert der benutzerdefinierten Eigenschaft anstelle eines Teils des Wertes einer anderen Eigenschaft.

Grid-Funktionen

Die folgenden Funktionen werden verwendet, um ein CSS-Gitter zu definieren.

fit-content(): Klemmt eine gegebene Größe an eine verfügbare Größe nach der Formel min(maximale Größe, max(minimale Größe, Argument)).
minmax(): Definiert einen Größenbereich, der größer oder gleich min und kleiner oder gleich max ist.
repeat(): Repräsentiert einen wiederholten Ausschnitt der Spurleiste und erlaubt eine große Anzahl von Spalten oder Zeilen, die ein wiederkehrendes Muster aufweisen.

Schriftartenfunktionen

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

stylistic(): Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl 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 Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie z. B. ss02.
character-variant(): Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt aber keine zusammenhängenden Glyphen für einen Satz von Zeichen; einzelne Zeichen haben unabhängige und nicht unbedingt zusammenhängende Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie z. B. cv02.
swash(): Ermöglicht Verzierungsglyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie z. B. swsh 2 und cswh 2.
ornaments(): Ermöglicht Ornamente wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie z. B. ornm 2.
annotation(): Ermöglicht Anmerkungen wie zirkulierte Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie z. B. nalt 2.

Easing-Funktionen

Die folgenden Funktionen werden als Wert in Übergangs- und Animations-Eigenschaften verwendet.

linear(): Easing Funktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier(): Easing Funktion, die eine kubische Bézierkurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Haltepunkten entlang des Übergangs, wobei jeder Haltepunkt für gleiche Zeitdauern angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert verschiedener animation-timeline Eigenschaften verwendet. Siehe animation-timeline für mehr Details darüber.

scroll(): Setzt die animation-timeline eines Elements auf eine anonyme Scroll-Fortschritts-Timeline.
view(): Setzt die animation-timeline eines Elements auf eine anonyme Ansicht-Fortschritts-Timeline.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, wenn Anker-Positionselemente relativ zu der Position und Größe ihrer zugehörigen Ankerelemente positioniert und dimensioniert werden.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines Anker-Positionselements in Bezug auf sein zugehöriges Ankerelement zurück.
anchor-size(): Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.