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 zur Berechnung des Rückgabewerts verwenden.

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 endet mit einer schließenden Klammer ).

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern optional. Bei 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-Regeln sind ebenfalls keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS Datentyp stellt eine Erscheinungstransformation dar. 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(): 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.

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 eine 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 folgenden Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Für eine ganzheitliche Einführung zu CSS-Mathematikfunktionen siehe Using CSS math functions.

Grundrechenarten

calc(): Führt grundlegende arithmetische Berechnungen an numerischen Werten durch.
calc-size(): Führt Berechnungen an 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 Wert in der Mitte von Minimal-, Zentral- und Maximalwerten.

Funktionen für gestufte Werte

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen 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 Startwert und einem Endwert. Das Ergebnis wird als Zahl zwischen 0 und 1 ausgedrückt, die den Fortschritt zwischen dem Start- und Endwert darstellt.
rem(): Berechnet den Rest (mit demselben Vorzeichen wie der Dividende) 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, die auf die Potenz einer Zahl angehoben wird.
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 Absolutwert einer Zahl.
sign(): Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

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

blur(): Erhöht die Bildgauss'sche Unschärfe.
brightness(): Hellt ein Bild auf oder dunkelt es ab.
contrast(): Erhöht oder verringert den Bildkontrast.
drop-shadow(): Fügt einen Schlagschatten hinter einem Bild hinzu.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert die allgemeine Farbton eines Bildes.
invert(): Kehrt die Farben eines Bildes um.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die allgemeine Sättigung eines Bildes.
sepia(): Erhöht den Sepiaton eines Bildes.

Farbwertefunktionen

Der <color> CSS Datentyp spezifiziert verschiedene Farbdarstellungen.

rgb(): Definiert eine bestimmte Farbe basierend auf ihren rot-, grün-, blau- und alpha (Transparenz)-Komponenten.
hsl(): Definiert eine bestimmte Farbe basierend auf ihren Farbton-, Sättigungs-, Helligkeits- und alpha (Transparenz)-Komponenten.
hwb(): Definiert eine bestimmte Farbe basierend auf ihren Farbton-, Weißheit- und Schwarzwerten.
lch(): Definiert eine bestimmte Farbe basierend auf ihren Helligkeits-, Chroma- und Farbtonkomponenten.
oklch(): Definiert eine bestimmte Farbe basierend auf ihren Helligkeits-, Chroma-, Farbton- und alpha (Transparenz) Komponenten.
lab(): Definiert eine bestimmte Farbe basierend auf ihrer Helligkeit, a-Achsen-Distanz und b-Achsen-Distanz im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe basierend auf ihrer Helligkeit, a-Achsen-Distanz, b-Achsen-Distanz im Lab-Farbraum und alpha (Transparenz).
color(): Spezifiziert einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem gegebenen Farbraum mit einer bestimmten Menge.
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 von zwei bereitgestellten Farben basierend auf dem aktuellen Farbdesign zurück.
dynamic-range-limit-mix(): Erstellt eine benutzerdefinierte maximale Luminanzgrenze, die eine Mischung verschiedener dynamic-range-limit Schlüsselwörter 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 progressiv entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern die Farben progressiv von einem Mittelpunkt (Ursprung).
conic-gradient(): Kegelförmige Verläufe ändern die Farben progressiv um einen Kreis.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich dem <url>-Typ, aber mit zusätzlicher Funktionalität, einschließlich der Spezifizierung der Richtung des Bildes und Fallback-Bildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das am besten geeignete CSS-Bild aus einem gegebenen Satz aus, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade(): Mischt zwei oder mehr Bilder mit einer definierten Transparenz.
element(): Definiert einen <image>-Wert, der von einem beliebigen HTML-Element generiert wird.
paint(): Definiert einen <image>-Wert, der mit einem PaintWorklet generiert wird.

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 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 eingesenkte Rechteckform.
rect(): Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Rändern des Referenzrahmens.
xywh(): Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Rändern des Referenzrahmens sowie der Breite und Höhe des Rechtecks.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfadspezifikation, um eine Form zu zeichnen.
shape(): Akzeptiert eine durch Kommata getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

Andere Formfunktionen

ray(): Gültig mit offset-path; definiert das Liniensegment, entlang dem sich ein animiertes Element bewegen kann.
superellipse(): Definiert die Krümmung einer Ellipse; kann zum Festlegen 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 einen anderswo definierten Wert zu referenzieren:

attr(): Verwendet die an einem HTML-Element definierten Attribute.
env(): Verwendet die vom Benutzer-Agent definierten Umgebungsvariablen.
if(): Setzt einen Eigenschaftswert bedingt abhängig vom Ergebnis einer Style-Abfrage, Media-Abfrage oder Feature-Abfrage.
url(): Verwendet eine Datei von der angegebenen URL.
var(): Verwendet den Wert der benutzerdefinierten Eigenschaft anstelle eines beliebigen Teils eines Wertes einer anderen Eigenschaft.

Rasterfunktionen

Die folgenden Funktionen werden zur Definition eines CSS-Rasters verwendet:

fit-content(): Begrenzt eine gegebene Größe auf eine verfügbare Größe nach 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 Spurreihe, das eine große Anzahl von Spalten oder Zeilen darstellt, 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 einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Aktiviert stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt jedoch keine zusammenhängenden Glyphen für einen Satz von Zeichen; einzelne Zeichen werden unabhängige und nicht unbedingt zusammenhängende Stile aufweisen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Swash-Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es 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 einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Annotationen wie eingekreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Es entspricht dem OpenType-Wert nalt, wie nalt 2.

Easing-Funktionen

Der <easing-function> CSS Datentyp stellt eine mathematische Funktion dar. Er wird in Übergangs- und Animations-Eigenschaften verwendet:

linear(): Easing-Funktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier(): Easing-Funktion, die eine kubische Bézier-Kurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Zeiträume 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-Progress-Zeitleiste.
view(): Setzt die animation-timeline eines Elements auf eine anonyme View-Progress-Zeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, um Anker-positionierte Elemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente zu positionieren und zu skalieren.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines Anker-positionierten Elements im Verhältnis zu seinem zugehörigen Ankerelement 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 zu den meisten CSS-Werten, die auf dem flachen Baum basieren:

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