CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung oder Berechnungen ausführen, um einen CSS Wert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertfunktionen stellen komplexere Datentypen dar 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 (. Dann folgen das/die Argument(e), und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

Funktionen können mehrere Argumente annehmen, 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 Pseudo-Klassen verwechselt werden. Die funktionalen Pseudo-Klassen, linguistischen Pseudo-Klassen und mehrere baumstrukturierte Pseudo-Klassen erfordern Parameterwerte, sind aber keine Wertfunktionen. Die bedingten At-Regeln sind ebenfalls keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS Datentyp stellt Erscheinungsveränderungen dar. Er wird als 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ägfunktionen

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

Matrixfunktionen

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

Perspektivfunktionen

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

Mathematikfunktionen

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

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

Grundlegende Arithmetik

calc(): Führt grundlegende arithmetische Berechnungen auf numerischen Werten aus.
calc-size(): Führt Berechnungen auf intrinsischen Größenwerten wie auto, fit-content und max-content aus, die von der calc()-Funktion nicht unterstützt werden.

Vergleichsfunktionen

min(): Berechnet den kleinsten Wert einer Liste von Werten.
max(): Berechnet den größten Wert einer Liste von Werten.
clamp(): Berechnet die Mitte eines Minimal-, Zentral- und Maximalwerts.

Stufenwertfunktionen

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

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 zweier Zahlen in einer Ebene.

Exponentialfunktionen

pow(): Berechnet die Basis um eine Zahl potenziert.
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 potenziert um eine Zahl.

Vorzeichenbezogene Funktionen

abs(): Berechnet den Absolutwert 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 verändern kann. Er wird in den filter- und backdrop-filter-Eigenschaften verwendet.

blur(): Erhöht die Gaußsche Unschärfe des Bildes.
brightness(): Erhellt oder verdunkelt ein Bild.
contrast(): Erhöht oder verringert den Kontrast des Bildes.
drop-shadow(): Fügt einen Schlagschatten hinter einem Bild hinzu.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert die Gesamthue 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 die Sepiatönung eines Bildes.

Farbfunktionen

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

rgb(): Definiert eine gegebene Farbe nach ihren Rot-, Grün-, Blau- und Alpha-(Transparenz)-Komponenten.
hsl(): Definiert eine gegebene Farbe nach ihren Hue-, Sättigungs-, Helligkeits- und Alpha-(Transparenz)-Komponenten.
hwb(): Definiert eine gegebene Farbe nach ihren Hue-, Weißwert- und Schwarzanteilen.
lch(): Definiert eine gegebene Farbe nach ihren Helligkeits-, Chroma- und Hue-Komponenten.
oklch(): Definiert eine gegebene Farbe nach ihren Helligkeits-, Chroma-, Hue- und Alpha-(Transparenz)-Komponenten.
lab(): Definiert eine gegebene Farbe nach ihren Helligkeits-, a-Achsendistanz- und b-Achsendistanz im Lab-Farbraum.
oklab(): Definiert eine gegebene Farbe nach ihren Helligkeits-, a-Achsendistanz-, b-Achsendistanz im Lab-Farbraum und Alpha-(Transparenz).
color(): Spezifiziert einen bestimmten, definierten Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem gegebenen Farbraum in einem bestimmten Verhältnis.
device-cmyk(): Definiert CMYK-Farben auf geräteabhängige Weise.
light-dark(): Gibt eine der beiden bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

Bildfunktionen

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

Verlauffunktionen

linear-gradient(): Lineare Verläufe ändern Farben progressiv entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern Farben progressiv von einem Mittelpunkt (Ursprung) aus.
conic-gradient(): Konische Verläufe ändern Farben progressiv um einen Kreis.
repeating-linear-gradient(): Ähnlich wie linear-gradient(), jedoch werden die Farbstopps unendlich in alle Richtungen wiederholt, um den gesamten Container zu bedecken.
repeating-radial-gradient(): Ähnlich wie radial-gradient(), jedoch werden die Farbstopps unendlich in alle Richtungen wiederholt, um den gesamten Container zu bedecken.
repeating-conic-gradient(): Ähnlich wie conic-gradient(), jedoch werden die Farbstopps unendlich in alle Richtungen wiederholt, um den gesamten Container zu bedecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich der <url>-Typ, jedoch mit zusätzlichen Funktionen, einschließlich der Spezifizierung der Bildrichtung und von Fallback-Bildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt aus einem gegebenen Satz das geeignetste CSS-Bild aus, hauptsächlich für hochauflösende Bildschirme.
cross-fade(): Mischt zwei oder mehr Bilder mit einer definierten Transparenz.
element(): Definiert einen <image>-Wert, der von einem beliebigen HTML-Element generiert wird.
paint(): Definiert einen <image>-Wert, der mit einem PaintWorklet generiert wird.

Zählerfunktionen

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

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 als Wert einer Eigenschaft.

Formfunktionen

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

circle(): Definiert eine Kreisform.
ellipse(): Definiert eine Ellipsenform.
inset(): Definiert eine ausgeschnittene Rechteckform.
rect(): Definiert eine Rechteckform, die die Abstände von den oberen und linken Kanten des Referenzrahmens verwendet.
xywh(): Definiert eine Rechteckform, die die angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie die Rechteckbreite und -höhe verwendet.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert einen SVG-Pfadstring, um eine Form zu zeichnen.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die zu zeichnende Form definieren.
ray(): Gültig nur mit offset-path, definiert es das Liniensegment, dem ein animiertes Element folgen kann.

Referenzfunktionen

Die folgenden Funktionen werden als Wert von Eigenschaften verwendet, um einen anderweitig definierten Wert zu referenzieren:

attr(): Verwendet die auf dem HTML-Element definierten Attribute.
env(): Verwendet die vom Benutzer-Agenten definierten Umgebungsvariablen.
url(): Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Werts einer anderen Eigenschaft.

Rasterfunktionen

Die folgenden Funktionen werden verwendet, um ein CSS-Raster zu definieren:

fit-content(): Beschränkt eine gegebene Größe auf eine verfügbare Größe gemäß 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(): Stellt ein wiederholtes Fragment der Streckenliste dar, das eine große Anzahl von Spalten oder Reihen ermöglicht, die ein sich wiederholendes Muster aufweisen.

Schriftartfunktionen

CSS-Schriftartfunktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um den Gebrauch von alternativen Glyphen zu steuern.

stylistic(): Aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Aktiviert stilistische Alternativen für Zeichenmengen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt jedoch keine kohärenten Glyphen für eine Zeichenmenge; einzelne Zeichen haben unabhängige und nicht notwendigerweise zusammenhängende Stile. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Swash-Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.
ornaments(): Aktiviert Ornamente wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Anmerkungen wie umkringelte Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Verzögerungsfunktionen

Der <easing-function> CSS Datentyp stellt eine mathematische Funktion dar. Er wird in Übergangs- und Animations-Eigenschaften verwendet:

linear(): Verzögerungsfunktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier(): Verzögerungsfunktion, die eine kubische Bézier-Kurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Haltepunkten entlang des Übergangs, wobei jeder Halt für gleiche Zeitabschnitte angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert verschiedener animation-timeline-Eigenschaften verwendet:

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

Ankerpositionsfunktionen

Die Ankerpositionsfunktionen werden verwendet, um Positionierung und Größenänderung von ankerpositionierten Elementen relativ zur Lage und Größe ihrer zugehörigen Ankerelemente zu steuern.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines ankerpositionierten Elements im Verhältnis zu seinem zugehörigen Ankerelement zurück.
anchor-size(): Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.