CSS/Funktionen

Im Allgemeinen werden den CSS-Eigenschaften Einzelangaben verschiedener Maß- und Wertetypen zugewiesen. Zusätzlich können für die Werte von CSS-Eigenschaften auch CSS-Funktionen verwendet werden.

Syntax:

funktion(parameter)

bzw.

funktion(parameter1 parameter2).

Eine CSS-Funktion besteht aus einem Funktionsnamen, gefolgt von einem runden Klammernpaar. Innerhalb der Klammern stehen ein oder mehrere, durch Leerzeichen getrennte Parameter, die die Funktion verarbeitet.

Mit CSS-Funktionen können Berechnungen (calc()) durchgeführt, mehrere Werte verglichen (clamp(), minmax()) oder sogar Fallunterscheidungen (if()) getroffen werden. Die var()-Funktion erlaubt es, benutzderdefinierte Werte (custom properties) als Parameter eines Eigenschaftswerts einzusetzen.

Beachte: Nicht alles, was Klammern verwendet, ist eine Funktion. Funktionen finden sich in Eigenschaftswerten. Bezeichnungen wie :nth-child(), die in CSS Selektoren vorkommen, sind Pseudoklassen und werden in der Selektoren-Übersicht aufgeführt.

A

• abs()
• acos()
• anchor()
• anchor-size()
• annotation()
• asin()
• atan()
• atan2()
• attr()

B

• blur()

C

• calc()
• calc-size()
• character-variant()
• circle()
• clamp()
• color()
• color-mix()
• contrast-color()
• conic-gradient()
• cos()
• counter()
• counters()
• cross-fade()
• cubic-bezier()

D

• device-cmyk()
• drop-shadow()

E

• element()
• ellipse()
• env()
• exp()

F

• fit-content()

G

• grayscale()

H

• hsl()
• hwb()
• hypot()
• hue-rotate()

I

• if()
• invert()
• image()
• image-set()
• inset()

L

• lab()
• lch()
• light-dark()
• linear()
• linear-gradient()
• log()

M

• matrix()
  • matrix3d()
• max()
• min()
• minmax()
• mod()

O

• opacity()
• oklab()
• oklch()
• ornaments()

P

• paint()
• path()
• perspective()
• polygon()
• pow()

R

• radial-gradient()
• ray()
• rect()
• rem()
• repeat()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• rotate()
  • rotateX()
  • rotateY()
  • rotateZ()
  • rotate3d()
• round()
• rgb()

S

• scale()
  • scaleX()
  • scaleY()
  • scaleZ()
  • scale3d()
• saturate()
• scroll()
• sepia()
• sibling-count()
• sibling-index()
• steps()
• stylistic()
• styleset()
• swash()

T

• tan()
• translate()
  • translateX()
  • translateY()
  • translateZ()
  • translate3d()

U

• url()

V

• var()
• view()

X

• yxwh()