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 Namen der Funktion, gefolgt von einer öffnenden Klammer (. Danach folgen die Argumente, 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 funktionalen Notationen werden mehrere Argumente durch Kommata getrennt, während andere Leerzeichen verwenden.

Hinweis: Die CSS-Wertfunktionen werden als Eigenschaftswerte verwendet und sollten nicht mit Pseudo-Klassen verwechselt werden. Die funktionellen Pseudo-Klassen, linguistischen Pseudo-Klassen und mehrere Baum-Struktur-Pseudo-Klassen erfordern Parameterwerte, sind aber 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 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(): 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.

Schrägungsfunktionen

skewX(): Schrägt ein Element in horizontaler Richtung.
skewY(): Schrägt ein Element in vertikaler Richtung.
skew(): Schrägt 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 den Abstand zwischen dem Benutzer und der z=0-Ebene.

Mathematikfunktionen

Die Mathematikfunktionen ermöglichen es, dass CSS-nummerische Werte als mathematische Ausdrücke geschrieben werden.

Jede der folgenden Seiten enthält detaillierte Informationen zur Syntax einer Mathematikfunktion, Browser-Kompatibilitätsdaten, 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 mit numerischen Werten durch.
calc-size(): Führt Berechnungen für intrinsische Größenwerte 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 zwischen einem Minimum, einem Zentral- und einem Maximumwert.

Schrittwertfunktionen

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit demselben Vorzeichen wie der Divisor), 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 wird als Zahl zwischen 0 und 1 ausgedrückt, die den Fortschritt zwischen den Start- und Endwerten darstellt.
rem(): Berechnet einen Rest (mit demselben Vorzeichen wie der Divisor), 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 in einer Ebene.

Exponentialfunktionen

pow(): Berechnet die Potenz einer Basis mit einem Exponenten.
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 absoluten Wert einer Zahl.
sign(): Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

Der <filter-function> CSS Datentyp stellt einen grafischen Effekt dar, 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(): Erhellt oder verdunkelt ein Bild.
contrast(): Erhöht oder verringert den Kontrast des Bildes.
drop-shadow(): Fügt hinter einem Bild einen Schatten hinzu.
grayscale(): Wandelt ein Bild in Graustufen um.
hue-rotate(): Ändert den Gesamtsättigungsgrad eines Bildes.
invert(): Invertiert die Farben eines Bildes.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die Gesamtsättigung eines Bildes.
sepia(): Erhöht den Sepia-Ton eines Bildes.

Farbwertfunktionen

Der <color> CSS Datentyp spezifiziert verschiedene Farbdarstellungen.

rgb(): Definiert eine gegebene Farbe nach ihren Rot-, Grün-, Blau- und Alpha-Komponenten (Transparenz).
hsl(): Definiert eine gegebene Farbe nach ihrem Farbton, Sättigung, Helligkeit und Alpha-Komponenten (Transparenz).
hwb(): Definiert eine gegebene Farbe nach ihrem Farbton, Weißanteil und Schwarzanteil.
lch(): Definiert eine gegebene Farbe nach ihrer Helligkeit, Chroma und Farbton.
oklch(): Definiert eine gegebene Farbe nach ihrer Helligkeit, Chroma, Farbton und Alpha-Komponenten (Transparenz).
lab(): Definiert eine gegebene Farbe nach ihrer Helligkeit, a-Achsen-Abstand und b-Achsen-Abstand im Lab-Farbraum.
oklab(): Definiert eine gegebene Farbe nach ihrer Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand 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 gegebenen Farbraum zu einem bestimmten Prozentsatz.
contrast-color(): Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene Farbe zurück.
device-cmyk(): Definiert CMYK-Farben auf geräteabhängige Weise.
light-dark(): Gibt eine der beiden angegebenen Farben basierend auf dem aktuellen Farbschema zurück.
dynamic-range-limit-mix(): Erstellt ein benutzerdefiniertes maximales Helligkeitslimit, das eine Mischung aus verschiedenen dynamic-range-limit Stichwörtern in bestimmten Prozentsätzen ist.

Bildfunktionen

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

Verlaufsfunktionen

linear-gradient(): Lineare Verläufe ändern die Farben allmählich entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern die Farben allmählich von einem Mittelpunkt (Ursprung).
conic-gradient(): Konische Verläufe ändern die Farben allmählich um einen Kreis herum.
repeating-linear-gradient(): Ähnlich wie linear-gradient(), nimmt aber dieselben Argumente und wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-radial-gradient(): Ähnlich wie radial-gradient(), nimmt aber dieselben Argumente und wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-conic-gradient(): Ähnlich wie conic-gradient(), nimmt aber dieselben Argumente und wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> auf ähnliche Weise wie der <url> Typ, bietet aber zusätzliche Funktionen, einschließlich der Angabe der Bildrichtung und von Ausweichbildern, falls das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das passendste CSS-Bild aus einem gegebenen Satz, hauptsächlich für hochauflösende Bildschirme.
cross-fade(): Mischt zwei oder mehr Bilder mit 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 hauptsächlich mit der content Eigenschaft verwendet, obwohl sie theoretisch überall dort verwendet werden können, wo ein <string> unterstützt wird.

counter(): Gibt einen String zurück, der den aktuellen Wert des benannten Zählers repräsentiert, falls vorhanden.
counters(): Ermöglicht verschachtelte Zähler und gibt einen zusammengesetzten String zurück, der die aktuellen Werte der benannten Zähler darstellt, falls vorhanden.
symbols(): Definiert die Zählerstile inline direkt als den Wert einer Eigenschaft.

Formfunktionen

Grundlegende Formen

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 eingezogene Rechteckform.
rect(): Definiert eine Rechteckform mithilfe der Abstände von den oberen und linken Rändern des Bezugsrahmens.
xywh(): Definiert eine Rechteckform mithilfe der angegebenen Abstände von den oberen und linken Rändern des Bezugsrahmens sowie der Rechteckbreite und -höhe.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert einen SVG-Pfadstring, 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 Linienstück, 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 seinen Bestandteilen und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

Die folgenden Funktionen werden als Wert von Eigenschaften verwendet, um auf einen Wert zu verweisen, der anderswo definiert ist:

attr(): Verwendet die Attribute, die auf dem HTML-Element definiert sind.
env(): Verwendet die vom Benutzeragenten als Umgebungsvariable definierte Variable.
if(): Setzt einen Eigenschaftswert bedingt in Abhängigkeit von dem Ergebnis einer Stilanfrage, Medienanfrage oder Funktionanfrage.
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 zur Definition eines CSS-Rasters verwendet:

fit-content(): Klemmt 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 oder gleich min und kleiner oder gleich max ist.
repeat(): Repräsentiert ein wiederholtes Fragment der Spurauflistung, 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 die Verwendung von alternativen Glyphen zu steuern.

stylistic(): Aktiviert 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(): Aktiviert stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartspezifischer Name, der 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; einzelne Zeichen haben unabhängige und nicht unbedingt kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Swash 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(): Aktiviert 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(): Aktiviert Anmerkungen wie umkreiste 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(): Iteration entlang einer bestimmten Anzahl von Haltepunkten während des Übergangs, wobei jeder Punkt für gleiche Zeitabschnitte 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 Ansichtsfortschrittstimeline.

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 des Anker-positionierten Elements zurück, die mit dem zugehörigen Ankerelement verknüpft sind.
anchor-size(): Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.

Baumzählerfunktionen

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

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