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 zurückzugeben. CSS-Wertfunktionen repräsentieren komplexere Datentypen und können einige Eingabeargumente zur Berechnung des Rückgabewerts verwenden.

Syntax

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

Die Wertsintax 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 annehmen, 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 Pseudoklassen verwechselt werden. Die funktionalen Pseudoklassen, linguistischen Pseudoklassen und mehrere baumstrukturelle Pseudoklassen erfordern Parameterwerte, sind aber 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 Transformationen des Erscheinungsbildes. Er wird als Wert der transform-Eigenschaft verwendet.

Übersetzungsfunktionen

translateX()

Übersetzt ein Element horizontal.

translateY()

Übersetzt ein Element vertikal.

translateZ()

Übersetzt ein Element entlang der z-Achse.

translate()

Übersetzt ein Element in der 2D-Ebene.

translate3d()

Übersetzt 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 in der 2D-Ebene nach oben oder unten.

scale3d()

Skaliert ein Element im 3D-Raum nach oben oder unten.

Schrägfuntionen

skewX()

Schrägt ein Element in der horizontalen Richtung.

skewY()

Schrägt ein Element in der vertikalen 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 die Distanz zwischen dem Benutzer und der z=0-Ebene fest.

Mathematische Funktionen

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

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

Grundlegende Arithmetik

calc()

Führt grundlegende arithmetische Berechnungen an 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 von Werten.

max()

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

clamp()

Berechnet den zentralen Wert von Minimum, Zentrum und Maximum.

Abgestufte Wertfunktionen

round()

Berechnet eine gerundete Zahl basierend auf einer Rundungsstrategie.

mod()

Berechnet einen Modulus (mit demselben Vorzeichen wie der Divisor), wenn eine Zahl durch eine andere dividiert wird.

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

rem()

Berechnet einen Rest (mit demselben Vorzeichen wie die Dividende), wenn eine Zahl durch eine andere dividiert 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

pow()

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

Vorzeichenbezogene Funktionen

abs()

Berechnet den Absolutwert 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 ändern kann. Er wird in den Eigenschaften filter und backdrop-filter verwendet.

blur()

Erhöht die Gauss'sche Unschärfe des Bildes.

brightness()

Hellt ein Bild auf oder dunkelt es ab.

contrast()

Erhöht oder verringert den Kontrast des Bildes.

drop-shadow()

Fügt einen Schatten hinter einem Bild hinzu.

grayscale()

Konvertiert ein Bild in Graustufen.

hue-rotate()

Ändert den allgemeinen Farbton eines Bildes.

invert()

Kehrt die Farben eines Bildes um.

opacity()

Fügt einem Bild Transparenz hinzu.

saturate()

Ändert die allgemeine Sättigung eines Bildes.

sepia()

Erhöht den Sepia-Ton eines Bildes.

Farbe Funktionen

Der <color> CSS-Datentyp gibt verschiedene Farbrepräsentationen an.

rgb()

Definiert eine bestimmte Farbe gemäß ihrer roten, grünen, blauen und Alpha-(Transparenz)-Komponenten.

hsl()

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

hwb()

Definiert eine bestimmte Farbe gemäß ihrem Farbton, ihrem Weiß- und Schwarzanteil.

lch()

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

oklch()

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

lab()

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

oklab()

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

color()

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

color-mix()

Mischt zwei Farbwerte in einem gegebenen Farbraum in einer bestimmten 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 basierend auf dem aktuellen Farbdesign zurück.

dynamic-range-limit-mix()

Erstellt ein benutzerdefiniertes Maximum für die Leuchtkraftgrenze, das ein Mix aus verschiedenen dynamic-range-limit Stichwörtern in angegebenen Prozentsätzen ist.

Bildfunktionen

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

Verlaufsfunktionen

linear-gradient()

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

radial-gradient()

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

conic-gradient()

Konische Verläufe verändern Farben progressiv um einen Kreis.

repeating-linear-gradient()

Ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente entgegen, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter abzudecken.

repeating-radial-gradient()

Ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente entgegen, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter abzudecken.

repeating-conic-gradient()

Ist ähnlich wie conic-gradient() und nimmt die gleichen Argumente entgegen, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um seinen gesamten Behälter abzudecken.

Bildfunktionen

image()

Definiert ein <image> auf ähnliche Weise wie der <url>-Typ, aber mit erweiterten Funktionen, einschließlich der Spezifikation der Bildrichtung und von Ausweichbildern, falls das bevorzugte Bild nicht unterstützt wird.

image-set()

Wählt das am besten geeignete CSS-Bild aus einem gegebenen Satz, hauptsächlich für Bildschirme mit hoher Pixeldichte.

cross-fade()

Mischt 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ählerfunktion

CSS-Zählerfunktionen werden im Allgemeinen 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 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

Grundlegende Formen

Der <basic-shape> CSS-Datentyp repräsentiert eine grafische Form. Er wird in den Eigenschaften clip-path, offset-path und shape-outside verwendet.

circle()

Definiert eine Kreisform.

ellipse()

Definiert eine Ellipsenform.

inset()

Definiert eine eingesenkte Rechteckform.

rect()

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

xywh()

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

polygon()

Definiert eine Polygonform.

path()

Akzeptiert einen SVG-Pfadstring, um das Zeichnen einer Form zu ermöglichen.

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

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 vom Benutzeragenten definierte Umgebungskonstanten.

if()

Setzt bedingt einen Eigenschaftswert je nach dem Ergebnis einer Stil-Abfrage, Medienabfrage oder Feature-Abfrage.

url()

Verwendet eine Datei von der angegebenen URL.

var()

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

Rasterfunktionen

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

fit-content()

Beschränkt 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 oder gleich min und kleiner oder gleich max ist.

repeat()

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

Schriftartfunktionen

CSS-Schriftartfunktionen werden mit der font-variant-alternates-Eigenschaft verwendet, um die Nutzung von alternativen Glyphen zu steuern.

stylistic()

Ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schrifttypenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.

styleset()

Ermöglicht stilistische Alternativen für Zeichensätze. Der Parameter ist ein schrifttypenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.

character-variant()

Ermöglicht spezifische stilistische Alternativen für Zeichen. Es ist ähnlich wie styleset(), erzeugt aber keine zusammenhängenden Glyphen für einen Zeichensatz; einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schritttypenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Ermöglicht Zierschrift-Glyphen. Der Parameter ist ein schrifttypenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.

ornaments()

Ermöglicht Zierde wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schrifttypenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.

annotation()

Ermöglicht Anmerkungen wie umkreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schrifttypenspezifischer Name, der einer Zahl zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Verlaufskurvenfunktionen

Der <easing-function> CSS-Datentyp repräsentiert eine mathematische Funktion. Es wird in den Übergangs- und Animations-Eigenschaften verwendet:

linear()

Verlaufskurvenfunktion, die linear zwischen ihren Punkten interpoliert.

cubic-bezier()

Verlaufskurvenfunktion, die eine kubische Bézierkurve definiert.

steps()

Iteration über eine angegebene Anzahl von Stopps entlang des Übergangs, bei dem jeder Stopp für gleiche Zeitlängen 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 Scroll-Fortschrittszeitachse.

view()

Setzt die animation-timeline eines Elements auf eine anonyme Ansicht-Fortschrittszeitachse.

Ankerpositionsfunktionen

Die Ankerpositionsfunktionen werden verwendet, um ankergestützte Elemente relativ zum Standort und zur Größe ihrer zugehörigen Ankerelemente zu positionieren und zu dimensionieren.

anchor()

Gibt eine Länge relativ zur Position der Kanten eines ankergestützten Elements des zugehörigen Ankerelements 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, nicht jedoch auf dem 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 Gesamtzahl der Geschwister, einschließlich des ausgewählten Elements, widerspiegelt.

Alphabetischer Index der Funktionen

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden