CSS-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung oder Berechnungen durchführen, um einen CSS Wert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertfunktionen stellen komplexere Datentypen dar und können einige Eingabeargumente zur Berechnung des Rückgabewerts übernehmen.

Syntax

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

Die Wertsyntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach kommen die Argumente, und die Funktion wird durch eine schließende Klammer ) abgeschlossen.

Funktionen können mehrere Argumente annehmen, die ähnlich formatiert sind wie CSS-Eigenschaftswerte. 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 baumstrukturierte 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 Darstellungstransformation 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()

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.

Verzerrungsfunktionen

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-Zahlenwerte als mathematische Ausdrücke zu schreiben.

Jede der unten stehenden Seiten enthält detaillierte Informationen zur Syntax einer Mathematikfunktion, Informationen zur Browser-Kompatibilität, Beispiele und mehr. Für eine umfassende Einführung in CSS-Mathematikfunktionen siehe Verwendung von CSS-Mathematikfunktionen.

Grundrechenarten

calc()

Führt grundlegende arithmetische Berechnungen mit numerischen Werten durch.

calc-size()

Führt Berechnungen auf 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 basierend auf einem Minimum-, einem Mittel- und einem Maximalwert.

Funktionen für Stufenwerte

round()

Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet ein Modulus (mit demselben Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere geteilt wird.

rem()

Berechnet einen Rest (mit demselben 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 von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow()

Berechnet die Basis, die Potenz 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 hoch eine Zahl.

Zeichenbezogene Funktionen

abs()

Berechnet den Absolutwert einer Zahl.

sign()

Berechnet das Vorzeichen (positiv oder negativ) einer Zahl.

Filterfunktionen

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

blur()

Erhöht die Bildunschärfe durch Gauss'sche Unschärfe.

brightness()

Hellt ein Bild auf oder verdunkelt es.

contrast()

Erhöht oder verringert den Bildkontrast.

drop-shadow()

Wendet einen Schlagschatten hinter einem Bild an.

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 gesamte Sättigung eines Bildes.

sepia()

Erhöht die Sepia eines Bildes.

Farb-Funktionen

Der <color> CSS Datentyp gibt verschiedene Farbrepräsentationen an.

rgb()

Definiert eine gegebene Farbe basierend auf ihren roten, grünen, blauen und Alpha- (Transparenz-)Komponenten.

hsl()

Definiert eine gegebene Farbe basierend auf ihrem Farbton, ihrer Sättigung, Helligkeit und Alpha (Transparenz).

hwb()

Definiert eine gegebene Farbe basierend auf ihrem Farbton, Weiß und Schwarz.

lch()

Definiert eine gegebene Farbe basierend auf ihrer Helligkeit, Chroma und Farbton.

oklch()

Definiert eine gegebene Farbe basierend auf ihrer Helligkeit, Chroma, Farbton und Alpha (Transparenz).

lab()

Definiert eine gegebene Farbe basierend auf ihrer Helligkeit, a-Achsendistanz und b-Achsendistanz im Lab-Farbraum.

oklab()

Definiert eine gegebene Farbe basierend auf ihrer Helligkeit, a-Achsendistanz, b-Achsendistanz im Lab-Farbraum und Alpha (Transparenz).

color()

Gibt einen bestimmten, angegebenen Farbraum an, anstelle des impliziten sRGB-Farbraums.

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum in einem bestimmten Verhältnis.

device-cmyk()

Definiert CMYK-Farben auf geräteabhängige Weise.

light-dark()

Gibt eine der zwei bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.

Bild-Funktionen

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

Verlauf-Funktionen

linear-gradient()

Lineare Verläufe ändern Farben schrittweise entlang einer imaginären Linie.

radial-gradient()

Radialverläufe ändern Farben schrittweise von einem Mittelpunkt (Ursprung).

conic-gradient()

Klare Verläufe ändern Farben stufenweise um einen Kreis.

repeating-linear-gradient()

Ähnelt linear-gradient() und nimmt dieselben Argumente, wiederholt die Farbstopps jedoch unendlich in alle Richtungen, um seinen gesamten Behälter zu bedecken.

repeating-radial-gradient()

Ähnelt radial-gradient() und nimmt dieselben Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter zu bedecken.

repeating-conic-gradient()

Ähnelt conic-gradient() und nimmt dieselben Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter zu bedecken.

Bild-Funktionen

image()

Definiert einen <image> ähnlich wie der <url>-Typ, jedoch mit zusätzlichen Funktionen wie der Angabe der Bildausrichtung und Ausweichbildern, wenn das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das passendste CSS-Bild aus einem gegebenen Satz aus, hauptsächlich für hochauflösende Bildschirme.

cross-fade()

Blendet zwei oder mehr Bilder mit einer definierten Transparenz ein.

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 verwendet werden können, wo ein <string> unterstützt wird.

counter()

Gibt eine Zeichenfolge zurück, die den aktuellen Wert des benannten Zählers darstellt, wenn es einen gibt.

counters()

Ermöglicht verschachtelte Zähler und gibt eine verkettete Zeichenfolge zurück, die die aktuellen Werte der benannten Zähler darstellt, wenn es welche gibt.

symbols()

Definiert die Zählerstile direkt als Wert einer Eigenschaft.

Formfunktionen

Der <basic-shape> CSS Datentyp stellt eine grafische Form dar. Er wird in den Eigenschaften clip-path, offset-path und shape-outside verwendet.

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine eingeschnittene Rechteckform.

rect()

Definiert eine Rechteckform anhand der Abstände von den oberen und linken Rändern des Referenzrahmens.

xywh()

Definiert eine Rechteckform mit den angegebenen Abständen von den oberen und linken Rändern des Referenzrahmens sowie der Rechteckbreite und -höhe.

polygon()

Definiert eine Polygonform.

path()

Akzeptiert eine SVG-Pfadzeichenfolge, um eine Form zu zeichnen.

shape()

Akzeptiert eine durch Kommata getrennte Liste von Befehlen, die die zu zeichnende Form definieren.

ray()

Nur mit offset-path gültig, definiert das Liniensegment, dem ein animiertes Element folgen kann.

Referenzfunktionen

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

attr()

Verwendet die auf einem HTML-Element definierten Attribute.

env()

Verwendet die vom Benutzeragenten definierte Umgebungsvariable.

url()

Verwendet eine Datei von der angegebenen URL.

var()

Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Wertes einer anderen Eigenschaft.

Grid-Funktionen

Die folgenden Funktionen werden zur Definition eines CSS-Grids 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 Streckenliste dar, das es ermöglicht, eine große Anzahl von Spalten oder Zeilen mit einem wiederkehrenden Muster zu erstellen.

Schriftfunktionen

CSS-Schriftfunktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um die Verwendung alternativer Glyphen zu steuern.

stylistic()

Ermöglicht 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()

Ermöglicht 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()

Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt jedoch keine kohärenten Glyphen für einen Satz von Zeichen; einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Ermöglicht Zierschnörkel-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()

Ermöglicht Verzierungen 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()

Ermöglicht 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 stellt eine mathematische Funktion dar. Er wird in den Übergangs- und Animationseigenschaften verwendet:

linear()

Eine Easing-Funktion, die linear zwischen ihren Punkten interpoliert.

cubic-bezier()

Eine Easing-Funktion, die eine kubische Bézierkurve 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-Fortschrittszeitleiste.

view()

Setzt die animation-timeline eines Elements auf eine anonyme Ansicht-Fortschrittszeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden beim Positionieren und Größern von ankerpositionierten Elementen in Bezug auf die Position und Größe ihrer zugehörigen Ankerelemente verwendet.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines ankerpositionierten Elements im zugehörigen Ankerelement zurück.

anchor-size()

Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.

Siehe auch