CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die eine spezielle Datenverarbeitung oder Berechnungen aufrufen, um einen CSS-Wert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertfunktionen repräsentieren komplexere Datentypen und können Eingabeargumente annehmen, 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 (. Darauf folgen die Argumente, und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerraum ist zulässig, innerhalb der Klammern jedoch optional. 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, sprachlichen Pseudoklassen und mehrere baumstrukturelle Pseudoklassen benötigen Parameterwerte, sind jedoch keine Wertfunktionen. Auch die bedingten at-rules sind keine Wertfunktionen; die Klammern werden zur Gruppierung verwendet.

Transformationsfunktionen

Der CSS-Datentyp <transform-function> repräsentiert Transformationen des Erscheinungsbilds. Er wird als Wert der Eigenschaft transform verwendet.

Verschiebungsfunktionen

translateX(): Verschiebt ein Element horizontal.
translateY(): Verschiebt ein Element vertikal.
translateZ(): Verschiebt ein Element entlang der z-Achse.
translate(): Verschiebt ein Element in der 2D-Ebene.
translate3d(): Verschiebt 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 in 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 in der 2D-Ebene nach oben oder unten.
scale3d(): Skaliert ein Element 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 in der 2D-Ebene.

Matrixfunktionen

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

Perspektivfunktionen

perspective(): Legt den Abstand zwischen dem Benutzer und der z=0-Ebene fest.

Mathematische Funktionen

Die mathematischen Funktionen ermöglichen das Schreiben numerischer CSS-Werte als mathematische Ausdrücke.

Jede der folgenden Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Eine umfassende Einführung in mathematische CSS-Funktionen finden Sie unter Verwenden mathematischer CSS-Funktionen.

Grundlegende Arithmetik

calc(): Führt grundlegende arithmetische Berechnungen mit numerischen Werten aus.
calc-size(): Führt Berechnungen mit intrinsischen Größenwerten wie auto, fit-content und max-content aus, die von der Funktion calc() nicht unterstützt werden.

Vergleichsfunktionen

min(): Berechnet den kleinsten Wert einer Werteliste.
max(): Berechnet den größten Wert einer Werteliste.
clamp(): Berechnet den mittleren von Minimal-, Mittel- und Maximalwert.

Funktionen für abgestufte Werte

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet beim Dividieren einer Zahl durch eine andere einen Modulo mit demselben Vorzeichen wie der Divisor.
progress(): Berechnet die Position eines Werts zwischen zwei anderen Werten – einem Startwert und einem Endwert. Das Ergebnis repräsentiert den Fortschritt zwischen Start- und Endwert, wobei 0 der Start und 1 das Ende ist.
rem(): Berechnet beim Dividieren einer Zahl durch eine andere einen Rest mit demselben Vorzeichen wie der Dividend.

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 zweier 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 ihrer Argumente.
log(): Berechnet den Logarithmus einer Zahl.
exp(): Berechnet e potenziert mit einer Zahl.

Zufallswertfunktionen

random(): Erzeugt einen Zufallswert zwischen einem Minimal- und einem Maximalwert.

Vorzeichenbezogene Funktionen

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

Filterfunktionen

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

blur(): Erhöht die Gaußsche Unschärfe des Bildes.
brightness(): Hellt ein Bild auf oder dunkelt es ab.
contrast(): Erhöht oder verringert den Bildkontrast.
drop-shadow(): Wendet einen Schlagschatten hinter einem Bild an.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den gesamten Farbton eines Bildes.
invert(): Invertiert die Farben eines Bildes.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die gesamte Sättigung eines Bildes.
sepia(): Erhöht den Sepia-Anteil eines Bildes.

Farbfunktionen

Der CSS-Datentyp <color> spezifiziert verschiedene Farbdarstellungen.

rgb(): Definiert eine Farbe anhand ihrer Rot-, Grün-, Blau- und Alpha-Komponenten (Transparenz).
hsl(): Definiert eine Farbe anhand ihrer Farbton-, Sättigungs-, Helligkeits- und Alpha-Komponenten (Transparenz).
hwb(): Definiert eine Farbe anhand ihrer Farbton-, Weiß- und Schwarz-Komponenten.
lch(): Definiert eine Farbe anhand ihrer Helligkeits-, Chroma- und Farbton-Komponenten.
oklch(): Definiert eine Farbe anhand ihrer Helligkeits-, Chroma-, Farbton- und Alpha-Komponenten (Transparenz).
lab(): Definiert eine Farbe anhand ihrer Helligkeit, ihres Abstands auf der a-Achse und ihres Abstands auf der b-Achse im Lab-Farbraum.
oklab(): Definiert eine Farbe anhand ihrer Helligkeit, ihres Abstands auf der a-Achse, ihres Abstands auf der b-Achse im Lab-Farbraum und Alpha (Transparenz).
color(): Gibt einen bestimmten, explizit angegebenen Farbraum statt des impliziten sRGB-Farbraums an.
color-mix(): Mischt zwei Farbwerte in einem angegebenen Farbraum um einen angegebenen Anteil.
contrast-color(): Gibt für eine angegebene Farbe eine Farbe mit maximalem Farbkontrast zurück.
device-cmyk(): Definiert CMYK-Farben geräteabhängig.
alpha(): Gibt eine Farbe mit einem modifizierten Alpha-Kanal (Transparenz) zurück.
light-dark(): Gibt abhängig vom aktuellen Farbschema eine von zwei bereitgestellten Farben zurück.
dynamic-range-limit-mix(): Erstellt eine benutzerdefinierte maximale Leuchtdichtebegrenzung, die eine Mischung verschiedener dynamic-range-limit-Schlüsselwörter in angegebenen Prozentwerten ist.

Bildfunktionen

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

Verlaufsfunktionen

linear-gradient(): Lineare Farbverläufe wechseln Farben schrittweise entlang einer imaginären Linie.
radial-gradient(): Radiale Farbverläufe wechseln Farben schrittweise von einem Mittelpunkt (Ursprung) aus.
conic-gradient(): Konische Farbverläufe wechseln Farben schrittweise um einen Kreis herum.
repeating-linear-gradient(): Ähnelt linear-gradient() und akzeptiert dieselben Argumente, wiederholt die Farbstopps jedoch unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-radial-gradient(): Ähnelt radial-gradient() und akzeptiert dieselben Argumente, wiederholt die Farbstopps jedoch unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-conic-gradient(): Ähnelt conic-gradient() und akzeptiert dieselben Argumente, wiederholt die Farbstopps jedoch unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich wie der Typ <url>, jedoch mit zusätzlichen Funktionen, einschließlich der Angabe der Schreibrichtung des Bildes und von Fallback-Bildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt aus einer gegebenen Menge das passendste CSS-Bild aus, vor allem für Bildschirme mit hoher Pixeldichte.
cross-fade(): Überblendet zwei oder mehr Bilder mit einer definierten Transparenz.
element(): Definiert einen <image>-Wert, der aus einem beliebigen HTML-Element erzeugt wird.
paint(): Definiert einen <image>-Wert, der mit einem PaintWorklet erzeugt wird.

Zählerfunktionen

CSS-Zählerfunktionen werden im Allgemeinen mit der Eigenschaft content verwendet, obwohl sie theoretisch überall verwendet 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 inline, direkt als Wert einer Eigenschaft.

Formfunktionen

Grundformen

Der CSS-Datentyp <basic-shape> 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 rechteckige Ausschnittsform.
rect(): Definiert eine Rechteckform anhand der Abstände von den oberen und linken Kanten des Referenzrahmens.
xywh(): Definiert eine Rechteckform 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 eine SVG-Pfadzeichenkette, um das Zeichnen einer Form zu ermöglichen.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

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 zur Angabe eines <corner-shape-value> verwendet werden, das mit corner-shape und dessen Bestandteil- und zugehörigen Eigenschaften verwendet wird.

Referenzfunktionen

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

attr(): Verwendet die auf dem HTML-Element definierten Attribute.
env(): Verwendet die vom User-Agent als Umgebungsvariable definierten Werte.
if(): Legt einen Eigenschaftswert abhängig vom Ergebnis einer Style-Abfrage, Media-Abfrage oder Feature-Abfrage bedingt fest.
url(): Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den Wert der benutzerdefinierten Eigenschaft anstelle eines beliebigen Teils eines Werts einer anderen Eigenschaft.

Grid-Funktionen

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

fit-content(): Beschränkt eine gegebene Größe gemäß der Formel min(maximum size, max(minimum size, argument)) auf eine verfügbare Größe.
minmax(): Definiert einen Größenbereich, der größer oder gleich min und kleiner oder gleich max ist.
repeat(): Repräsentiert ein wiederholtes Fragment der Track-Liste und ermöglicht eine große Anzahl von Spalten oder Zeilen mit einem wiederkehrenden Muster.

Schriftfunktionen

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

stylistic(): Aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, etwa salt 2.
styleset(): Aktiviert stilistische Alternativen für Gruppen von Zeichen. Der Parameter ist ein schriftspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, etwa ss02.
character-variant(): Aktiviert bestimmte stilistische Alternativen für Zeichen. Sie ähnelt styleset(), erzeugt jedoch keine kohärenten Glyphen für eine Zeichengruppe; einzelne Zeichen erhalten unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, etwa cv02.
swash(): Aktiviert Schwung-Glyphen. Der Parameter ist ein schriftspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, etwa swsh 2 und cswh 2.
ornaments(): Aktiviert Ornamente wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, etwa ornm 2.
annotation(): Aktiviert Annotationen wie eingekreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, etwa nalt 2.

Easing-Funktionen

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

linear(): Easing-Funktion, die zwischen ihren Punkten linear interpoliert.
cubic-bezier(): Easing-Funktion, die eine kubische Bézier-Kurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Stopps während des Übergangs, wobei jeder Stopp für gleich lange Zeit angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert verschiedener Eigenschaften von animation-timeline verwendet:

scroll(): Setzt animation-timeline eines Elements auf eine anonyme Scroll-Fortschrittszeitachse.
view(): Setzt animation-timeline eines Elements auf eine anonyme View-Fortschrittszeitachse.

Funktionen zur Ankerpositionierung

Die Funktionen zur Ankerpositionierung werden verwendet, wenn ankerpositionierte 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 des zugehörigen Ankerelements eines ankerpositionierten Elements zurück.
anchor-size(): Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.

Funktionen zur Baumzählung

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

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 Gesamtzahl der Geschwister einschließlich des ausgewählten Elements widerspiegelt.

Alphabetischer Index der Funktionen

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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