CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung oder Berechnungen durchführen, um einen CSS-Wert für eine CSS-Eigenschaft zu liefern. CSS-Wertfunktionen repräsentieren komplexere Datentypen und können Eingabeparameter annehmen, um den Rückgabewert zu berechnen.

Syntax

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

Die Wertsyntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach folgen die Argument(e), 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 sie sind 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 Pseudoklassen verwechselt werden. Die funktionalen Pseudoklassen, linguistischen Pseudoklassen und mehrere strukturbezogene Pseudoklassen erfordern Parameterwerte, sind aber keine Wertfunktionen. Die bedingten @-Regeln sind auch keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS-Datentyp repräsentiert die Erscheinungstransformation. Er wird als Wert der transform-Eigenschaft verwendet.

Translate-Funktionen

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

Schiefe-Funktionen

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

Mathematische Funktionen

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

Jede der untenstehenden Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Für eine umfassende Einführung in CSS-mathematische Funktionen, siehe Using CSS math functions.

Grundlegende Arithmetik

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 einer Liste von Werten.
max(): Berechnet den größten Wert einer Liste von Werten.
clamp(): Berechnet den zentralen Wert einer minimalen, zentralen und maximalen Werte.

Funktionen für gestufte Werte

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet einen Modulus (mit dem gleichen 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 repräsentiert.
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 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 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 Erscheinungsbild eines Eingangsbildes ändern kann. Er wird in den Eigenschaften filter und backdrop-filter verwendet.

blur(): Erhöht den Gaußschen Weichzeichner des Bildes.
brightness(): Erhöht oder verringert die Helligkeit eines Bildes.
contrast(): Erhöht oder verringert den Kontrast des Bildes.
drop-shadow(): Fügt einen Schatten hinter ein Bild.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den gesamten Farbton eines Bildes.
invert(): Kehrt die Farben eines Bildes um.
opacity(): Fügt einem Bild Transparenz hinzu.
saturate(): Ändert die Sättigung eines Bildes insgesamt.
sepia(): Erhöht den Sepia-Ton eines Bildes.

Farb-Funktionen

Der <color> CSS-Datentyp spezifiziert verschiedene Farbrepräsentationen.

rgb(): Definiert eine bestimmte Farbe entsprechend ihren roten, grünen, blauen und alpha (Transparenz) Komponenten.
hsl(): Definiert eine bestimmte Farbe entsprechend ihren Farbton, Sättigung, Helligkeit und alpha (Transparenz) Komponenten.
hwb(): Definiert eine bestimmte Farbe entsprechend ihren Farbton, Weißheits- und Schwarzanteil-Komponenten.
lch(): Definiert eine bestimmte Farbe entsprechend ihren Helligkeit, Chroma und Farbton-Komponenten.
oklch(): Definiert eine bestimmte Farbe entsprechend ihren Helligkeit, Chroma, Farbton und alpha (Transparenz) Komponenten.
lab(): Definiert eine bestimmte Farbe entsprechend ihren Helligkeit, a-Achsen-Abstand und b-Achsen-Abstand im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe entsprechend ihren Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand im Lab-Farbraum und alpha (Transparenz).
color(): Spezifiziert einen bestimmten, spezifizierten Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix(): Mischt zwei Farbwerte in einem bestimmten Farbraum in einer bestimmten Menge.
contrast-color(): Gibt eine Farbe mit höchstem Farbkontrast für eine gegebene Farbe zurück.
device-cmyk(): Definiert CMYK-Farben auf eine geräteabhängige Weise.
light-dark(): Gibt eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.
dynamic-range-limit-mix(): Erzeugt ein benutzerdefiniertes Maximalluminanz-Limit, das eine Mischung aus verschiedenen dynamic-range-limit Schlüsselwörtern in spezifizierten Prozentsätzen ist.

Bildfunktionen

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

Verlauf-Funktionen

linear-gradient(): Lineare Verläufe ändern Farben schrittweise entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern Farben schrittweise von einem Zentrumspunkt (Ursprung).
conic-gradient(): Kegelförmige Verläufe ändern Farben schrittweise um einen Kreis herum.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbwechsel 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 Farbwechsel 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 Farbwechsel unendlich in alle Richtungen, um seinen gesamten Container abzudecken.

Bildfunktionen

image(): Definiert ein <image> auf ähnliche Weise wie der <url>-Typ, aber mit zusätzlicher Funktionalität, einschließlich der Spezifizierung der Bildrichtung und Fallback-Bilder, wenn das bevorzugte Bild nicht unterstützt wird.
image-set(): Wählt das am besten geeignete CSS-Bild aus einem gegebenen Satz, primär für Bildschirme mit hoher Pixeldichte.
cross-fade(): Blendet 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 in der Regel mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall eingesetzt 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 direkt als Wert einer Eigenschaft.

Formfunktionen

Grundlegende Formen

Der <basic-shape> CSS-Datentyp 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 eingesetzte Rechteckform.
rect(): Definiert eine Rechteckform, indem die Abstände von den oberen und linken Kanten des Referenzrahmens genutzt werden.
xywh(): Definiert eine Rechteckform, indem die angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie die Rechteckbreite und -höhe verwendet werden.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfadzeichenkette, 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 verwendet werden, um einen <corner-shape-value> zu spezifizieren, der mit corner-shape und dessen Bestandteilen und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr(): Verwendet die auf einem HTML-Element definierten Attribute.
env(): Verwendet die vom Benutzeragenten 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 einer benutzerdefinierten Eigenschaft anstelle eines 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 gemäß der Formel min(maximum size, max(minimum size, argument)).
minmax(): Definiert einen Größenbereich, der größer oder gleich min und kleiner oder gleich max ist.
repeat(): Stellt ein wiederholtes Fragment der Trackliste dar, das eine große Anzahl von Spalten oder Reihen ermöglicht, die ein wiederkehrendes Muster aufweisen.

Schriftfunktionen

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

stylistic(): Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schrifttpezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Ermöglicht stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftenpezifischer 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 einen Zeichensatz; einzelne Zeichen werden unabhängige und nicht unbedingt kohärente Stile haben. Der Parameter ist ein schriftenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Ermöglicht Swash-Glyphen. Der Parameter ist ein schrifttpezifischer 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 Floralelemente und andere Dingbat-Glyphen. Der Parameter ist ein schrifttpezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Ermöglicht Annotationen wie eingekreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schrifttpezifischer 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ézier-Kurve definiert.
steps(): Iteration entlang einer bestimmten Anzahl von Stops entlang des Übergangs, wobei jeder Stop für gleiche Zeitdauern angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert für verschiedene 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 bei der Positionierung und Größenanpassung von ankerpositionierten Elementen relativ zur Lage und Größe ihrer zugehörigen Ankerelemente verwendet.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines ankerpositionierten Elements des 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 zu den flachen Bäumen, die die meisten CSS-Werte verwenden:

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.

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