CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung oder Berechnungen ausführen, um einenCSSWert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertfunktionen repräsentieren komplexereDatentypen und können einige Eingabeargumente verwenden, um den Rückgabewert zu berechnen.

Syntax

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

Die Wertsynatx beginnt mit demFunktionsnamen, gefolgt von einer linken Klammer(. Danach folgen die Argument(e), und die Funktion wird mit einer schließenden Klammer) beendet.

Funktionen können mehrere Argumente annehmen, die ähnlich zu CSS-Eigenschaftswerten formatiert sind. Leerzeichen sind erlaubt, jedoch innerhalb der Klammern optional. In einigen funktionalen Notationen werden mehrere Argumente durch Kommata getrennt, während andere Leerzeichen verwenden.

Transformationsfunktionen

Der<transform-function> CSSDatentyp repräsentiert Erscheinungstransformationen. Es wird als Wert dertransform-Eigenschaft verwendet.

Übersetzungsfunktionen

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()

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.

skewY()

Schrägt ein Element in vertikaler Richtung.

skew()

Schrägt ein Element auf der 2D-Ebene.

Matrixfunktionen

matrix()

Beschreibt eine homogene 2D-Transformationsmatrix.

matrix3d()

Beschreibt eine 3D-Transformation als 4×4 homogene Matrix.

Perspektivenfunktionen

perspective()

Setzt den Abstand zwischen dem Benutzer und der z=0-Ebene.

Mathematische Funktionen

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

Jede der untenstehenden Seiten enthält detaillierte Informationen zur Syntax einer mathematischen Funktion, zu Browser-Kompatibilitätsdaten, Beispielen und mehr. Für eine ganzheitliche Einführung in die CSS-Mathematischen Funktionen, sieheVerwendung von CSS-Mathematischen Funktionen.

Grundlegende Arithmetik

calc()

Führt grundlegende arithmetische Berechnungen auf numerischen Werten durch.

calc-size()

Führt Berechnungen an intrinsischen Größenwerten wieauto,fit-content undmax-content durch, die von dercalc() 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 den zentralen Wert aus einem Minimal-, Zentral- und Maximalwert.

Abgestufte Wertfunktionen

round()

Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet einen Modulo (mit demselben Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere geteilt wird.

progress()

Berechnet die Position eines Wertes zwischen zwei anderen Werten — einem Start- und Endwert. Das Ergebnis wird als Zahl zwischen 0 und 1 ausgedrückt, die den Fortschritt zwischen Start- und Endwert darstellt.

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 Arcussinus einer Zahl.

acos()

Berechnet den trigonometrischen Arcuskosinus einer Zahl.

atan()

Berechnet den trigonometrischen Arcustangens einer Zahl.

atan2()

Berechnet den trigonometrischen Arcustangens von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow()

Berechnet die Basis, 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()

Berechnete erhöht zur Potenz einer Zahl.

Vorzeichenbezogene Funktionen

abs()

Berechnet den Absolutwert einer Zahl.

sign()

Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

Der<filter-function> CSSDatentyp repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingabebildes ändern kann. Es wird in den Eigenschaftenfilter undbackdrop-filter verwendet.

blur()

Erhöht den Gaußschen Weichzeichner des Bildes.

brightness()

Hellt ein Bild auf oder dunkelt es ab.

contrast()

Erhöht oder verringert den Kontrast des Bildes.

drop-shadow()

Wendet einen Schlagschatten hinter einem Bild an.

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 den Sepiaton eines Bildes.

Farbige Funktionen

Der<color> CSSDatentyp spezifiziert unterschiedliche Farbgebungen.

rgb()

Definiert eine bestimmte Farbe gemäß ihren Rot-, Grün-, Blau- und Alpha- (Transparenz-) Komponenten.

hsl()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, ihrer Sättigung, Helligkeit und Alpha- (Transparenz-) Komponenten.

hwb()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, Weißgrad und Schwarzgrad.

lch()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma und Farbton.

oklch()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma, Farbton und Alpha (Transparenz-) Komponente.

lab()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achsen-Distanz und b-Achsen-Distanz im Lab-Farbraum.

oklab()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achsen-Distanz, b-Achsen-Distanz 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 in einer bestimmten Menge.

contrast-color()

Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene Farbe zurück.

device-cmyk()

Definiert CMYK-Farben auf eine geräteabhängige Weise.

light-dark()

Gibt eine der beiden angegebenen Farben basierend auf dem aktuellen Farbmodus zurück.

dynamic-range-limit-mix()

Erstellt ein benutzerdefiniertes Maximalluminanz-Limit, das eine Mischung aus verschiedenendynamic-range-limit Schlüsselwörtern in angegebenen Prozentsätzen ist.

Bildfunktionen

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

Verlauffunktionen

linear-gradient()

Lineare Verläufe verändern Farben progressiv entlang einer imaginären Linie.

radial-gradient()

Radiale Verläufe verändern Farben progressiv aus einem Mittelpunkt (Ursprung).

conic-gradient()

Conic-Verläufe verändern Farben progressiv um einen Kreis.

repeating-linear-gradient()

Ist ähnlich wielinear-gradient() und nimmt dieselben Argumente an, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

repeating-radial-gradient()

Ist ähnlich wieradial-gradient() und nimmt dieselben Argumente an, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

repeating-conic-gradient()

Ist ähnlich wieconic-gradient() und nimmt dieselben Argumente an, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image()

Definiert ein<image> auf ähnliche Weise wie der<url>-Typ, jedoch mit zusätzlicher Funktionalität einschließlich der Spezifizierung der Bildrichtung und Fallback-Bildern, wenn das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das geeignetste CSS-Bild aus einem gegebenen Satz, hauptsächlich für hochauflösende Bildschirme.

cross-fade()

Blendet zwei oder mehr Bilder mit definierter Transparenz ein.

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 dercontent-Eigenschaft verwendet, obwohl sie theoretisch überall dort verwendet werden können, wo eine<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 zusammengefügten String zurück, der die aktuellen Werte der benannten Zähler repräsentiert, falls vorhanden.

symbols()

Definiert die Zählerstile Inline, direkt als Eigenschaftswert.

Formfunktionen

Grundformen

Der<basic-shape> CSSDatentyp repräsentiert eine grafische Form. Es wird in den Eigenschaftenclip-path,offset-path undshape-outside verwendet.

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine eingelassene Rechteckform.

rect()

Definiert eine rechteckige Form anhand der Abstände von den oberen und linken Kanten des Referenzrahmens.

xywh()

Definiert eine rechteckige Form anhand der angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie 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.

Weitere Formfunktionen

ray()

Gültig mitoffset-path; definiert das Liniensegment, dem ein animiertes Element folgen kann.

superellipse()

Definiert die Krümmung einer Ellipse; kann verwendet werden, um einen<corner-shape-value>, der mitcorner-shape und seinenBestandteilen sowieVerwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr()

Verwendet die am HTML-Element definierten Attribute.

env()

Verwendet die im User-Agent definierten Umgebungsvariablen.

if()

Setzt bedingt einen Eigenschaftswert in Abhängigkeit vom Ergebnis einerStilabfrage,Medienabfrage oderFeature-Abfrage.

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 einCSS-Raster zu definieren:

fit-content()

Begrenzte eine gegebene Größe auf eine verfügbare Größe gemäß der Formelmin(maximal Größe, max(minimal Größe, Argument)).

minmax()

Definiert einen Größenbereich, der größer-gleichmin und kleiner-gleichmax ist.

repeat()

Repräsentiert ein wiederholtes Fragment der Trajektorienliste und ermöglicht eine große Anzahl von Spalten oder Reihen, die ein wiederkehrendes Muster aufweisen.

Schriftfunktionen

CSS-Schriftfunktionen werden mit derfont-variant-alternates-Eigenschaft verwendet, um die Verwendung von alternativen Glyphen zu steuern.

stylistic()

Aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wertsalt, wiesalt 2.

styleset()

Aktiviert stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-WertssXY, wiess02.

character-variant()

Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wiestyleset(), erzeugt jedoch keine kohärenten Glyphen für einen Zeichensatz; einzelne Zeichen haben unabhängige und nicht unbedingt kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-WertcvXY, wiecv02.

swash()

AktiviertSwash Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht den OpenType-Wertenswsh undcswh, wieswsh 2 undcswh 2.

ornaments()

Aktiviert Ornamente wieFleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wertornm, wieornm 2.

annotation()

Aktiviert Anmerkungen wie gekreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wertnalt, wienalt 2.

Easing-Funktionen

Der<easing-function> CSSDatentyp repräsentiert eine mathematische Funktion. Er wird in Übergangs- und Animationseigenschaften verwendet:

linear()

Easing-Funktion, die linear zwischen ihren Punkten interpoliert.

cubic-bezier()

Easing-Funktion, die eine kubisch Bézier-Kurve definiert.

steps()

Iteration entlang einer festgelegten Anzahl von Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Zeitlängen angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert verschiedeneranimation-timeline-Eigenschaften verwendet:

scroll()

Setzt dieanimation-timeline eines Elements auf eineanonyme Scroll-Fortschrittszeitleiste.

view()

Setzt dieanimation-timeline eines Elements auf eineanonyme Sicht-Fortschrittszeitleiste.

Anchor-Positionierungsfunktionen

Die Anchor-Positionierungsfunktionen werden verwendet, wenn anchor-positionierte Elemente relativ zur Position und Größe ihrer zugeordneten Ankerelemente positioniert und dimensioniert werden.

anchor()

Gibt eine Länge relativ zur Position der Kanten des Ankerelements des anchor-positionierten Elements zurück.

anchor-size()

Gibt eine Länge relativ zur Größe des zugeordneten Ankerelements zurück.

Baumzählfunktionen

Die folgenden Funktionen geben einen Ganzzahlenwert basierend auf dem DOM-Baum zurück, im Gegensatz zum flachen Baum, wie die meisten CSS-Werte es tun:

sibling-index()

Gibt eine Ganzzahl zurück, die die Position des ausgewählten Elements unter seinen Geschwistern widerspiegelt.

sibling-count()

Gibt eine Ganzzahl zurück, die die Gesamtanzahl der Geschwister einschließlich des ausgewählten Elements widerspiegelt.

Alphabetischer Index der Funktionen

• -moz-image-rect()Nicht standardisiertVeraltet
• abs()
• acos()
• anchor()
• anchor-size()
• asin()
• atan()
• atan2()
• attr()
• blur()
• brightness()
• calc()
• calc-size()Experimentell
• circle()
• clamp()
• color()
• color-mix()
• conic-gradient()
• contrast()
• contrast-color()Experimentell
• cos()
• counter()
• counters()
• cross-fade()
• cubic-bezier()
• device-cmyk()
• drop-shadow()
• dynamic-range-limit-mix()Experimentell
• element()Experimentell
• ellipse()
• env()
• exp()
• fit-content()
• grayscale()
• hsl()
• hue-rotate()
• hwb()
• hypot()
• if()Experimentell
• image()
• image-set()
• inset()
• invert()
• lab()
• layer()
• lch()
• light-dark()
• linear()
• linear-gradient()
• log()
• matrix()
• matrix3d()
• max()
• min()
• minmax()
• mod()
• oklab()
• oklch()
• opacity()
• paint()
• palette-mix()
• path()
• perspective()
• polygon()
• pow()
• progress()Experimentell
• radial-gradient()
• ray()
• rect()
• rem()
• repeat()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• rgb()
• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()
• round()
• saturate()
• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()
• scroll()
• sepia()
• shape()
• sibling-count()Experimentell
• sibling-index()Experimentell
• sign()
• sin()
• skew()
• skewx()
• skewy()
• sqrt()
• steps()
• superellipse()Experimentell
• symbols()
• tan()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• type()Experimentell
• url_function()
• var()
• view()
• xywh()

Siehe auch

• CSS-Werte und Einheiten Modul
• Lernen: Werte und Einheiten