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-Wertfunktionen

CSS-Wertfunktionen sind Anweisungen, die spezielle Datenverarbeitung oder Berechnungen aufrufen, um einen CSS Wert für eine CSS-Eigenschaft zu liefern. CSS-Wertfunktionen repräsentieren komplexere Datentypen und können einige Eingabeargumente benötigen, um den Rückgabewert zu berechnen.

Syntax

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

Die Wertsprache beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (. Danach kommen die Argument(e) und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

Funktionen können mehrere Argumente aufnehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind zulässig, aber innerhalb der Klammern optional. In einigen funktionalen Notationen werden mehrere Argumente durch Kommata 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 baumstrukturelle 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 repräsentiert Aussehensveränderung. 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 hoch oder runter.

scaleY()

Skaliert ein Element vertikal hoch oder runter.

scaleZ()

Skaliert ein Element entlang der z-Achse hoch oder runter.

scale()

Skaliert ein Element auf der 2D-Ebene hoch oder runter.

scale3d()

Skaliert ein Element im 3D-Raum hoch oder runter.

Schrägfunktionen

skewX()

Schrägt ein Element in horizontaler Richtung.

skewY()

Schrägt ein Element in vertikaler Richtung.

skew()

Schrägt 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-numerische Werte als mathematische Ausdrücke zu schreiben.

Jede der nachstehenden Seiten enthält detaillierte Informationen zur 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.

calc-size()

Führt Berechnungen zu 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 einer Liste von Werten.

max()

Berechnet den größten einer Liste von Werten.

clamp()

Berechnet den zentralen Wert von einem Mindest-, Mittel- und Höchstwert.

Abgeschrittete Wertfunktionen

round()

Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet einen Modulus (mit dem gleichen Vorzeichen wie der Divisor), wenn man eine Zahl durch eine andere teilt.

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 Rest (mit dem gleichen Vorzeichen wie der Dividende), wenn man eine Zahl durch eine andere teilt.

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 hoch eine Zahl.

sqrt()

Berechnet die Quadratwurzel einer Zahl.

hypot()

Berechnet die Quadratwurzel der Summe der Quadrate ihrer Argumente.

log()

Berechnet den Logarithmus einer Zahl.

exp()

Berechnet e hoch eine Zahl.

Zeichenbezogene Funktionen

abs()

Berechnet den absoluten Wert einer Zahl.

sign()

Berechnet das Vorzeichen (positiv oder negativ) der Zahl.

Filterfunktionen

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

blur()

Erhöht die Bild-Gauss-Weichzeichnung.

brightness()

Hellt ein Bild auf oder dunkelt es ab.

contrast()

Erhöht oder verringert den Bildkontrast.

drop-shadow()

Fügt einem Bild einen Schlagschatten 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 Sepia-Tönung eines Bildes.

Farbwertefunktionen

Der <color> CSS-Datentyp spezifiziert unterschiedliche Farbdarstellungen.

rgb()

Definiert eine gegebene Farbe entsprechend ihrer roten, grünen, blauen und alpha (Transparenz) Komponenten.

hsl()

Definiert eine gegebene Farbe entsprechend ihrem Farbton, Sättigung, Helligkeit und alpha (Transparenz) Komponenten.

hwb()

Definiert eine gegebene Farbe entsprechend ihrem Farbton, Weißgrad und Schwärzungsgrad Komponenten.

lch()

Definiert eine gegebene Farbe entsprechend ihrer Helligkeit, Chroma und Farbton Komponenten.

oklch()

Definiert eine gegebene Farbe entsprechend ihrer Helligkeit, Chroma, Farbton und alpha (Transparenz) Komponenten.

lab()

Definiert eine gegebene Farbe entsprechend ihrer Helligkeit, a-Achse Abstand und b-Achse Abstand im Lab-Farbraum.

oklab()

Definiert eine gegebene Farbe entsprechend ihrer Helligkeit, a-Achse Abstand und b-Achse Abstand im Lab-Farbraum und alpha (Transparenz).

color()

Gibt einen bestimmten, spezifizierten Farbraum an, anstatt des implizierten sRGB-Farbraums.

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum mit einer gegebenen Menge.

contrast-color()

Gibt eine Farbe mit maximalem Farbkontrast für eine gegebene 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 eine Mischung aus verschiedenen dynamic-range-limit-Schlüsselwörtern in bestimmten Prozentsätzen ist.

Bildfunktionen

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

Gradientenfunktionen

linear-gradient()

Lineare Gradienten verändern Farben fortschreitend entlang einer gedachten Linie.

radial-gradient()

Radiale Gradienten verändern Farben fortschreitend von einem zentralen Punkt (Ursprung).

conic-gradient()

Kegelige Gradienten verändern Farben fortschreitend um einen Kreis.

repeating-linear-gradient()

Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente entgegen, wiederholt jedoch die Farbunterbrechungen unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

repeating-radial-gradient()

Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente entgegen, wiederholt jedoch die Farbunterbrechungen unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

repeating-conic-gradient()

Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente entgegen, wiederholt jedoch die Farbunterbrechungen unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

Bildfunktionen

image()

Definiert ein <image> in ähnlicher Weise wie der <url>-Typ, aber mit zusätzlicher Funktionalität wie der Angabe der Bildrichtung und Ersatzbildern für den Fall, dass das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das am besten geeignete CSS-Bild aus einer gegebenen Menge, insbesondere für Bildschirme mit hoher Pixeldichte.

cross-fade()

Mischt zwei oder mehr Bilder mit 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 eine Zeichenkette zurück, die den aktuellen Wert des benannten Zählers darstellt, falls vorhanden.

counters()

Ermöglicht verschachtelte Zähler und gibt eine verkettete Zeichenkette 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 repräsentiert eine grafische Form. Er wird in den clip-path, offset-path, und shape-outside Eigenschaften verwendet.

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine rechteckige Einzelform.

rect()

Definiert eine rechteckige Form, die die Abstände von den oberen und linken Kanten des Referenzkastens verwendet.

xywh()

Definiert eine rechteckige Form unter Verwendung der angegebenen Abstände von den oberen und linken Kanten des Referenzkastens sowie der Rechteckbreite und -höhe.

polygon()

Definiert eine Polygonform.

path()

Akzeptiert eine SVG-Pfadzeichenkette, um das Zeichnen einer Form zu ermöglichen.

shape()

Akzeptiert eine kommagetrennte Liste von Befehlen zur Definition der zu zeichnenden Form.

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

Referenzfunktionen

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

attr()

Verwendet die Attribute, die auf einem HTML-Element definiert sind.

env()

Verwendet die vom Benutzer-Agent definierten Umgebungsvariablen.

if()

Setzt einen Eigenschaftswert bedingt basierend auf dem Ergebnis einer Stilanfrage, Medienanfrage oder Funktionsanfrage.

url()

Verwendet eine Datei aus der angegebenen URL.

var()

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

Rasterfunktionen

Die folgenden Funktionen werden zur Definition eines CSS-Rasters verwendet:

fit-content()

Klemmt eine gegebene Größe an 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()

Repräsentiert ein wiederholtes Fragment der Trackliste, wodurch eine große Anzahl von Spalten oder Reihen ermöglicht wird, die ein wiederkehrendes Muster aufweisen.

Schriftfunktionen

CSS-Schriftfunktionen 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 schriftartspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 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, wie ss02.

character-variant()

Aktiviert spezifische stilistische Alternativen für Zeichen. Es ähnelt styleset(), aber erstellt 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-Wert cvXY, wie cv02.

swash()

Aktiviert Swash-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()

Aktiviert Ornamente 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()

Aktiviert Annotationen 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 repräsentiert eine mathematische Funktion. Er wird in Übergangs- und Animations-Eigenschaften verwendet:

linear()

Easing-Funktion, die linear zwischen ihren Punkten interpoliert.

cubic-bezier()

Easing-Funktion, die eine kubische Bézierkurve definiert.

steps()

Iteration entlang einer festgelegten Anzahl von Stopps entlang der Übergangsphase, bei der jeder Stopp gleich lang angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert von verschiedenen animation-timeline-Eigenschaften verwendet:

scroll()

Setzt die animation-timeline eines Elements auf eine anonyme Scrollfortschritts-Zeitleiste.

view()

Setzt die animation-timeline eines Elements auf eine anonyme Ansichtsfortschritts-Zeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, um Anker-Positionselemente relativ zur Position und Größe ihrer zugehörigen Ankerknotenelemente zu positionieren und zu dimensionieren.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines Anker-Positionselements zurück, das dem zugehörigen Ankerknotenelement zugeordnet ist.

anchor-size()

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

Baumzählausdrucksfunktionen

Die folgenden Funktionen geben einen ganzzahligen Wert basierend auf dem DOM-Baum zurück, im Gegensatz zu den meisten CSS-Werten, die auf den flachen Baum basieren:

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 Gesamtzahl der Geschwister einschließlich des ausgewählten Elements widerspiegelt.

Alphabetischer 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