CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die 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 einige Eingabeargumente verwenden, um den Rückgabewert zu berechnen.

Syntax

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

Die Wertsyntax beginnt mit dem Funktionsnamen, gefolgt von einer linken Klammer (. Anschließend kommen die Argumente, und die Funktion endet mit einer abschließenden Klammer ).

Funktionen können mehrere Argumente aufnehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern 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, linguistischen Pseudoklassen und einige baumstrukturelle Pseudoklassen erfordern Parameterwerte, sind jedoch keine Wertfunktionen. Die bedingten at-rules 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(): Verschiebt ein Element horizontal.
translateY(): Verschiebt ein Element vertikal.
translateZ(): Verschiebt ein Element entlang der z-Achse.
translate(): Verschiebt ein Element auf der 2D-Ebene.
translate3d(): Verschiebt ein Element im dreidimensionalen 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 dreidimensionalen Raum.

Skalierungsfunktionen

scaleX(): Skaliert ein Element horizontal herauf oder herunter.
scaleY(): Skaliert ein Element vertikal herauf oder herunter.
scaleZ(): Skaliert ein Element entlang der z-Achse herauf oder herunter.
scale(): Skaliert ein Element auf der 2D-Ebene herauf oder herunter.
scale3d(): Skaliert ein Element im dreidimensionalen Raum herauf oder herunter.

Verzerrungsfunktionen

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(): Legt den Abstand zwischen dem Benutzer und der z=0-Ebene fest.

Mathematikfunktionen

Die Mathematikfunktionen ermöglichen es, numerische CSS-Werte als mathematische Ausdrücke zu schreiben.

Jede der folgenden Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Browser-Kompatibilitätsdaten, Beispiele und mehr. Für eine ganzheitliche Einführung in CSS-Mathematikfunktionen siehe Verwenden 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 Wert einer Liste von Werten.
max(): Berechnet den größten Wert einer Liste von Werten.
clamp(): Berechnet den zentralen Wert zwischen einem Mindest-, Zentrum- und Höchstwert.

Funktionen für abgestufte Werte

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit dem gleichen Vorzeichen wie der Teiler), wenn eine Zahl durch eine andere geteilt wird.
progress(): Berechnet die Position eines Wertes 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 einen Rest (mit dem gleichen 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 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 auf 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.

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 Eingangsbildes ändern kann. Es 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(): Wendet einen Schlagschatten hinter einem Bild an.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den Gesamtfarbton 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.

Farb-Funktionen

Der <color> CSS-Datentyp gibt verschiedene Farbdarstellungen an.

rgb(): Definiert eine gegebene Farbe entsprechend ihrer Rot-, Grün-, Blau- und Alpha-(Transparenz)-Komponenten.
hsl(): Definiert eine gegebene Farbe entsprechend ihrer Farbton-, Sättigungs-, Helligkeits- und Alpha-(Transparenz)-Komponenten.
hwb(): Definiert eine gegebene Farbe entsprechend ihrer Farbton-, Weiß- und Schwarztöne-Komponenten.
lch(): Definiert eine gegebene Farbe entsprechend ihrer Helligkeits-, Chroma- und Farbton-Komponenten.
oklch(): Definiert eine gegebene Farbe entsprechend ihrer Helligkeits-, Chroma-, Farbton- und Alpha-(Transparenz)-Komponenten.
lab(): Definiert eine gegebene Farbe entsprechend ihrer Helligkeits-, a-Achs-Distanz- und b-Achs-Distanz im Lab-Farbraum.
oklab(): Definiert eine gegebene Farbe entsprechend ihrer Helligkeits-, a-Achs-Distanz-, b-Achs-Distanz im Lab-Farbraum und Alpha (Transparenz).
color(): Gibt einen bestimmten, angegebenen Farbraum an, anstatt den impliziten sRGB-Farbraum.
color-mix(): Mischt zwei Farbwerte in einem gegebenen Farbraum durch einen bestimmten Anteil.
contrast-color(): Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene Farbe zurück.
device-cmyk(): Definiert CMYK-Farben in einer geräteabhängigen Weise.
alpha(): Gibt eine Farbe mit einem modifizierten Alpha-(Transparenz)-Kanal zurück.
light-dark(): Gibt eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.
dynamic-range-limit-mix(): Erstellt eine benutzerdefinierte maximale Luminanzgrenze, die eine Mischung aus verschiedenen dynamic-range-limit Schlüsselwörtern in angegebenen Prozentsätzen darstellt.

Bildfunktionen

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

Verlauffunktionen

linear-gradient(): Lineare Verläufe ändern die Farben nach und nach entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern die Farben nach und nach von einem Mittelpunkt (Ursprung).
conic-gradient(): Kegelförmige Verläufe ändern die Farben nach und nach um einen Kreis herum.
repeating-linear-gradient(): Ähnelt linear-gradient() und nimmt die gleichen Argumente an, aber wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-radial-gradient(): Ähnelt radial-gradient() und nimmt die gleichen Argumente an, aber wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-conic-gradient(): Ähnelt conic-gradient() und nimmt die gleichen Argumente an, aber wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich wie der <url> Typ, aber mit zusätzlicher Funktionalität, einschließlich der Angabe der Richtungsabhängigkeit des Bildes und Ersatzbilder, wenn das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das geeignetste CSS-Bild aus einem gegebenen Set, 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 generiert wird.

Zählerfunktionen

CSS-Zählerfunktionen werden generell mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall verwendet werden können, wo ein <string> unterstützt wird.

counter(): Gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, wenn es einen gibt.
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 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 eingelassene Rechteckform.
rect(): Definiert eine Rechteckform mit den Abständen von den oberen und linken Rändern der Referenzbox.
xywh(): Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Rändern der Referenzbox 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, 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 zur Angabe eines <corner-shape-value> verwendet werden, der mit corner-shape und seinen konstituierenden und 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 auf HTML-Elementen definierten Attribute.
env(): Verwendet die vom Benutzeragenten definierten Umgebungsvariablen.
if(): Setzt bedingt einen Eigenschaftswert abhängig vom Ergebnis einer Stilanfrage, Medienanfrage oder Funktionsanfrage.
url(): Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Wertes einer anderen Eigenschaft.

Rasterfunktionen

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

fit-content(): Klemmt eine gegebene Größe auf eine verfügbare Größe gemäß der Formel min(maximaler Wert, max(minimaler Wert, 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 Track-Liste, das eine große Anzahl an Spalten oder Zeilen erlaubt, die ein wiederkehrendes Muster aufweisen.

Schriftarten-Funktionen

CSS-Schriftarten-Funktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um die Verwendung von alternativen Zeichen zu steuern.

stylistic(): Aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Aktiviert stilistische Alternativen für Zeichen-Sets. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Aktiviert bestimmte stilistische Alternativen für Zeichen. Ähnlich wie styleset(), erstellt jedoch keine kohärenten Glyphen für ein Set von Zeichen; einzelne Zeichen haben unabhängige und nicht unbedingt kohärente Stile. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Schwungbuchstaben. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.
ornaments(): Aktiviert Ornamente wie Fleurons und andere Dingbat-Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Timingfunktionen

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

linear(): Eine Timingfunktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier(): Eine Timingfunktion, die eine kubische Bézier-Kurve definiert.
steps(): Iteriert entlang einer spezifischen Anzahl von Stopps entlang des Übergangs und zeigt jeden Stopp für gleich lange Zeit an.

Animationsfunktionen

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

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

Anker-Positionierungsfunktionen

Die Anker-Positionierungsfunktionen werden verwendet, um Anker-Positionierungs-Elemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente zu positionieren und zu dimensionieren.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines Anker-Positionierungs-Elements zurück, die dem zugehörigen Ankerelement entspricht.
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 Gesamtanzahl der Geschwister einschließlich des ausgewählten Elements widerspiegelt.

Alphabetisches Verzeichnis 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