CSS-Wertfunktionen

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

Syntax

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

Die Wertsyntax 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. In einigen Funktionsnotationen sind mehrere Argumente durch Kommas getrennt, bei anderen werden Leerzeichen verwendet.

Hinweis: Die CSS-Wertfunktionen werden als Eigenschaftswerte verwendet und sollten nicht mit Pseudoklassen verwechselt werden. Die funktionalen Pseudoklassen, linguistischen Pseudoklassen und mehrere baumstrukturelle Pseudoklassen erfordern Parameterwerte, sind jedoch 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 Erscheinungstransformationen. Er wird als Wert der transform-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(): Skalierung eines Elements horizontal nach oben oder unten.
scaleY(): Skalierung eines Elements vertikal nach oben oder unten.
scaleZ(): Skalierung eines Elements entlang der z-Achse nach oben oder unten.
scale(): Skalierung eines Elements auf der 2D-Ebene nach oben oder unten.
scale3d(): Skalierung eines Elements im 3D-Raum nach oben oder unten.

Scherfunktionen

skewX(): Schert ein Element in horizontaler Richtung.
skewY(): Schert ein Element in vertikaler Richtung.
skew(): Schert 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 die Entfernung zwischen dem Benutzer und der z=0-Ebene.

Mathematische Funktionen

Die mathematischen Funktionen ermöglichen es, CSS-Numerischen Werte in Form von mathematischen Ausdrücken 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 CSS-Mathematikfunktionen siehe Verwenden von CSS-Mathematikfunktionen.

Grundlegende Arithmetik

calc(): Führt grundlegende arithmetische Berechnungen an 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 Wert aus einer Liste von Werten.
max(): Berechnet den größten Wert aus einer Liste von Werten.
clamp(): Berechnet den zentralen Wert aus einem Minimum, Zentralwert und Maximum.

Stufenwertfunktion

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit dem gleichen Vorzeichen wie der Divisor) bei der Division einer Zahl durch eine andere.
progress(): Berechnet die Position eines Wertes zwischen zwei anderen Werten - einem Anfangs- und einem Endwert. Das Ergebnis wird als Zahl zwischen 0 und 1 ausgedrückt, die den Fortschritt zwischen den Start- und Endwerten darstellt.
rem(): Berechnet einen Rest (mit dem gleichen Vorzeichen wie der Divisor) 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 von zwei Zahlen in einer Ebene.

Exponentialfunktion

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

Zeichenbezogene Funktionen

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

Filterfunktionen

Der <filter-function> CSS-Datentyp repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingabebildes ändern kann. Er wird in den filter- und backdrop-filter-Eigenschaften 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(): Fügt einen Schlagschatten hinter einem Bild hinzu.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den Gesamtfarbton eines Bildes.
invert(): Kehrt die Farben eines Bildes um.
opacity(): Verleiht einem Bild Transparenz.
saturate(): Ändert die Gesamtsättigung eines Bildes.
sepia(): Erhöht den Sepia-Anteil eines Bildes.

Farb-Funktionen

Der <color> CSS-Datentyp legt verschiedene Farbrepräsentationen fest.

rgb(): Definiert eine gegebene Farbe anhand ihrer roten, grünen, blauen und Alpha-(Transparenz-)Komponenten.
hsl(): Definiert eine gegebene Farbe anhand ihres Farbtons, ihrer Sättigung, Helligkeit und Alpha-(Transparenz-)Komponenten.
hwb(): Definiert eine gegebene Farbe anhand ihres Farbtons, der Weißheit und Schwarzheit.
lch(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, Chroma und Farbton.
oklch(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, Chroma, Farbton und Alpha-(Transparenz-)Komponenten.
lab(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, A-Achsen-Abstand und B-Achsen-Abstand im Lab-Farbraum.
oklab(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, A-Achsen-Abstand, B-Achsen-Abstand im Lab-Farbraum und Alpha-(Transparenz).
color(): Gibt einen bestimmten, spezifizierten Farbraum anstatt des impliziten sRGB-Farbraums an.
color-mix(): Mischt zwei Farbewerte in einem bestimmten Farbraum in einem bestimmten Verhältnis.
contrast-color(): Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene Farbe zurück.
device-cmyk(): Definiert CMYK-Farben in geräteabhängiger Weise.
light-dark(): Gibt eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbdesign zurück.
dynamic-range-limit-mix(): Erstellt ein benutzerdefiniertes maximales Leuchtdichte-Limit, das eine Mischung aus verschiedenen dynamic-range-limit Schlüsselwörtern in den angegebenen Prozenten ist.

Bildfunktionen

Der <image> CSS-Datentyp bietet grafische Darstellungen von Bildern oder Farbverläufen.

Verlaufsfunktionen

linear-gradient(): Lineare Verläufe überblenden Farben progressiv entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe überblenden Farben progressiv von einem Mittelpunkt (Ursprung).
conic-gradient(): Konische Verläufe überblenden Farben progressiv um einen Kreis.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und akzeptiert die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und akzeptiert die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und akzeptiert die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich wie der <url>-Typ, aber mit zusätzlichen Funktionen wie der Spezifikation der Bildausrichtung und Fallback-Bildern 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 Satz aus, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade(): Blendet 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 im Allgemeinen mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall eingesetzt werden können, wo ein <string> unterstützt wird.

counter(): Gibt eine Zeichenkette zurück, die den aktuellen Wert des benannten Zählers darstellt, sofern einer vorhanden ist.
counters(): Ermöglicht verschachtelte Zähler und gibt eine zusammengefügte Zeichenkette zurück, die die aktuellen Werte der benannten Zähler darstellt, sofern vorhanden.
symbols(): Definiert die Zählstile inline, direkt als Wert einer Eigenschaft.

Formfunktionen

Grundformen

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 eingelassene Rechteckform.
rect(): Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Kanten des Referenzrahmens.
xywh(): Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie der Rechteckbreite und -höhe.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfadzeichenkette, um eine Form zu zeichnen.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die definieren, welche Form gezeichnet werden soll.

Andere Formfunktionen

ray(): Gültig mit offset-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> anzugeben, der mit corner-shape und seinen konstituierenden und verwandten Eigenschaften genutzt wird.

Referenzfunktionen

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

attr(): Verwendet die auf einem HTML-Element definierten Attribute.
env(): Verwendet die vom Benutzer-Agent definierten Umgebungsvariablen.
if(): Setzt bedingt einen Eigenschaftswert in Abhängigkeit vom Ergebnis einer Stilabfrage, Medienabfrage oder Feature-Abfrage.
url(): Verwendet eine Datei aus der angegebenen URL.
var(): Verwendet den Wert einer benutzerdefinierten Eigenschaft anstelle eines anderen Wertes einer anderen Eigenschaft.

Rasterfunktionen

Die folgenden Funktionen werden zur Definition eines CSS-Rasters verwendet:

fit-content(): Begrenzung einer gegebenen Größe auf 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 ein wiederholtes Fragment der Spur Liste, welches ermöglicht, dass eine große Anzahl von Spalten oder Reihen ein sich wiederholendes Muster zeigt.

Schriftfunktionen

CSS-Schriftfunktionen 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 schriftartspezifischer Name, der zu 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 schriftartspezifischer Name, der zu 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(), erstellt jedoch keine kohärenten Glyphen für einen Satz von Zeichen; individuelle Zeichen werden unabhängige und nicht unbedingt kohärente Stile haben. Der Parameter ist ein schriftartspezifischer Name, der zu einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Swash-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der zu 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 schriftartspezifischer Name, der zu einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der zu einer Zahl zugeordnet ist. Es entspricht dem OpenType-Wert nalt, wie nalt 2.

Übergangsfunktionen

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

linear(): Übergangsfunktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier(): Übergangsfunktion, die eine kubische Bézierkurve definiert.
steps(): Iteration entlang einer bestimmten Anzahl von Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Zeitdauern 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-Fortschrittszeitleiste.
view(): Setzt die animation-timeline eines Elements auf eine anonyme Sicht-Fortschrittszeitleiste.

Verankerungspositionierungsfunktionen

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

anchor(): Gibt eine Länge relativ zur Position der Kanten des verankerungspositionierten Elements zurück, die mit dem verbundenen Ankerelement verbunden sind.
anchor-size(): Gibt eine Länge relativ zur Größe des verbundenen Ankerelements zurück.

Baumzählefunktionen

Die folgenden Funktionen geben einen ganzzahligen Wert basierend auf dem DOM-Baum zurück, im Gegensatz zu den meisten CSS-Werten, die auf dem flachen Baum basieren:

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.

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden