CSS-Wertfunktionen

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

Syntax

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

Die Wertsyntax beginnt mit dem Namen der Funktion, gefolgt von einer öffnenden Klammer (. Danach folgen 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. Bei einigen Funktionsnotationen werden mehrere Argumente durch Kommas getrennt, während andere Abstand verwenden.

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 bedingten 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.

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

Schiefziehfunktionen

skewX(): Zieht ein Element in horizontaler Richtung schief.
skewY(): Zieht ein Element in vertikaler Richtung schief.
skew(): Zieht ein Element auf der 2D-Ebene schief.

Matrixfunktionen

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

Perspektivenfunktionen

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

Mathematische Funktionen

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

Jede der untenstehenden Seiten enthält ausführliche Informationen über die Syntax einer mathematischen Funktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Für eine umfassende Einführung in CSS-Mathematikfunktionen siehe Verwendung von CSS-Mathematikfunktionen.

Grundlegende Arithmetik

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 Wert aus einer Liste von Werten.
max(): Berechnet den größten Wert aus einer Liste von Werten.
clamp(): Berechnet den mittleren Wert zwischen einem Minimum, einem Mittelwert und einem Maximum.

Schrittwertfunktionen

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet ein Modulus (mit demselben 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 dem Anfangs- und Endwert darstellt.
rem(): Berechnet den 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 von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow(): Berechnet die Basis potenziert mit einer Zahl.
sqrt(): Berechnet die Quadratwurzel einer Zahl.
hypot(): Berechnet die Quadratwurzel der Summe der Quadrate der Argumente.
log(): Berechnet den Logarithmus einer Zahl.
exp(): Berechnet e potenziert mit einer Zahl.

Vorzeichenbezogene Funktionen

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

Filterfunktionen

Der <filter-function> CSS-Datentyp repräsentiert einen grafischen Effekt, der das Aussehen 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(): Hellt ein Bild auf oder verdunkelt es.
contrast(): Erhöht oder verringert den Bildkontrast.
drop-shadow(): Fügt einem Bild einen Schlagschatten hinzu.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Verändert den Gesamtfarbton eines Bildes.
invert(): Kehrt die Farben eines Bildes um.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Verändert die Gesamtsättigung eines Bildes.
sepia(): Erhöht den Sepia-Anteil eines Bildes.

Farb-Funktionen

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

rgb(): Definiert eine bestimmte Farbe anhand ihrer Rot-, Grün-, Blau- und Alpha-(Transparenz-)Komponenten.
hsl(): Definiert eine bestimmte Farbe anhand ihrer Farbton-, Sättigungs-, Helligkeits- und Alpha-(Transparenz-)Komponenten.
hwb(): Definiert eine bestimmte Farbe anhand ihrer Farbton-, Weiß- und Schwarzanteile.
lch(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, Chroma und Farbtonkomponenten.
oklch(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, Chroma, Farbton und Alpha-(Transparenz-)Komponenten.
lab(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, A-Achsen-Distanz und B-Achsen-Distanz im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe anhand ihrer Helligkeit, A-Achsen-Distanz, B-Achsen-Distanz im Lab-Farbraum und Alpha (Transparenz).
color(): Gibt einen bestimmten, spezifizierten Farbraum an, anstelle des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem angegebenen 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 auf Geräten-abhängige Weise.
light-dark(): Gibt eine von zwei bereitgestellten Farben auf der Basis des aktuellen Farbschemas zurück.
dynamic-range-limit-mix(): Erstellt ein benutzerdefiniertes Maximum an Leuchtkraftgrenze, das aus einer Mischung verschiedener dynamic-range-limit Schlüsselwörter in angegebenen Prozentwerten besteht.

Bildfunktionen

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

Verlauf-Funktionen

linear-gradient(): Lineare Verläufe färben sich schrittweise entlang einer gedachten Linie.
radial-gradient(): Radiale Verläufe färben sich schrittweise von einem Mittelpunkt (Ursprung) aus.
conic-gradient(): Kegelförmige Verläufe färben sich schrittweise entlang eines Kreises.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt dieselben Argumente an, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu füllen.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und nimmt dieselben Argumente an, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu füllen.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und nimmt dieselben Argumente an, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu füllen.

Bildfunktionen

image(): Definiert ein <image> ähnlich wie der <url>-Typ, jedoch mit zusätzlicher Funktionalität wie der Angabe der Bildrichtung und Ersatbilder für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das am besten geeignete CSS-Bild aus einer gegebenen Menge 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 erzeugt wird.

Zählerfunktionen

CSS-Zählerfunktionen werden im Allgemeinen mit der content Eigenschaft verwendet, obwohl sie theoretisch überall dort 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, 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

Grundformen

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

circle(): Definiert eine Kreisform.
ellipse(): Definiert eine Ellipsenform.
inset(): Definiert eine eingezogene Rechtecksform.
rect(): Definiert eine Rechtecksform unter Verwendung der Abstände von den oberen und linken Kanten des Referenzrahmens.
xywh(): Definiert eine Rechtecksform 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-Pfad-Zeichenkette, um eine Form zeichnen zu können.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Weitere 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 Bestandteilen sowie verwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr(): Verwendet die im HTML-Element definierten Attribute.
env(): Verwendet die vom Benutzeragenten festgelegte Umgebungsvariable.
if(): Setzt einen Eigenschaftswert abhängig vom Ergebnis einer Stilabfrage, Medienabfrage oder Funktionsabfrage bedingt fest.
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(): Klemmt eine gegebene Größe an eine verfügbare Größe gemäß der Formel min(maximum size, max(minimum size, argument)).
minmax(): Definiert einen Größenbereich, der größer ist als oder gleich min und kleiner oder gleich max.
repeat(): Repräsentiert ein wiederholtes Fragment der Streckenliste und ermöglicht eine große Anzahl von Spalten oder Zeilen, 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 mit einer Zahl verknüpft ist. Er entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Aktiviert stilistische Alternativen für Gruppen von Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der mit einer Zahl verknüpft 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 eine Gruppe von Zeichen; einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartenspezifischer Name, der mit einer Zahl verknüpft ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Schnörkelschrift-Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der mit einer Zahl verknüpft 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 mit einer Zahl verknüpft ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Annotationen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der mit einer Zahl verknüpft ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Easing-Funktionen

Der <easing-function> CSS-Datentyp 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 kubische Bézierkurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Stopps entlang der Übergangsphase, wobei jeder Stopp für eine gleiche Zeitdauer 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 View-Fortschrittstimeline.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, wenn Anker-positionierte Elemente 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 zurück, das seinem zugehörigen Ankerelement zugeordnet ist.
anchor-size(): Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.

Baumzählfunktionen

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

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 Gesamtzahl 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