1. Web
  2. CSS
  3. Reference
  4. Values
  5. Functions

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CSS-Wert-Funktionen

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

Syntax

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

Die Wertsyntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach folgen die Argumente und die Funktion endet mit einer schließenden Klammer ).

Funktionen können mehrere Argumente annehmen, die ähnlich formatiert sind wie CSS-Eigenschaftswerte. Leerzeichen sind zulässig, aber innerhalb der Klammern optional. In einigen funktionalen Notationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.

Hinweis: Die CSS-Wert-Funktionen 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 aber keine Wert-Funktionen. Die Bedingungs-At-Rules sind ebenfalls keine Wert-Funktionen; die Klammern werden für Gruppierungen verwendet.

Transformationsfunktionen

Der <transform-function> CSS Datentyp stellt das Erscheinungsbild der Transformation 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.

Scherfunktionen

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.

Perspektivenfunktionen

perspective()

Setzt den Abstand zwischen dem Benutzer und der z=0 Ebene.

Mathematische Funktionen

Die mathematischen Funktionen ermöglichen es, CSS-numerische Werte als mathematische Ausdrücke zu schreiben.

Jede der untenstehenden Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Browser-Kompatibilitätsdaten, Beispiele und mehr. Für eine umfassende Einführung in CSS-Mathematikfunktionen siehe Using CSS math functions.

Grundlagen der Arithmetik

calc()

Führt grundlegende arithmetische Berechnungen an numerischen Werten durch.

calc-size()

Führt Berechnungen zu intrinsischen Größenwerten durch, wie auto, fit-content und max-content, die von der calc() Funktion nicht unterstützt werden.

Vergleichsfunktionen

min()

Berechnet den kleinsten aus einer Liste von Werten.

max()

Berechnet den größten aus einer Liste von Werten.

clamp()

Berechnet den zentralen Wert von einem Minimal-, einem Zentral- und einem Maximalwert.

Schrittwert-Funktionen

round()

Berechnet eine abgerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet einen Modulus (mit demselben Vorzeichen wie der Divisor) beim Teilen einer Zahl durch eine andere.

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 den Start- und Endwerten darstellt.

rem()

Berechnet einen Restwert (mit demselben Vorzeichen wie der Dividend) beim Teilen einer Zahl durch eine andere.

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 inversen trigonometrischen Sinus einer Zahl.

acos()

Berechnet den inversen trigonometrischen Kosinus einer Zahl.

atan()

Berechnet den inversen trigonometrischen Tangens einer Zahl.

atan2()

Berechnet den inversen trigonometrischen Tangens von zwei Zahlen in einer Ebene.

Exponentialfunktionen

pow()

Berechnet die Basis hoch 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 einer Zahl.

Vorzeichenbezogene Funktionen

abs()

Berechnet den absoluten Wert einer Zahl.

sign()

Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

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 Bildunschärfe.

brightness()

Hellt ein Bild auf oder verdunkelt es.

contrast()

Erhöht oder verringert den Bildkontrast.

drop-shadow()

Fügt einen Schatten hinter einem Bild hinzu.

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 die Sepiatönung eines Bildes.

Farbfuntionen

Der <color> CSS Datentyp spezifiziert verschiedene Farbrepräsentationen.

rgb()

Definiert eine bestimmte Farbe gemäß ihren roten, grünen, blauen und alpha (Transparenz) Komponenten.

hsl()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, Sättigung, Helligkeit und alpha (Transparenz) Komponenten.

hwb()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, Weiß- und Schwarztönen.

lch()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma und Farbton Komponeten.

oklch()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, Chroma, Farbton und alpha (Transparenz) Komponenten.

lab()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit und a-Achse sowie b-Achse Abstand im Lab-Farbraum.

oklab()

Definiert eine bestimmte Farbe gemäß ihrer Helligkeit, a-Achse Abstand, b-Achse Abstand im Lab-Farbraum und alpha (Transparenz).

color()

Spezifiziert einen bestimmten, spezifizierten Farbraum statt des impliziten sRGB Farbraums.

color-mix()

Mischt zwei Farbwerte in einem bestimmten Farbraum durch einen gegebenen Betrag.

contrast-color()

Gibt eine Farbe mit maximalem Farbkontrast für eine bestimmte Farbe zurück.

device-cmyk()

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

light-dark()

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

dynamic-range-limit-mix()

Erstellt eine benutzerdefinierte maximale Leuchtkraftgrenze, die ein Mix verschiedener dynamic-range-limit Keywords in angegebenen Prozentsätzen ist.

Bildfunktionen

Der <image> CSS Datentyp bietet eine grafische Darstellung von Bildern oder Gradienten.

Gradientenfunktionen

linear-gradient()

Lineare Gradienten ändern die Farben entlang einer imaginären Linie allmählich.

radial-gradient()

Radiale Gradienten ändern die Farben allmählich von einem Mittelpunkt (Ursprung) aus.

conic-gradient()

Kegelige Gradienten ändern die Farben allmählich um einen Kreis herum.

repeating-linear-gradient()

Ähnelt linear-gradient() und erfordert die gleichen Argumente, wiederholt aber die Farbstopps unendlich in alle Richtungen, um den gesamten Behälter zu bedecken.

repeating-radial-gradient()

Ähnelt radial-gradient() und erfordert die gleichen Argumente, wiederholt aber die Farbstopps unendlich in alle Richtungen, um den gesamten Behälter zu bedecken.

repeating-conic-gradient()

Ähnelt conic-gradient() und erfordert die gleichen Argumente, wiederholt aber die Farbstopps unendlich in alle Richtungen, um den gesamten Behälter zu bedecken.

Bildfunktionen

image()

Definiert ein <image> auf ähnliche Weise wie der <url> Typ, jedoch mit zusätzlicher Funktionalität, einschließlich der Spezifizierung der Bildausrichtung und Fallback-Bildern 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 Satz aus, hauptsächlich für hochauflösende Bildschirme.

cross-fade()

Mischt zwei oder mehr Bilder mit definierter 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 in der Regel 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, falls vorhanden.

counters()

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

symbols()

Definiert die Zählerstile inline, direkt als Wert einer Eigenschaft.

Formfunktionen

Grundformen

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 Ellipse.

inset()

Definiert eine Eingeschnittene Rechteckform.

rect()

Definiert eine Rechteckform unter Verwendung der Abstände von den oberen und linken Kanten des Referenzcontainers.

xywh()

Definiert eine Rechteckform unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Referenzcontainers sowie der Breite und Höhe des Rechtecks.

polygon()

Definiert eine Polygonform.

path()

Akzeptiert eine SVG-Pfad-Zeichenfolge, um eine Form zu zeichnen.

shape()

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

Andere Formfunktionen

ray()

Gültig mit 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, welcher mit corner-shape und seinen Bestandteilen und verwandten Eigenschaften verwendet wird.

Referenzfunktionen

Die folgenden Funktionen werden als Wert von Eigenschaften verwendet, um einen Wert zu referenzieren, der an anderer Stelle definiert ist:

attr()

Verwendet die auf dem HTML-Element definierten Attribute.

env()

Verwendet den vom Benutzer-Agent definierten Umgebungsvariablen.

if()

Setzt einen Eigenschaftswert bedingt abhängig vom Ergebnis einer Stilanfrage, Medienanfrage oder Feature-Anfrage.

url()

Verwendet eine Datei von der angegebenen URL.

var()

Verwendet den Wert der benutzerdefinierten Eigenschaft anstelle eines Teils eines Wertes einer anderen Eigenschaft.

Rasterfunktionen

Die folgenden Funktionen werden verwendet, um ein CSS-Raster zu definieren:

fit-content()

Klemmt eine gegebene Größe an 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 Spur-Liste dar und ermöglicht eine große Anzahl von Spalten oder Reihen, die ein wiederkehrendes Muster aufweisen.

Schriftartenfunktionen

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

stylistic()

Aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartenspezifischer 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 schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.

character-variant()

Aktiviert spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erstellt jedoch keine kohärenten Glyphen für einen Zeichensatz; einzelne Zeichen haben unabhängige und nicht unbedingt kohärente Stile. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Aktiviert Schnörkel Glyphen. Der Parameter ist ein schriftartenspezifischer 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 Dingbats Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.

annotation()

Aktiviert Annotationen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Nummer 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 Ü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 angegebenen Anzahl von Stopps entlang des Übergangs, wobei jeder Stopp für gleiche Längen von Zeit angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert für verschiedene animation-timeline Eigenschaften verwendet:

scroll()

Setzt das animation-timeline eines Elements auf eine anonyme Scroll-Fortschrittszeitleiste.

view()

Setzt das animation-timeline eines Elements auf eine anonyme Ansichtsfortschrittszeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, wenn Anker-positionierte Elemente 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ählfunktionen

Die folgenden Funktionen geben einen ganzzahligen Wert basierend auf dem DOM-Baum zurück, im Gegensatz zum flachen Baum, wie die meisten CSS-Werte:

sibling-index()

Gibt eine Ganzzahl zurück, die die Position des ausgewählten Elements unter seinen Geschwistern widerspiegelt.

sibling-count()

Gibt eine Ganzzahl zurück, die die Gesamtanzahl der Geschwister einschließlich des ausgewählten Elements widerspiegelt.

Alphabetisches Index der Funktionen

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden