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
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
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
undmax-content
durch, die von dercalc()
-Funktion nicht unterstützt werden.
Vergleichsfunktionen
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
Zeichenbezogene Funktionen
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
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
, wiesalt 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
, wiess02
. 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-WertcvXY
, wiecv02
. swash()
-
Ermöglicht Zierschnörkel-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten
swsh
undcswh
, wieswsh 2
undcswh 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
, wieornm 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
, wienalt 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.