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 repräsentieren komplexere Datentypen und können einige Eingabeargumente zur Berechnung des Rückgabewertes verwenden.

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 ) beendet.

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind zulässig, jedoch optional innerhalb der Klammern. 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 baumstrukturierte Pseudoklassen benötigen 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 das Erscheinungsbild einer Transformation. Er wird als Wert der transform-Eigenschaft verwendet.

Translate-Funktionen

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

Rotationsfunktionen

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

Skalierungsfunktionen

scaleX(): Skaliert ein Element horizontal größer oder kleiner.
scaleY(): Skaliert ein Element vertikal größer oder kleiner.
scaleZ(): Skaliert ein Element entlang der z-Achse größer oder kleiner.
scale(): Skaliert ein Element auf der 2D-Ebene größer oder kleiner.
scale3d(): Skaliert ein Element im 3D-Raum größer oder kleiner.

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 4x4 homogene Matrix.

Perspektivfunktionen

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

Mathematische Funktionen

Die mathematischen Funktionen ermöglichen es, CSS-numerische Werte als mathematische Ausdrücke zu schreiben.

Jede der folgenden 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 lesen Sie 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 von Mindest-, Zentral- und Maximalwerten.

Stufenwertfunktionen

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 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 auf einer Ebene.

Exponentialfunktionen

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

Vorzeichenbezogene Funktionen

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

Filterfunktionen

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

blur(): Erhöht die Bildunschärfe mittels Gaußscher Unschärfe.
brightness(): Hellt ein Bild auf oder dunkelt es ab.
contrast(): Erhöht oder verringert den Kontrast eines Bildes.
drop-shadow(): Erzeugt einen Schlagschatten hinter einem Bild.
grayscale(): Wandelt ein Bild in Graustufen um.
hue-rotate(): Ändert den 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 das Sepia eines Bildes.

Farb-Funktionen

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

rgb(): Definiert eine bestimmte Farbe anhand ihrer roten, grünen, blauen und Alpha-(Transparenz)komponenten.
hsl(): Definiert eine bestimmte Farbe anhand ihrer Hue, Sättigung, Helligkeit und Alpha-(Transparenz)komponenten.
hwb(): Definiert eine bestimmte Farbe anhand ihrer Hue, Weiß- und Schwarzanteile.
lch(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, Chroma und Hue.
oklch(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, Chroma, Hue 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 anstatt des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem bestimmten Farbraum nach einer bestimmten Menge.
color-contrast(): Wählt den höchsten Farbkontrast aus einer Liste von Farben, verglichen mit einem Basisfarbwert.
device-cmyk(): Definiert CMYK-Farben geräteabhängig.
light-dark(): Gibt eine der zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

Bildfunktionen

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

Gradient-Funktionen

linear-gradient(): Lineare Verläufe wechseln die Farben progressiv entlang einer gedachten Linie.
radial-gradient(): Radiale Verläufe wechseln die Farben progressiv von einem zentralen Punkt (Ursprung).
conic-gradient(): Konische Verläufe wechseln die Farben progressiv um einen Kreis.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt dieselben Argumente entgegen, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter zu bedecken.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und nimmt dieselben Argumente entgegen, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter zu bedecken.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und nimmt dieselben Argumente entgegen, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter zu bedecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich wie der <url>-Typ, jedoch mit zusätzlichen Funktionalitäten einschließlich der Spezifikation der Bilderrichtung und von Ersatzbildern, wenn das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das passendste 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 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 vorhanden.
counters(): Ermöglicht verschachtelte Zähler und gibt einen verketteten String zurück, der die aktuellen Werte der benannten Zähler repräsentiert, falls vorhanden.
symbols(): Definiert die Zählerstile direkt 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 eingekerbte Rechteckform.
rect(): Definiert eine Rechteckform, indem die Abstände von den oberen und linken Kanten des Referenzrahmens verwendet werden.
xywh(): Definiert eine Rechteckform, indem die angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie die Rechteckbreite und -höhe verwendet werden.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert einen SVG-Pfadstring, um das Zeichnen einer Form zu ermöglichen.
shape(): Akzeptiert eine kommagetrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Referenzfunktionen

Die folgenden Funktionen werden als Eigenschaftswert verwendet, um einen anderswo definierten Wert zu referenzieren.

attr(): Verwendet die auf einem 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 Wertes einer anderen Eigenschaft.

Grid-Funktionen

Die folgenden Funktionen werden zur Definition eines CSS-Grid verwendet.

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

Schriftartenfunktionen

CSS-Schriftartenfunktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um die Verwendung alternativer 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 Zeichensätze. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, z.B. ss02.
character-variant(): Aktiviert spezifische stilistische Alternativen für Zeichen. Ist ähnlich styleset(), erzeugt jedoch keine kohärenten Glyphen für einen Zeichensatz; individuelle Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, z.B. cv02.
swash(): Aktiviert Schwung-Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, z.B. 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, z.B. ornm 2.
annotation(): Aktiviert Annotationen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, z.B. 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 Haltepunkten während des Übergangs, wobei jeder Haltepunkt für gleich lange Zeiten angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert verschiedener animation-timeline-Eigenschaften verwendet. Siehe animation-timeline für weitere Details hierzu.

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

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, um Elemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente zu positionieren und zu dimensionieren.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines Anker-positionierten Elements zurück.
anchor-size(): Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.