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 Datenverarbeitungen oder Berechnungen aufrufen, um einen CSS Wert für eine CSS-Eigenschaft zurückzugeben. CSS Wertfunktionen repräsentieren komplexere Datentypen und können einige Eingabeargumente zur Berechnung des Rückgabewertes übernehmen.

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 endet mit einer schließenden Klammer ).

Funktionen können mehrere Argumente haben, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber sie sind 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 baumstrukturale 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 repräsentiert Erscheinungsbildtransformationen. 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.

Schrägstellungsfunktionen

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.

Perspektivenfunktionen

perspective()

Legt den Abstand zwischen dem Benutzer und der z=0-Ebene fest.

Mathematische Funktionen

Die mathematischen Funktionen erlauben es CSS numerische Werte als mathematische Ausdrücke zu schreiben.

Jede der unten aufgeführten Seiten enthält detaillierte Informationen über die Syntax einer mathematischen Funktion, Browser-Kompatibilitätsdaten, Beispiele und mehr. Für eine ganzheitliche Einführung in CSS-Mathematische Funktionen siehe Verwendung von CSS-Mathematischen Funktionen.

Grundlegende Arithmetik

calc()

Führt grundlegende arithmetische Berechnungen mit numerischen Werten durch.

calc-size()

Führt Berechnungen an 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 Wert einer Liste.

max()

Berechnet den größten Wert einer Liste.

clamp()

Berechnet den zentralen Wert von Minimal-, Zentral- und Maximalwerten.

Abgestufte Wertfunktionen

round()

Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet ein Modulus (mit dem gleichen Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere geteilt wird.

progress()

Berechnet die Position eines Wertes zwischen zwei anderen Werten — einem Startwert und einem Endwert. Das Ergebnis wird als eine Zahl zwischen 0 und 1 ausgedrückt, die den Fortschritt zwischen dem Start- und Endwert darstellt.

rem()

Berechnet einen Rest (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 inversen Sinus einer Zahl.

acos()

Berechnet den trigonometrischen inversen Cosinus einer Zahl.

atan()

Berechnet den trigonometrischen inversen Tangens einer Zahl.

atan2()

Berechnet den trigonometrischen inversen Tangens zweier Zahlen in einer Ebene.

Exponentialfunktionen

pow()

Berechnet die Basis potenziert mit 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 potenziert mit 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 repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingangsbildes ä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()

Fügt einem Bild einen Schlagschatten hinzu.

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 den Sepia-Wert eines Bildes.

Farbwertfunktionen

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

rgb()

Definiert eine bestimmte Farbe basierend auf ihren Rot-, Grün-, Blau- und Alpha(Transparenz)-Komponenten.

hsl()

Definiert eine bestimmte Farbe basierend auf ihren Farbton-, Sättigung-, Helligkeit- und Alpha(Transparenz)-Komponenten.

hwb()

Definiert eine bestimmte Farbe basierend auf ihren Farbton-, Weißtönungs- und Schwärzungs-Komponenten.

lch()

Definiert eine bestimmte Farbe basierend auf ihren Helligkeit-, Chroma- und Farbton-Komponenten.

oklch()

Definiert eine bestimmte Farbe basierend auf ihren Helligkeit-, Chroma-, Farbton- und Alpha(Transparenz)-Komponenten.

lab()

Definiert eine bestimmte Farbe basierend auf ihrer Helligkeit, A-Achsen-Distanz und B-Achsen-Distanz im Lab-Farbraum.

oklab()

Definiert eine bestimmte Farbe basierend auf ihrer Helligkeit, A-Achsen-Distanz, B-Achsen-Distanz im Lab-Farbraum und Alpha(Transparenz).

color()

Spezifiziert einen bestimmten, angegebenen Farbraum anstelle des impliziten sRGB-Farbraums.

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum durch eine gegebene Menge.

contrast-color()

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

device-cmyk()

Definiert CMYK-Farben geräteabhängig.

light-dark()

Gibt eine von zwei bereitgestellten Farben zurück, basierend auf dem aktuellen Farbschema.

dynamic-range-limit-mix()

Erstellt ein benutzerdefiniertes maximales Leuchtdichtenlimit, das eine Mischung aus verschiedenen dynamic-range-limit Stichwörtern in bestimmten Prozentsätzen ist.

Bildfunktionen

Der <image> CSS Datentyp bietet eine grafische Darstellung von Bildern oder Verläufen.

Farbverlaufsfunktionen

linear-gradient()

Lineare Farbverläufe ändern Farben progressiv entlang einer imaginären Linie.

radial-gradient()

Radiale Farbverläufe ändern Farben progressiv von einem Mittelpunkt (Ursprung).

conic-gradient()

Kegelige Farbverläufe ändern Farben progressiv um einen Kreis.

repeating-linear-gradient()

Ähnelt linear-gradient() und akzeptiert die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

repeating-radial-gradient()

Ähnelt radial-gradient() und akzeptiert die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

repeating-conic-gradient()

Ähnelt conic-gradient() und akzeptiert die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Container zu bedecken.

Bildfunktionen

image()

Definiert ein <image> ähnlich dem <url> Typ, jedoch mit erweiterten Funktionen einschließlich der Angabe der Bildrichtung und von Ersatzbildern, falls das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das geeignetste CSS-Bild aus einem gegebenen Satz, hauptsächlich für hochdichte Pixel-Bildschirme.

cross-fade()

Mischt zwei oder mehr Bilder mit einer definierten Transparenz.

element()

Definiert einen <image> Wert, der von einem beliebigen HTML-Element generiert wurde.

paint()

Definiert einen <image> Wert, der mit einem PaintWorklet generiert wurde.

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 einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, falls es einen gibt.

counters()

Ermöglicht geschachtelte Zähler, wobei ein konkatenierter String zurückgegeben wird, der die aktuellen Werte der benannten Zähler darstellt, falls es welche gibt.

symbols()

Definiert die Zählerstile 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 eingefügte rechteckige Form.

rect()

Definiert eine rechteckige Form mit den Abständen von den oberen und linken Kanten der Referenzbox.

xywh()

Definiert eine rechteckige Form mit den angegebenen Abständen von den oberen und linken Kanten der Referenzbox und der Rechteckbreite und -höhe.

polygon()

Definiert eine Polygonform.

path()

Akzeptiert einen SVG-Pfadstring zur Erlaubnis des Zeichnens einer Form.

shape()

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

Referenzfunktionen

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

attr()

Verwendet die auf dem HTML-Element definierten Attribute.

env()

Verwendet die vom User-Agent als Umgebungsvariable definierten Werte.

if()

Setzt den Wert einer Eigenschaft bedingt abhängig vom Ergebnis einer Stilabfrage, Medienabfrage oder Funktionalitätsabfrage.

url()

Verwendet eine Datei aus der angegebenen URL.

var()

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

Rasterfunktionen

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

fit-content()

Begrenzen Sie eine gegebene Größe auf eine verfügbare Größe gemäß der Formel min(maximal Größe, max(minimal Größe, Argument)).

minmax()

Definiert einen Größenbereich, der größer-gleich min und kleiner-gleich max ist.

repeat()

Stellt ein wiederholtes Fragment der Spur-Liste dar, das eine große Anzahl von Spalten oder Reihen ermöglicht, die ein wiederkehrendes Muster aufweisen.

Schriftartenfunktionen

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

stylistic()

Aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftbezogener 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 schriftbezogener Name, der einer Zahl 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 notwendigerweise kohärente Stile. Der Parameter ist ein schriftbezogener Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Aktiviert Zierschnörkel Glyphen. Der Parameter ist ein schriftbezogener 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-Zeichen. Der Parameter ist ein schriftbezogener Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.

annotation()

Aktiviert Anmerkungen wie eingekreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftbezogener Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Beschleunigungsfunktionen

Der <easing-function> CSS Datentyp repräsentiert eine mathematische Funktion. Er wird in Übergangs- und Animationseigenschaften verwendet:

linear()

Beschleunigungsfunktion, die linear zwischen ihren Punkten interpoliert.

cubic-bezier()

Beschleunigungsfunktion, die eine kubische Bézier-Kurve definiert.

steps()

Iteration entlang einer angegebenen Anzahl von Stopps entlang des Übergangs, wobei jede Haltestelle für gleiche Zeitlängen angezeigt wird.

Animationsfunktionen

Die folgenden Funktionen werden als Wert der verschiedenen 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 Ansichts-Fortschrittszeitleiste.

Ankerpositionierungsfunktionen

Die Ankerpositionierungsfunktionen werden verwendet, wenn Anker-Positionierte Elemente relativ zur Lage und Größe ihrer zugeordneten Ankerelemente positioniert und dimensioniert werden.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines Ankerpositionierten Elements in Bezug auf sein zugeordnetes Ankerelement zurück.

anchor-size()

Gibt eine Länge relativ zur Größe des zugeordneten Ankerelements zurück.

Baumzählende Funktionen

Die folgenden Funktionen geben einen Ganzzahlwert basierend auf dem DOM-Baum zurück, anstatt auf dem flachen Baum, wie es die meisten CSS-Werte tun:

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

Alphabetisches Verzeichnis 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