CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung oder Berechnungen ausführen, um einen CSS Wert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertfunktionen repräsentieren komplexere Datentypen und nehmen möglicherweise einige Eingabeargumente an, um den Rückgabewert zu berechnen.

Syntax

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

Die Wertsytax beginnt mit dem Namen der Funktion, gefolgt von einer öffnenden runden Klammer (. Anschließend kommen die Argumente, und die Funktion wird mit einer schließenden runden 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 Funktionsnotationen 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 baumstrukturelle Pseudoklassen erfordern Parameterwerte, sind jedoch keine Wertfunktionen. Die bedingten At-Regeln sind ebenfalls keine Wertfunktionen; die Klammern werden zur Gruppierung verwendet.

Transformationsfunktionen

Der <transform-function> CSS-Datentyp repräsentiert das Erscheinungsbild der Transformation. 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.
scaleY(): Skaliert ein Element vertikal.
scaleZ(): Skaliert ein Element entlang der z-Achse.
scale(): Skaliert ein Element auf der 2D-Ebene.
scale3d(): Skaliert ein Element im 3D-Raum.

Schervorgänge (Skew-Funktionen)

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.

Perspektivische Funktionen

perspective(): Setzt den Abstand zwischen dem Benutzer und der Ebene z=0.

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 in CSS-Mathefunktionen siehe Verwendung von CSS-Mathefunktionen.

Grundlegende Arithmetik

calc(): Führt grundlegende arithmetische Berechnungen mit numerischen Werten durch.
calc-size(): Führt Berechnungen zu 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 mittleren Wert aus einem Minimum, einem Central- und einem Maximumswert.

Stufengesteuerte Wertfunktionen

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 dem Start- und Endwert darstellt.
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 Cosinus 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.

Exponentielle Funktionen

pow(): Berechnet die Basis, die auf die Potenz einer Zahl erhoben 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 auf die Potenz einer Zahl erhoben.

Vorzeichenbezogene Funktionen

abs(): Berechnet den Absolutwert 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 Eigenschaften filter und backdrop-filter verwendet.

blur(): Erhöht den gaußschen Weichzeichnereffekt eines Bildes.
brightness(): Erhellt oder verdunkelt ein Bild.
contrast(): Erhöht oder verringert den Kontrast eines Bildes.
drop-shadow(): Wendet einen Schlagschatten hinter einem Bild an.
grayscale(): Konvertiert ein Bild in Graustufen.
hue-rotate(): Ändert den Gesamtfarbton 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 Sepiaeffekt eines Bildes.

Farb-Funktionen

Der <color> CSS-Datentyp legt verschiedene Farbdarstellungen fest.

rgb(): Definiert eine gegebene Farbe anhand ihrer Rot-, Grün-, Blau- und Alpha-(Transparenz)Komponenten.
hsl(): Definiert eine gegebene Farbe anhand ihres Farbtons, ihrer Sättigung, Helligkeit und Alpha-(Transparenz)Komponenten.
hwb(): Definiert eine gegebene Farbe anhand ihres Farbtons, ihrer Weißheit und Schwärze.
lch(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, Chroma und Farbtonkomponenten.
oklch(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, Chroma, Farbton und Alpha-(Transparenz)Komponenten.
lab(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, ihrer a-Achsendistanz und ihrer b-Achsendistanz im Lab-Farbraum.
oklab(): Definiert eine gegebene Farbe anhand ihrer Helligkeit, ihrer a-Achsendistanz, ihrer b-Achsendistanz im Lab-Farbraum und Alpha-(Transparenz).
color(): Gibt einen bestimmten, spezifizierten Farbraum anstelle des impliziten sRGB-Farbraums an.
color-mix(): Mischt zwei Farbwerte in einem gegebenen Farbraum um einen gegebenen Betrag.
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.
alpha(): Gibt eine Farbe mit einem modifizierten Alpha-(Transparenz)Kanal zurück.
light-dark(): Gibt eine der beiden angegebenen Farben zurück, basierend auf dem aktuellen Farbschema.
dynamic-range-limit-mix(): Erstellt ein benutzerdefiniertes maximales Leuchtkraftlimit, das 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 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) aus.
conic-gradient(): Kegelige Verläufe ändern die Farben progressiv rund um einen Kreis.
repeating-linear-gradient(): Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente, aber es wiederholt die Farbunterbrechungen unendlich in alle Richtungen, um den gesamten Container zu decken.
repeating-radial-gradient(): Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, aber es wiederholt die Farbunterbrechungen unendlich in alle Richtungen, um den gesamten Container zu decken.
repeating-conic-gradient(): Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente, aber es wiederholt die Farbunterbrechungen unendlich in alle Richtungen, um den gesamten Container zu decken.

Bildfunktionen

image(): Definiert ein <image> auf ähnliche Weise wie der <url>-Typ, jedoch mit zusätzlichen Funktionen wie der Angabe der Bildrichtung und Ersatzbildern, wenn 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(): 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 allgemein mit der content-Eigenschaft verwendet, obwohl sie theoretisch überall dort eingesetzt werden können, wo ein <string> unterstützt wird.

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

Formfunktionen

Grundformen

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 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 und der Rechteckbreite und -höhe.
polygon(): Definiert eine Polygonform.
path(): Akzeptiert eine SVG-Pfadspezifikation zum Zeichnen einer Form.
shape(): Akzeptiert eine durch Kommas getrennte Liste von Befehlen zur Definition der zu zeichnenden Form.

Andere Formfunktionen

ray(): Gültig bei 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 seinen konstituierten und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

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

attr(): Verwendet die auf HTML-Elementen definierten Attribute.
env(): Verwendet die vom Nutzer-Agenten definierten Umweltvariablen.
if(): Setzt einen Eigenschaftswert bedingt abhängig vom Ergebnis einer Style-Query, Media-Query oder Feature-Query.
url(): Verwendet eine Datei aus der angegebenen URL.
var(): Verwendet den benutzerdefinierten Attributwert 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 größer oder gleich min und kleiner oder gleich max.
repeat(): Repräsentiert ein wiederholtes Fragment der Track-Liste, das eine große Anzahl von Spalten oder Reihen ermöglicht, die ein sich wiederholendes 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 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. Ähnlich wie styleset(), erzeugt jedoch keine kohärenten Glyphen für einen Zeichensatz; einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Aktiviert Swash Glyphen. 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 Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.
annotation(): Aktiviert Anmerkungen wie umrandete Ziffern oder invertierte 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 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 entlang des Übergangs, wobei jeder Stopp für gleiche Zeitlängen angezeigt wird.

Animationsfunktionen

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

scroll(): Setzt die animation-timeline eines Elements auf eine anonyme Scrollfortschritts-Zeitleiste.
view(): Setzt die animation-timeline eines Elements auf eine anonyme Ansichtsfortschritts-Zeitleiste.

Ankerpositionsfunktionen

Die Ankerpositionsfunktionen werden verwendet, um Anker-Positionierte Elemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente zu positionieren und zu dimensionieren.

anchor(): Gibt eine Länge relativ zur Position der Kanten eines Anker-Positionierten Elements 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 zum flachen Baum, wie es bei den meisten CSS-Werten der Fall ist:

sibling-index(): Gibt eine ganze Zahl zurück, die die Position des ausgewählten Elements unter seinen Geschwistern widerspiegelt.
sibling-count(): Gibt eine ganze Zahl zurück, die die Gesamtzahl der Geschwister, einschließlich des ausgewählten Elements, widerspiegelt.

Alphabetisches 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