CSS-Wertefunktionen

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

Syntax

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

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

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

Hinweis: Die CSS-Wertefunktionen werden als Eigenschaftswerte verwendet und sollten nicht mit Pseudo-Klassen verwechselt werden. Die funktionalen Pseudo-Klassen, linguistischen Pseudo-Klassen und mehrere baumstrukturelle Pseudo-Klassen erfordern Parameterwerte, sind jedoch keine Wertefunktionen. Die bedingten @-Regeln sind ebenfalls keine Wertefunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS Datentyp steht für Erscheinungstransformationen. 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ägfunktionen

skewX()

Verzieht ein Element in horizontaler Richtung.

skewY()

Verzieht ein Element in vertikaler Richtung.

skew()

Verzieht 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 Benutzer und der z=0-Ebene.

Mathematikfunktionen

Die Mathematikfunktionen erlauben das Schreiben von CSS-Zahlwerten als mathematische Ausdrücke.

Jede der folgenden Seiten enthält detaillierte Informationen zur Syntax einer Mathematikfunktion, zur Browser-Kompatibilität, zu Beispielen und mehr. Für einen umfassenden Einstieg in CSS-Mathematikfunktionen siehe Verwendung von CSS-Mathematikfunktionen.

Grundrechenarten

calc()

Führt grundlegende arithmetische Berechnungen auf numerischen Werten durch.

calc-size()

Führt Berechnungen auf intrinsischen Größenwerten wie auto, fit-content und max-content durch, die von der calc()-Funktion nicht unterstützt werden.

Vergleichsfunktionen

min()

Berechnet den kleinsten aus einer Liste von Werten.

max()

Berechnet den größten aus einer Liste von Werten.

clamp()

Berechnet den Mittelwert von Mindest-, Mittel- und Höchstwerten.

Wertschrittfunktionen

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 Cosinus 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, erhoben 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 hoch der Potenz einer Zahl.

Zeichenbezogene 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 ändern kann. Er wird in den filter- und backdrop-filter-Eigenschaften verwendet.

blur()

Erhöht die Bildunschärfe (Gaußsche Unschärfe).

brightness()

Erhellt oder verdunkelt ein Bild.

contrast()

Erhöht oder verringert den Bildkontrast.

drop-shadow()

Erzeugt einen Schattenwurf hinter einem Bild.

grayscale()

Wandelt ein Bild in Graustufen um.

hue-rotate()

Ändert den Gesamtfarbton eines Bildes.

invert()

Invertiert die Farben eines Bildes.

opacity()

Fügt einem Bild Transparenz hinzu.

saturate()

Ändert die Gesamtsättigung eines Bildes.

sepia()

Erhöht den Sepia-Effekt eines Bildes.

Farb-Funktionen

Der <color> CSS Datentyp spezifiziert unterschiedliche Farb-Darstellungen.

rgb()

Definiert eine Farbe anhand ihrer Rot-, Grün-, Blau- und Alpha-(Transparenz) Komponenten.

hsl()

Definiert eine Farbe anhand ihres Farbtons, ihrer Sättigung, Helligkeit und Alpha-(Transparenz) Komponenten.

hwb()

Definiert eine Farbe anhand ihres Farbtons, Weiß- und Schwarzgehalts.

lch()

Definiert eine Farbe anhand ihrer Helligkeit, Chroma und Farbton Komponenten.

oklch()

Definiert eine Farbe anhand ihrer Helligkeit, Chroma, Farbton und Alpha-(Transparenz) Komponenten.

lab()

Definiert eine Farbe anhand ihrer Helligkeit, a-Achsen- und b-Achsen-Abstand im Lab-Farbraum.

oklab()

Definiert eine Farbe anhand ihrer Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand im Lab-Farbraum und Alpha-(Transparenz).

color()

Spezifiziert einen bestimmten, festgelegten Farbraum anstelle des impliziten sRGB-Farbraums.

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum zu einem bestimmten Anteil.

contrast-color()

Gibt eine Farbe mit maximalem Farbkontrast zu einer gegebenen Farbe zurück.

device-cmyk()

Definiert CMYK-Farben in geräteabhängiger Weise.

light-dark()

Gibt eine von zwei angegebenen Farben basierend auf dem aktuellen Farbschema zurück.

Bildfunktionen

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

Verlauf-Funktionen

linear-gradient()

Lineare Verläufe ändern Farben entlang einer gedachten Linie progressiv.

radial-gradient()

Radiale Verläufe ändern Farben progressiv von einem zentralen Punkt (Ursprung).

conic-gradient()

Kegelförmige Verläufe ändern Farben progressiv um einen Kreis.

repeating-linear-gradient()

Ähnlich wie linear-gradient(), jedoch wiederholen sich die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken.

repeating-radial-gradient()

Ähnlich wie radial-gradient(), jedoch wiederholen sich die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken.

repeating-conic-gradient()

Ähnlich wie conic-gradient(), jedoch wiederholen sich die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken.

Bildfunktionen

image()

Definiert ein <image> ähnlich dem <url> Typ, jedoch mit zusätzlicher Funktionalität einschließlich der Angabe der Richtungsfähigkeit des Bildes und Ausweichbildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das am besten geeignete CSS-Bild aus einem gegebenen Set aus, insbesondere für Bildschirme mit hoher Pixeldichte.

cross-fade()

Mischt zwei oder mehr Bilder bei 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 in der Regel mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall eingesetzt werden können, wo ein <string> unterstützt wird.

counter()

Gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, falls einer vorhanden ist.

counters()

Ermöglicht verschachtelte Zähler und gibt einen verketteten String zurück, der die aktuellen Werte der benannten Zähler darstellt, falls welche vorhanden sind.

symbols()

Definiert die Zählerstile direkt als Eigenschaftswert.

Formfunktionen

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

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine eingesetzte Rechteckform.

rect()

Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Rändern des Referenzkastens.

xywh()

Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Rändern des Referenzkastens sowie der Rechteckbreite und -höhe.

polygon()

Definiert eine Polygonform.

path()

Akzeptiert einen SVG-Pfadstring, um eine Form zu zeichnen.

shape()

Akzeptiert eine durch Kommas getrennte Liste von Befehlen zur Definition der zu zeichnenden Form.

ray()

Gültig nur mit offset-path, es definiert das Streckensegment, das ein animiertes Element folgen kann.

Referenzfunktionen

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

attr()

Verwendet die auf einem HTML-Element definierten Attribute.

env()

Verwendet die vom Benutzeragenten als Umgebungsvariable definierte Variable.

if()

Setzt je nach Ergebnis einer Stile-Anfrage, Media-Anfrage oder Feature-Anfrage bedingt einen Eigenschaftswert.

url()

Verwendet eine Datei von der angegebenen URL.

var()

Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Werts einer anderen Eigenschaft.

Gitterfunktionen

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

fit-content()

Begrenzt 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 Spur-Liste dar, das eine große Anzahl von Spalten oder Reihen mit einem wiederkehrenden Muster ermöglicht.

Schriftartenfunktionen

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

stylistic()

Aktiviert stilistische Alternativen für individuelle Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, beispielsweise salt 2.

styleset()

Aktiviert stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, beispielsweise ss02.

character-variant()

Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erstellt jedoch keine kohärenten Glyphen für einen Satz von Zeichen; einzelne Zeichen haben unabhängige und nicht unbedingt kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, beispielsweise cv02.

swash()

Aktiviert Schwung- Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, beispielsweise swsh 2 und cswh 2.

ornaments()

Aktiviert Ornamente wie Fleurons und andere Zierglyschen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, beispielsweise ornm 2.

annotation()

Aktiviert Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, beispielsweise nalt 2.

Easing-Funktionen

Der <easing-function> CSS Datentyp stellt eine mathematische Funktion dar. Er wird 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 bestimmten Anzahl von Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Zeitabstände 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-Fortschrittstimeline.

view()

Setzt die animation-timeline eines Elements auf eine anonyme Ansichtsfortschrittstimeline.

Anker-Positionierungsfunktionen

Die Anker-Positionierungsfunktionen werden verwendet, wenn Anker-Positionierungselemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente positioniert und dimensioniert werden.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines Anker-positionierten 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.

Baumzählungsfunktionen

Die folgenden Funktionen geben einen ganzzahligen Wert basierend auf dem DOM-Baum zurück, im Gegensatz zum flachen Baum, wie dies bei den meisten CSS-Werten der Fall ist:

sibling-index()

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

sibling-count()

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

Siehe auch