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 annehmen.

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 ) abgeschlossen.

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 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 baum-strukturelle 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 repräsentiert eine Erscheinungstransformation. 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.

Schiefzugsfunktionen

skewX(): Verzerrt ein Element in horizontaler Richtung.
skewY(): Verzerrt ein Element in vertikaler Richtung.
skew(): Verzerrt 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 erlauben es, CSS-numerische Werte als mathematische Ausdrücke zu schreiben.

Jede der folgenden Seiten enthält detaillierte Informationen über die Syntax der Mathematikfunktion, Daten zur Browser-Kompatibilität, Beispiele und mehr. Für eine ganzheitliche Einführung in CSS-Mathematikfunktionen siehe CSS-Mathematikfunktionen verwenden.

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 Mittelwert aus einem minimalen, zentralen und maximalen Wert.

Gezackte Wertfunktionen

round(): Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.
mod(): Berechnet ein Modulus (mit demselben Vorzeichen wie der Divisor) beim Teilen einer Zahl durch eine andere.
rem(): Berechnet einen Rest (mit demselben 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 hoch einer Zahl.
sqrt(): Berechnet die Quadratwurzel einer Zahl.
hypot(): Berechnet die Quadratwurzel der Summe der Quadrate der Argumente.
log(): Berechnet den Logarithmus einer Zahl.
exp(): Berechnet e hoch 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 repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingabebildes ändern kann. Er wird in den Eigenschaften filter und backdrop-filter verwendet.

blur(): Erhöht den gaußschen Weichzeichner des Bildes.
brightness(): Erhellt oder verdunkelt ein Bild.
contrast(): Erhöht oder vermindert den Bildkontrast.
drop-shadow(): Wendet einen Schatten hinter ein Bild an.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den Gesamteindruck 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.

Farbfunktions

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

rgb(): Definiert eine bestimmte Farbe gemäß ihren roten, grünen, blauen und Alpha-(Transparenz-)Komponenten.
hsl(): Definiert eine bestimmte Farbe gemäß ihrem Farbton, ihrer Sättigung, Helligkeit und Alpha-(Transparenz-)Komponenten.
hwb(): Definiert eine bestimmte Farbe gemäß ihrem Farbton, Weißgrad und Schwarzwert.
lch(): Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma und Farbtonkomponenten.
oklch(): Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma, Farbton und Alpha-(Transparenz-)Komponenten.
lab(): Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achse Abstand und b-Achse Abstand im Lab-Farbraum.
oklab(): Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achse Abstand, b-Achse Abstand im Lab-Farbraum und Alpha (Transparenz).
color(): Gibt einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums an.
color-mix(): Mischt zwei Farbwerte in einem gegebenen Farbraum mit einem 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.
light-dark(): Gibt eine von zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

Bildfunktionen

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

Verlauffunktionen

linear-gradient(): Lineare Verläufe ändern Farben progressiv entlang einer imaginären Linie.
radial-gradient(): Radiale Verläufe ändern Farben progressiv von einem Mittelpunkt aus.
conic-gradient(): Kegelige Verläufe ändern Farben fortschreitend um einen Kreis.
repeating-linear-gradient(): Ähnelt linear-gradient() und verwendet dieselben Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.
repeating-radial-gradient(): Ähnelt radial-gradient() und verwendet dieselben Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.
repeating-conic-gradient(): Ähnelt conic-gradient() und verwendet dieselben Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

Bildfunktionen

image(): Definiert ein <image> ähnlich wie der <url>-Typ, aber mit zusätzlichen Funktionen, einschließlich der Angabe der Bild-Richtung und von Ausweichbildern 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, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade(): Blendet zwei oder mehr Bilder mit einer definierten Transparenz ein.
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, können theoretisch jedoch überall dort verwendet werden, 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, die eine verkettete Zeichenkette zurückgeben, die die aktuellen Werte der benannten Zähler darstellt, falls vorhanden.
symbols(): Definiert die Zählerstile inline, direkt als Wert einer Eigenschaft.

Formfunktionen

Basisformen

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 eingezogene Rechteckform.
rect(): Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Kanten des Referenzrahmens.
xywh(): Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Referenzrahmens sowie Breite und Höhe des Rechtecks.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfadanweisung, um eine Form zu zeichnen.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen, die die Form zum Zeichnen 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> anzugeben, der mit corner-shape und seinen Bestandteilen und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr(): Verwendet die an einem HTML-Element definierten Attribute.
env(): Verwendet die vom Benutzeragenten als Umgebungsvariable definierten Werte.
if(): Setzt bedingt einen Eigenschaftswert abhängig von dem Ergebnis einer Stilanfrage, Medienanfrage oder Merkmalsanfrage.
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(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 wiederkehrendes Fragment der Spur, das eine große Anzahl von Spalten oder Reihen beschreibt, 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 schriftartspezifischer Name, der einer Nummer 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 Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich dem 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 Nummer zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Schwungbuchstaben. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.
ornaments(): Aktiviert Ornamente wie Florials und andere Schmuckzeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Annotationen wie umkreiste Zahlen oder umgedrehte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er 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ézierkurve definiert.
steps(): Iteration entlang einer angegebenen Anzahl von Haltestellen während des Übergangs, wobei jede Haltestelle für gleiche Zeitdauern angezeigt wird.

Animationsfunktionen

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

scroll(): Setzt den animation-timeline eines Elements auf eine anonyme Scroll-Fortschritts-Zeitleiste.
view(): Setzt den animation-timeline eines Elements auf eine anonyme View-Fortschritts-Zeitleiste.

Anker-Positionierungsfunktionen

Die Anker-Positionierungsfunktionen werden verwendet, wenn Anker-Positionierte Elemente in Beziehung 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 in Bezug auf das zugehörige Ankerelement zurück.
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 zu den flachen Baumwerten, die die meisten CSS-Werte ergeben:

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