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 annehmen, 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 das/die Argument(e) und die Funktion endet mit einer schließenden Klammer ).

Funktionen können mehrere Argumente aufnehmen, die ähnlich zu CSS-Eigenschaftswerten formatiert sind. Leerzeichen sind erlaubt, aber optional innerhalb der Klammern. Bei einigen funktionalen Notationen sind 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 mehrere baumstrukturelle Pseudoklassen erfordern Parameterwerte, sind aber keine Wertfunktionen. Die bedingten At-Regeln sind ebenfalls keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der CSS-<transform-function> 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(): 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 auf oder ab.
scaleY(): Skaliert ein Element vertikal auf oder ab.
scaleZ(): Skaliert ein Element entlang der z-Achse auf oder ab.
scale(): Skaliert ein Element auf der 2D-Ebene auf oder ab.
scale3d(): Skaliert ein Element im 3D-Raum auf oder ab.

Schiefwinkelfunktionen

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.

Perspektivenfunktionen

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

Mathematische Funktionen

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

Jede der folgenden Seiten enthält detaillierte Informationen zur 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-Math-Funktionen.

Grundarithmetik

calc(): Führt grundlegende arithmetische Berechnungen an numerischen Werten durch.
calc-size(): Führt Berechnungen an intrinsischen Größenwerten durch, wie auto, fit-content und max-content, 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 von minimalen, zentralen und maximalen Werten.

Abgestufte Wertfunktionen

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit dem gleichen Vorzeichen wie der Divisor) beim Teilen einer Zahl durch eine andere.
progress(): Berechnet die Position eines Wertes zwischen zwei anderen Werten — einem Start- 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 Dividend) beim Teilen 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 seiner Argumente.
log(): Berechnet den Logarithmus einer Zahl.
exp(): Berechnet e potenziert mit einer Zahl.

Vorzeichenbezogene Funktionen

abs(): Berechnet den Absolutbetrag 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 verändern kann. Er wird in den filter- und backdrop-filter-Eigenschaften verwendet.

blur(): Erhöht die Unschärfe des Bilds durch Gaußsche Unschärfe.
brightness(): Hellt ein Bild auf oder dunkelt es ab.
contrast(): Erhöht oder verringert den Kontrast des Bilds.
drop-shadow(): Fügt einen Schatten hinter einem Bild hinzu.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den Gesamtfarbton eines Bilds.
invert(): Invertiert die Farben eines Bilds.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die Gesamtsättigung eines Bilds.
sepia(): Erhöht den Sepia-Ton eines Bilds.

Farb-Funktionen

Der <color> CSS Datentyp spezifiziert verschiedene Farbdarstellungen.

rgb(): Definiert eine bestimmte Farbe entsprechend ihrer Rot-, Grün-, Blau- und Alpha-Komponenten (Transparenz).
hsl(): Definiert eine bestimmte Farbe entsprechend ihrem Farbton, ihrer Sättigung, Helligkeit und Alpha-Komponente (Transparenz).
hwb(): Definiert eine bestimmte Farbe entsprechend ihrem Farbton, Weißgrad und Schwarzgrad.
lch(): Definiert eine bestimmte Farbe entsprechend ihrer Helligkeit, Chroma und Farbton.
oklch(): Definiert eine bestimmte Farbe entsprechend ihrer Helligkeit, Chroma, Farbton und Alpha-Komponente (Transparenz).
lab(): Definiert eine bestimmte Farbe entsprechend ihrer Helligkeit, a-Achsen-Distanz und b-Achsen-Distanz im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe entsprechend ihrer Helligkeit, a-Achsen-Distanz, b-Achsen-Distanz im Lab-Farbraum und Alpha-Komponente (Transparenz).
color(): Gibt einen bestimmten, angegebenen Farbraum an, anstatt des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem bestimmten Farbraum anhand eines gegebenen Betrags.
contrast-color(): Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene Farbe 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 eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbgebungsschema zurück.
dynamic-range-limit-mix(): Erstellt eine benutzerdefinierte maximale Leuchtkraftgrenze, die eine Mischung verschiedener dynamic-range-limit-Schlüsselwörter in bestimmten Prozentsätzen ist.

Bildfunktionen

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

Verlaufsfunktionen

linear-gradient(): Lineare Verläufe ändern Farben stetig entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern Farben stetig von einem Mittelpunkt (Ursprung).
conic-gradient(): Kegelförmige Verläufe ändern Farben stetig um einen Kreis.
repeating-linear-gradient(): Ähnlich wie linear-gradient() und nimmt dieselben Argumente, wiederholt aber die Farbstopps unendlich in alle Richtungen, um sein gesamtes Container zu bedecken.
repeating-radial-gradient(): Ähnlich wie radial-gradient() und nimmt dieselben Argumente, wiederholt aber die Farbstopps unendlich in alle Richtungen, um sein gesamtes Container zu bedecken.
repeating-conic-gradient(): Ähnlich wie conic-gradient() und nimmt dieselben Argumente, wiederholt aber die Farbstopps unendlich in alle Richtungen, um sein gesamtes Container zu bedecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich dem <url>-Typ, jedoch mit zusätzlichen Funktionen, einschließlich der Spezifizierung der Bildrichtung und Ersatzbildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das geeignetste CSS-Bild aus einem angegebenen Satz aus, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade(): Mischt zwei oder mehr Bilder mit definierter Transparenz.
element(): Definiert einen <image>-Wert, der aus einem beliebigen HTML-Element generiert wird.
paint(): Definiert einen <image>-Wert, der mit einem PaintWorklet generiert wurde.

Zählerfunktionen

CSS-Zählerfunktionen werden im Allgemeinen mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall dort 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 <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 Rechteckform.
rect(): Definiert eine Rechteckform mithilfe der Abstände von den oberen und linken Kanten der Referenzbox.
xywh(): Definiert eine Rechteckform, indem die angegebenen Abstände von den oberen und linken Kanten der Referenzbox und die Rechtecksbreite sowie -höhe verwendet werden.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfadspezifikation, um eine Form zu zeichnen.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Andere Formfunktionen

ray(): Gültig mit offset-path; definiert die Liniensegmente, denen 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 bestandteiligen und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr(): Verwendet die auf dem HTML-Element definierten Attribute.
env(): Verwendet die vom User-Agenten definierten Umgebungsvariablen.
if(): Setzt bedingt einen Eigenschaftswert abhängig vom Ergebnis einer Stilabfrage, Medienabfrage oder Feature-Abfrage.
url(): Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines beliebigen Teils des Wertes einer anderen Eigenschaft.

Rasterfunktionen

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

fit-content(): Beschränkt 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 als oder gleich min und kleiner als oder gleich max ist.
repeat(): Stellt ein wiederholtes Fragment der Spur-Definition dar, das eine große Anzahl von Spalten oder Reihen ermöglicht, die ein wiederkehrendes Muster aufweisen.

Schriftfunktionen

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

stylistic(): Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Ermöglicht stilistische Alternativen für Zeichensatzgruppen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt jedoch keine kohärenten Glyphen für eine Zeichensatzgruppe; einzelne Zeichen werden unabhängige und nicht unbedingt kohärente Stile haben. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Ermöglicht Schrieb-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.
ornaments(): Ermöglicht Ornamente wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Ermöglicht Anmerkungen wie umrandete Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet 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(): Iteriert über eine angegebene Anzahl von Stopppunkten entlang des Übergangs und zeigt jeden Stopp für gleiche Zeitlängen an.

Animationsfunktionen

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

scroll(): Setzt die animation-timeline eines Elements auf eine anonyme Scroll-Progess-Zeitleiste.
view(): Setzt die animation-timeline eines Elements auf eine anonyme Ansichts-Progess-Zeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, um Anker-elementierte Elemente relativ zu ihrem Standort und ihrer Größe zu positionieren und zu dimensionieren.

anchor(): Gibt eine Länge relativ zur Position der Kanten des Anker-positionierten Elements zugehörigen Ankerelements zurück.
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