CSS-Wertefunktionen
CSS-Wertefunktionen sind Anweisungen, die spezielle Datenverarbeitungen oder Berechnungen aufrufen, um einen CSS Wert für eine CSS-Eigenschaft zurückzugeben. CSS-Wertefunktionen repräsentieren komplexere Datentypen und können einige Eingabeparameter benötigen, um den Rückgabewert zu berechnen.
Syntax
selector { property: function([argument]? [, argument]!); }
Die Wertesyntax 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 innerhalb der Klammern optional. Bei einigen funktionalen Notationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.
Hinweis: Die CSS-Wertefunktionen werden als Eigenschaftswerte verwendet und sollten nicht mit Pseudo-Klassen verwechselt werden. Die funktionalen Pseudo-Klassen, linguistischen Pseudo-Klassen und mehrere baumstrukturelle Pseudo-Klassen erfordern Parameterwerte, sind jedoch keine Wertefunktionen. Die bedingten @-Regeln sind ebenfalls keine Wertefunktionen; die Klammern werden für Gruppierungen verwendet.
Transformationsfunktionen
Der <transform-function>
CSS Datentyp steht für Erscheinungstransformationen. Er wird als Wert der transform
-Eigenschaft verwendet.
Translate-Funktionen
translateX()
-
Übersetzt ein Element horizontal.
translateY()
-
Übersetzt ein Element vertikal.
translateZ()
-
Übersetzt ein Element entlang der z-Achse.
translate()
-
Übersetzt ein Element auf der 2D-Ebene.
translate3d()
-
Übersetzt 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 größer oder kleiner.
scaleY()
-
Skaliert ein Element vertikal größer oder kleiner.
scaleZ()
-
Skaliert ein Element entlang der z-Achse größer oder kleiner.
scale()
-
Skaliert ein Element auf der 2D-Ebene größer oder kleiner.
scale3d()
-
Skaliert ein Element im 3D-Raum größer oder kleiner.
Schrägfunktionen
Matrixfunktionen
matrix()
-
Beschreibt eine homogene 2D-Transformationsmatrix.
matrix3d()
-
Beschreibt eine 3D-Transformation als 4×4 homogene Matrix.
Perspektivfunktionen
perspective()
-
Setzt den Abstand zwischen dem Benutzer und der z=0-Ebene.
Mathematikfunktionen
Die Mathematikfunktionen erlauben das Schreiben von CSS-Zahlwerten als mathematische Ausdrücke.
Jede der folgenden Seiten enthält detaillierte Informationen zur Syntax einer Mathematikfunktion, zur Browser-Kompatibilität, zu Beispielen und mehr. Für einen umfassenden Einstieg in CSS-Mathematikfunktionen siehe Verwendung von CSS-Mathematikfunktionen.
Grundrechenarten
calc()
-
Führt grundlegende arithmetische Berechnungen auf numerischen Werten durch.
calc-size()
-
Führt Berechnungen auf intrinsischen Größenwerten wie
auto
,fit-content
undmax-content
durch, die von dercalc()
-Funktion nicht unterstützt werden.
Vergleichsfunktionen
Wertschrittfunktionen
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.
rem()
-
Berechnet einen Rest (mit demselben Vorzeichen wie der Dividend) bei der Division einer Zahl durch eine andere.
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.
Exponentialfunktionen
Zeichenbezogene Funktionen
Filterfunktionen
Der <filter-function>
CSS Datentyp stellt einen grafischen Effekt dar, der das Erscheinungsbild eines Eingabebildes ändern kann. Er wird in den filter
- und backdrop-filter
-Eigenschaften verwendet.
blur()
-
Erhöht die Bildunschärfe (Gaußsche Unschärfe).
brightness()
-
Erhellt oder verdunkelt ein Bild.
contrast()
-
Erhöht oder verringert den Bildkontrast.
drop-shadow()
-
Erzeugt einen Schattenwurf hinter einem Bild.
grayscale()
-
Wandelt ein Bild in Graustufen um.
hue-rotate()
-
Ändert den Gesamtfarbton eines Bildes.
invert()
-
Invertiert die Farben eines Bildes.
opacity()
-
Fügt einem Bild Transparenz hinzu.
saturate()
-
Ändert die Gesamtsättigung eines Bildes.
sepia()
-
Erhöht den Sepia-Effekt eines Bildes.
Farb-Funktionen
Der <color>
CSS Datentyp spezifiziert unterschiedliche Farb-Darstellungen.
rgb()
-
Definiert eine Farbe anhand ihrer Rot-, Grün-, Blau- und Alpha-(Transparenz) Komponenten.
hsl()
-
Definiert eine Farbe anhand ihres Farbtons, ihrer Sättigung, Helligkeit und Alpha-(Transparenz) Komponenten.
hwb()
-
Definiert eine Farbe anhand ihres Farbtons, Weiß- und Schwarzgehalts.
lch()
-
Definiert eine Farbe anhand ihrer Helligkeit, Chroma und Farbton Komponenten.
oklch()
-
Definiert eine Farbe anhand ihrer Helligkeit, Chroma, Farbton und Alpha-(Transparenz) Komponenten.
lab()
-
Definiert eine Farbe anhand ihrer Helligkeit, a-Achsen- und b-Achsen-Abstand im Lab-Farbraum.
oklab()
-
Definiert eine Farbe anhand ihrer Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand im Lab-Farbraum und Alpha-(Transparenz).
color()
-
Spezifiziert einen bestimmten, festgelegten Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix()
-
Mischt zwei Farbwerte in einem gegebenen Farbraum zu einem bestimmten Anteil.
contrast-color()
-
Gibt eine Farbe mit maximalem Farbkontrast zu einer gegebenen Farbe zurück.
device-cmyk()
-
Definiert CMYK-Farben in geräteabhängiger Weise.
light-dark()
-
Gibt eine von zwei angegebenen Farben basierend auf dem aktuellen Farbschema zurück.
Bildfunktionen
Verlauf-Funktionen
linear-gradient()
-
Lineare Verläufe ändern Farben entlang einer gedachten Linie progressiv.
radial-gradient()
-
Radiale Verläufe ändern Farben progressiv von einem zentralen Punkt (Ursprung).
conic-gradient()
-
Kegelförmige Verläufe ändern Farben progressiv um einen Kreis.
repeating-linear-gradient()
-
Ähnlich wie
linear-gradient()
, jedoch wiederholen sich die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken. repeating-radial-gradient()
-
Ähnlich wie
radial-gradient()
, jedoch wiederholen sich die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken. repeating-conic-gradient()
-
Ähnlich wie
conic-gradient()
, jedoch wiederholen sich die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken.
Bildfunktionen
image()
-
Definiert ein
<image>
ähnlich dem<url>
Typ, jedoch mit zusätzlicher Funktionalität einschließlich der Angabe der Richtungsfähigkeit des Bildes und 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 Set aus, insbesondere für Bildschirme mit hoher Pixeldichte.
cross-fade()
-
Mischt zwei oder mehr Bilder bei 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 in der Regel mit der content
-Eigenschaft verwendet, obwohl sie theoretisch überall eingesetzt werden können, wo ein <string>
unterstützt wird.
counter()
-
Gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, falls einer vorhanden ist.
counters()
-
Ermöglicht verschachtelte Zähler und gibt einen verketteten String zurück, der die aktuellen Werte der benannten Zähler darstellt, falls welche vorhanden sind.
symbols()
-
Definiert die Zählerstile direkt als Eigenschaftswert.
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 eingesetzte Rechteckform.
rect()
-
Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Rändern des Referenzkastens.
xywh()
-
Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Rändern des Referenzkastens sowie der Rechteckbreite und -höhe.
polygon()
-
Definiert eine Polygonform.
path()
-
Akzeptiert einen SVG-Pfadstring, um eine Form zu zeichnen.
shape()
-
Akzeptiert eine durch Kommas getrennte Liste von Befehlen zur Definition der zu zeichnenden Form.
ray()
-
Gültig nur mit
offset-path
, es definiert das Streckensegment, das ein animiertes Element folgen kann.
Referenzfunktionen
Die folgenden Funktionen werden als Wert von Eigenschaften verwendet, um auf einen an anderer Stelle definierten Wert zu verweisen:
attr()
-
Verwendet die auf einem HTML-Element definierten Attribute.
env()
-
Verwendet die vom Benutzeragenten als Umgebungsvariable definierte Variable.
if()
-
Setzt je nach Ergebnis einer Stile-Anfrage, Media-Anfrage oder Feature-Anfrage bedingt einen Eigenschaftswert.
url()
-
Verwendet eine Datei von der angegebenen URL.
var()
-
Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Werts einer anderen Eigenschaft.
Gitterfunktionen
Die folgenden Funktionen werden verwendet, um ein CSS-Gitter zu definieren:
fit-content()
-
Begrenzt 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()
-
Stellt ein wiederholtes Fragment der Spur-Liste dar, das eine große Anzahl von Spalten oder Reihen mit einem wiederkehrenden Muster ermöglicht.
Schriftartenfunktionen
CSS-Schriftartenfunktionen werden mit der font-variant-alternates
-Eigenschaft verwendet, um die Verwendung alternativer Glyphen zu steuern.
stylistic()
-
Aktiviert stilistische Alternativen für individuelle Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert
salt
, beispielsweisesalt 2
. styleset()
-
Aktiviert stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert
ssXY
, beispielsweisess02
. character-variant()
-
Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie
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 Zahl zugeordnet ist. Er entspricht dem OpenType-WertcvXY
, beispielsweisecv02
. swash()
-
Aktiviert Schwung- Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten
swsh
undcswh
, beispielsweiseswsh 2
undcswh 2
. ornaments()
-
Aktiviert Ornamente wie Fleurons und andere Zierglyschen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert
ornm
, beispielsweiseornm 2
. annotation()
-
Aktiviert Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert
nalt
, beispielsweisenalt 2
.
Easing-Funktionen
Der <easing-function>
CSS Datentyp stellt eine mathematische Funktion dar. 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 Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Zeitabstände 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-Fortschrittstimeline. view()
-
Setzt die
animation-timeline
eines Elements auf eine anonyme Ansichtsfortschrittstimeline.
Anker-Positionierungsfunktionen
Die Anker-Positionierungsfunktionen werden verwendet, wenn Anker-Positionierungselemente relativ zur Position und Größe ihrer zugehörigen Ankerelemente positioniert und dimensioniert werden.
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ählungsfunktionen
Die folgenden Funktionen geben einen ganzzahligen Wert basierend auf dem DOM-Baum zurück, im Gegensatz zum flachen Baum, wie dies 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 Gesamtanzahl der Geschwister einschließlich des ausgewählten Elements widerspiegelt.