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 stehen für komplexere Datentypen und können einige Eingabeargumente verwenden, um den Rückgabewert zu berechnen.
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 haben, 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 Pseudo-Klassen verwechselt werden. Die funktionalen Pseudo-Klassen, sprachlichen Pseudo-Klassen und mehrere baumstrukturelle Pseudo-Klassen erfordern Parameterwerte, sind aber keine Wertfunktionen. Die konditionalen At-Regeln sind ebenfalls keine Wertfunktionen; die Klammern werden für Gruppierungen verwendet.
Transformationsfunktionen
Der <transform-function>
CSS-Datentyp stellt Erscheinungstransformationen 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()
-
Vergrößert oder verkleinert ein Element horizontal.
scaleY()
-
Vergrößert oder verkleinert ein Element vertikal.
scaleZ()
-
Vergrößert oder verkleinert ein Element entlang der Z-Achse.
scale()
-
Vergrößert oder verkleinert ein Element auf der 2D-Ebene.
scale3d()
-
Vergrößert oder verkleinert ein Element im 3D-Raum.
Schrägstellungsfunktionen
Matrixfunktionen
matrix()
-
Beschreibt eine homogene 2D-Transformationsmatrix.
matrix3d()
-
Beschreibt eine 3D-Transformation als 4x4 homogene Matrix.
Perspektivfunktionen
perspective()
-
Setzt den Abstand zwischen dem Benutzer und der Z=0-Ebene.
Mathematikfunktionen
Die Mathematikfunktionen erlauben es, CSS-numerische Werte als mathematische Ausdrücke zu schreiben.
Jede der folgenden Seiten enthält detaillierte Informationen zum Syntax einer Mathematikfunktion, Browser-Kompatibilitätsdaten, Beispiele und mehr. Für eine ganzheitliche Einführung in CSS-Mathematikfunktionen siehe Verwendung von CSS-Mathematikfunktionen.
Grundlegende Arithmetik
calc()
-
Führt grundlegende arithmetische Berechnungen mit numerischen Werten durch.
Vergleichsfunktionen
Funktionen für gestufte Werte
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.
rem()
-
Berechnet einen Restbetrag (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 zweier Zahlen in einer Ebene.
Exponentialfunktionen
Vorzeichenbezogene Funktionen
Filterfunktionen
Der <filter-function>
CSS-Datentyp stellt einen grafischen Effekt dar, der das Aussehen eines Eingabebildes verändern kann. Er wird in den filter
- und backdrop-filter
-Eigenschaften verwendet.
blur()
-
Erhöht die Gaußsche Unschärfe des Bildes.
brightness()
-
Erhellt oder verdunkelt ein Bild.
contrast()
-
Erhöht oder verringert den Kontrast des Bildes.
drop-shadow()
-
Wendet einen Schlagschatten hinter einem Bild an.
grayscale()
-
Wandelt ein Bild in Graustufen um.
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 Gesamt-Sättigung eines Bildes.
sepia()
-
Erhöht die Sepia-Tönung eines Bildes.
Farbwertfunktionen
Der <color>
CSS-Datentyp spezifiziert verschiedene Farbdarstellungen.
rgb()
-
Definiert eine bestimmte Farbe gemäß ihren rot-, grün-, blau- und alpha-Komponenten (Transparenz).
hsl()
-
Definiert eine bestimmte Farbe gemäß ihren Farbton-, Sättigungs-, Helligkeits- und alpha-Komponenten (Transparenz).
hwb()
-
Definiert eine bestimmte Farbe gemäß ihrem Farbton-, Weißanteil und Schwarzanteil.
lch()
-
Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma und Farbton.
oklch()
-
Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma, Farbton und alpha-Komponente (Transparenz).
lab()
-
Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achsen-Abstand und b-Achsen-Abstand im Lab-Farbraum.
oklab()
-
Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achsen-Abstand, b-Achsen-Abstand im Lab-Farbraum und alpha-Komponente (Transparenz).
color()
-
Spezifiziert einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums.
color-mix()
-
Mischt zwei Farbwerte in einem bestimmten Farbraum mit einer bestimmten Menge.
device-cmyk()
-
Definiert CMYK-Farben in einer geräteabhängigen Weise.
light-dark()
-
Gibt eine der beiden bereitgestellten Farben basierend auf dem aktuellen Farbschema zurück.
Bildfunktionen
Verlaufsfunktionen
linear-gradient()
-
Lineare Verläufe ändern die Farben allmählich entlang einer imaginären Linie.
radial-gradient()
-
Radiale Verläufe ändern die Farben allmählich von einem Mittelpunkt (Ursprung) aus.
conic-gradient()
-
Kegelverläufe ändern die Farben allmählich um einen Kreis.
repeating-linear-gradient()
-
Ist ähnlich wie
linear-gradient()
und nimmt die gleichen Argumente an, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken. repeating-radial-gradient()
-
Ist ähnlich wie
radial-gradient()
und nimmt die gleichen Argumente an, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken. repeating-conic-gradient()
-
Ist ähnlich wie
conic-gradient()
und nimmt die gleichen Argumente an, aber es wiederholt die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container abzudecken.
Bildfunktionen
image()
-
Definiert ein
<image>
auf ähnliche Weise wie der<url>
-Typ, jedoch mit zusätzlicher Funktionalität, einschließlich Angabe der Richtungsabhängigkeit des Bildes und Fallback-Bilder für den Fall, dass das bevorzugte Bild nicht unterstützt wird. image-set()
-
Wählt das geeignetste CSS-Bild aus einem gegebenen Satz aus, hauptsächlich für Bildschirme mit hoher Pixeldichte.
cross-fade()
-
Vermischt 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 normalerweise mit der content
-Eigenschaft verwendet, obwohl sie theoretisch überall dort verwendet werden können, 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, wobei eine verkettete Zeichenkette zurückgegeben wird, die die aktuellen Werte der benannten Zähler darstellt, falls vorhanden.
symbols()
-
Definiert die Zählerstile direkt als Wert einer Eigenschaft.
Shapefunktionen
Der <basic-shape>
CSS-Datentyp stellt eine grafische Form dar. Er wird in den clip-path
, offset-path
, und shape-outside
Eigenschaften verwendet.
circle()
-
Definiert eine Kreisform.
ellipse()
-
Definiert eine Ellipsenform.
inset()
-
Definiert eine eingezogene rechteckige Form.
rect()
-
Definiert eine rechteckige Form unter Verwendung der Abstände von den oberen und linken Kanten des Bezugsrahmens.
xywh()
-
Definiert eine rechteckige Form unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Bezugsrahmens sowie der Breite und Höhe des Rechtecks.
polygon()
-
Definiert eine Polygonform.
path()
-
Akzeptiert eine SVG-Pfadspezifikation, um eine Form zu zeichnen.
shape()
-
Akzeptiert eine durch Kommas getrennte Liste von Befehlen zur Definition der zu zeichnenden Form.
Referenzfunktionen
Die folgenden Funktionen werden als Wert von Eigenschaften verwendet, um auf einen anderswo definierten Wert zu verweisen:
attr()
-
Verwendet die auf dem HTML-Element definierten Attribute.
env()
-
Verwendet die vom Benutzeragenten definiert als Umgebungsvariable.
<url>
-
Verwendet eine Datei von der angegebenen URL.
var()
-
Verwendet den benutzerdefinierten Eigenschaftswert anstelle eines Teils eines Werts 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, der größer als oder gleich min und kleiner als oder gleich max ist.
repeat()
-
Stellt ein wiederholtes Fragment der Spurauflistung dar, das eine große Anzahl von Spalten oder Zeilen ermöglicht, die ein wiederkehrendes Muster aufweisen.
Schriftartenfunktionen
CSS-Schriftartenfunktionen werden mit der font-variant-alternates
-Eigenschaft verwendet, um die Verwendung von alternativen Glyphen zu steuern.
stylistic()
-
Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartenspezifischer 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 schriftartenspezifischer 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()
, erstellt jedoch keine kohärenten Glyphen für einen Satz von Zeichen; einzelne Zeichen werden unabhängige und nicht unbedingt kohärente Stile haben. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-WertcvXY
, wiecv02
. swash()
-
Ermöglicht Swash-Glyphen. Der Parameter ist ein schriftartenspezifischer 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 schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert
ornm
, wieornm 2
. annotation()
-
Ermöglicht Annotationen wie umkreiste Ziffern oder umgekehrte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert
nalt
, wienalt 2
.
Timing-Funktionen
Die folgenden Funktionen werden als Wert in Übergangs- und Animationseigenschaften verwendet:
linear()
-
Timing-Funktion, die linear zwischen ihren Punkten interpoliert.
cubic-bezier()
-
Timing-Funktion, die eine kubische Bézierkurve definiert.
steps()
-
Iteration über eine angegebene Anzahl von Haltepunkten entlang des Übergangs, wobei jeder Haltepunkt für gleiche Zeitintervalle angezeigt wird.
Animationsfunktionen
Die folgenden Funktionen werden als Wert von unterschiedlichen animation-timeline
-Eigenschaften verwendet:
scroll()
-
Setzt die
animation-timeline
eines Elements auf eine anonyme Scroll-Fortschritts-Timeline. view()
-
Setzt die
animation-timeline
eines Elements auf eine anonyme Ansichts-Fortschritts-Timeline.
Anker-Positionierungsfunktionen
Die Anker-Positionierungsfunktionen werden zum Positionieren und Größenanpassen von anker-positionierten Elementen relativ zu Position und Größe ihrer zugehörigen Ankerelemente verwendet.
anchor()
-
Gibt eine Länge relativ zur Position der Kanten eines anker-positionierten Elements des zugehörigen Ankerelements zurück.
anchor-size()
-
Gibt eine Länge relativ zur Größe des zugehörigen Ankerelements zurück.