CSS/Funktionen: Unterschied zwischen den Versionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
(l korr)
K (akt - alphabetische Liste jetzt aktuell - Vorlage folgt morgen!)
Zeile 1: Zeile 1:
−
(削除) {{Aside-CSS-Funktionen}} (削除ここまで)
+
Im Allgemeinen werden den CSS-Eigenschaften Einzelangaben verschiedener [[CSS/Wertetypen|Maß- und Wertetypen]]  zugewiesen(追記) . Zusätzlich können aber auch '''CSS-Funktionen''' verwendet werden (追記ここまで).  
−
Im Allgemeinen werden den CSS-Eigenschaften Einzelangaben verschiedener [[CSS/Wertetypen|Maß- und Wertetypen]]  zugewiesen.
 
   
−
(削除) Zusätzlich können aber auch (削除ここまで)'''(削除) CSS-Funktionen (削除ここまで)''' (削除) verwendet werden. Mit CSS-Funktionen können Berechnungen ([[/calc()|calc()]]) durchgeführt und mehrere Werte verglichen ([[/clamp()|clamp()]], [[/minmax()|minmax()]]) werden. (削除ここまで)
+
'''(追記) Syntax (追記ここまで)'''(追記) : (追記ここまで)
   
  +
(追記) <code>funktion(parameter)</code> (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) bzw. (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) <code>funktion(parameter1 parameter2)</code>. (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) 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()|calc()]]) durchgeführt, mehrere Werte verglichen ([[/clamp()|clamp()]], [[/minmax()|minmax()]]) oder sogar Fallunterscheidungen ([[/if()|if()]]) getroffen werden. (追記ここまで)
 
Die [[/var()|var()]]-Funktion erlaubt es, benutzderdefinierte Werte (''custom properties'') als Parameter eines Eigenschaftswerts einzusetzen.
 
Die [[/var()|var()]]-Funktion erlaubt es, benutzderdefinierte Werte (''custom properties'') als Parameter eines Eigenschaftswerts einzusetzen.
   
−
(削除) '''Syntax''': (削除ここまで)
 
   
−
(削除) <code>funktion (削除ここまで)((削除) parameter (削除ここまで))(削除) < (削除ここまで)/(削除) code> (削除ここまで)
+
(追記) {{TOC|inline}} (追記ここまで)
  +
 
  +
(追記) {{2Spalten| (追記ここまで)
  +
(追記) {{2Spalten| (追記ここまで)
  +
(追記) == A == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#abs()|abs()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#acos()|acos()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/anchor()|anchor()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/anchor-size()|anchor-size()]] (追記ここまで)
  +
(追記) * annotation (追記ここまで)()
  +
(追記) * [[CSS/Funktionen (追記ここまで)/(追記) Math-Funktionen#asin()|asin()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#atan()|atan()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#atan2()|atan2()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/attr()|attr()]] (追記ここまで)
  +
 
  +
(追記) == B == (追記ここまで)
  +
(追記) * [[blur()]] (追記ここまで)
  +
 
  +
(追記) == C == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/calc()|calc()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/calc-size()|calc-size()]] (追記ここまで)
  +
(追記) * character-variant() (追記ここまで)
  +
(追記) * [[CSS/Funktionen/circle()|circle()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/clamp()|clamp()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/color()|color()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/color-mix()|color-mix()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/contrast-color()|contrast-color()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/conic-gradient()|conic-gradient()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#cos()|cos()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/counter()|counter()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/counters()|counters()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/cross-fade()|cross-fade()]] (追記ここまで)
  +
(追記) * [[cubic-bezier()]] (追記ここまで)
  +
 
  +
(追記) == D == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/device-cmyk()|device-cmyk()]] (追記ここまで)
  +
(追記) * [[drop-shadow()]] (追記ここまで)
  +
(追記) | (追記ここまで)
  +
(追記) == E == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/element()|element()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/ellipse()|ellipse()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/env()|env()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#exp()|exp()]] (追記ここまで)
  +
 
  +
(追記) == F == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/fit-content()|fit-content()]] (追記ここまで)
  +
 
  +
(追記) == G == (追記ここまで)
  +
(追記) * [[grayscale()]] (追記ここまで)
   
−
(削除) bzw. (削除ここまで)
 
   
−
(削除) <code>funktion (削除ここまで)((削除) parameter1, parameter2 (削除ここまで))(削除) < (削除ここまで)/(削除) code> (削除ここまで).
+
(追記) == H == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/hsl()|hsl()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/hwb()|hwb (追記ここまで)()(追記) ]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen (追記ここまで)/(追記) Math-Funktionen#hypot.28 (追記ここまで).(追記) 29|hypot()]] (追記ここまで)
  +
(追記) * [[hue-rotate()]] (追記ここまで)
   
−
(削除) Eine Funktion besteht aus einem Funktionsnamen, gefolgt von einem runden Klammernpaar. Innerhalb der Klammern stehen ein oder mehrere, durch Kommata getrennte Parameter, die die Funktion verarbeitet. Innerhalb der Klammern sind Leerzeichen möglich. (削除ここまで)
+
(追記) == I == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/if()|if()]] (追記ここまで)
  +
(追記) * [[invert()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/image()|image()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/image-set()|image-set()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/inset()|inset()]] (追記ここまで)
   
−
== (削除) Siehe auch (削除ここまで)==
+
== (追記) L (追記ここまで)==  
  +
(追記) * [[CSS/Funktionen/lab()|lab()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/lch()|lch()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/light-dark()|light-dark()]] (追記ここまで)
  +
(追記) * [[linear()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/linear-gradient()|linear-gradient()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#log()|log()]] (追記ここまで)
  +
(追記) }} (追記ここまで)
  +
(追記) | (追記ここまで)
 
{{2Spalten|
 
{{2Spalten|
−
* [[(削除) SVG (削除ここまで)/(削除) Tutorials (削除ここまで)/(削除) Filter (削除ここまで)/(削除) Anwendung in (削除ここまで)CSS|CSS-(削除) Filter (削除ここまで)]]
+
(追記) == M == (追記ここまで)
−
** [[(削除) blur (削除ここまで)()]]  
+
(追記) * [[CSS/Funktionen/matrix()|matrix()]] (追記ここまで)
−
** [[(削除) brightness (削除ここまで)()]]  
+
(追記) ** [[CSS/Funktionen/matrix3d()|matrix3d()]] (追記ここまで)
−
** [[(削除) contrast (削除ここまで)()]]
+
* [[(追記) CSS (追記ここまで)/(追記) Funktionen/max()|max()]] (追記ここまで)
−
** [[(削除) drop (削除ここまで)-(削除) shadow (削除ここまで)()]]
+
(追記) * [[CSS (追記ここまで)/(追記) Funktionen (追記ここまで)/(追記) min()|min()]] (追記ここまで)
−
** [[(削除) grayscale (削除ここまで)()]]  
+
(追記) * [[ (追記ここまで)CSS(追記) /Funktionen/minmax() (追記ここまで)|(追記) minmax()]] (追記ここまで)
−
** [[(削除) hue (削除ここまで)-rotate()]]
+
(追記) * [[ (追記ここまで)CSS(追記) /Funktionen/Math (追記ここまで)-(追記) Funktionen#mod() und rem()|mod()]] (追記ここまで)
−
** [[(削除) invert (削除ここまで)()]]
+
 
−
** [[(削除) opacity (削除ここまで)()]]
+
(追記) == O == (追記ここまで)
−
** [[(削除) saturate (削除ここまで)()]]
+
(追記) * [[opacity()]] (追記ここまで)
−
** [[(削除) sepia (削除ここまで)()]]
+
(追記) * [[CSS/Funktionen/oklab()|oklab()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/oklch()|oklch()]] (追記ここまで)
  +
(追記) * ornaments() (追記ここまで)
  +
 
  +
(追記) == P == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/paint()|paint() (追記ここまで)]]
  +
* (追記) [[CSS/Funktionen/path()|path()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/perspective()|perspective (追記ここまで)()]]
  +
* (追記) [[CSS/Funktionen/polygon()|polygon()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/Math-Funktionen#pow()|pow (追記ここまで)()]]
  +
 
  +
(追記) == R == (追記ここまで)
  +
* (追記) [[CSS/Funktionen/radial-gradient()|radial-gradient()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/ray()|ray (追記ここまで)()]]
  +
* (追記) [[CSS/Funktionen/rect()|rect()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/Math (追記ここまで)-(追記) Funktionen#mod() und rem()|rem (追記ここまで)()]]
  +
* (追記) [[CSS/Funktionen/repeat()|repeat()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/repeating-conic-gradient()|repeating-conic-gradient (追記ここまで)()]]
  +
* (追記) [[CSS/Funktionen/repeating-linear-gradient()|repeating-linear-gradient()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/repeating (追記ここまで)-(追記) radial-gradient()|repeating-radial-gradient()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/ (追記ここまで)rotate(追記) ()|rotate()]] (追記ここまで)
  +
(追記) ** [[CSS/Funktionen/rotateX()|rotateX (追記ここまで)()]]
  +
** [[(追記) CSS/Funktionen/rotateY()|rotateY (追記ここまで)()]]
  +
** [[(追記) CSS/Funktionen/rotateZ()|rotateZ (追記ここまで)()]]
  +
** [[(追記) CSS/Funktionen/rotate3d()|rotate3d (追記ここまで)()]]
  +
* (追記) [[CSS/Funktionen/Math-Funktionen#round()|round()]] (追記ここまで)
  +
* [[(追記) CSS/Funktionen/rgb()|rgb (追記ここまで)()]]
 
|
 
|
−
(削除) SVG ''Basic shapes'' (削除ここまで)
+
(追記) == S == (追記ここまで)
−
** (削除) circle (削除ここまで)()
+
* (追記) [[CSS/Funktionen/scale()|scale()]] (追記ここまで)
−
** (削除) ellipse (削除ここまで)()
+
(追記) ** [[CSS/Funktionen/scaleX()|scaleX()]] (追記ここまで)
−
** (削除) inset (削除ここまで)()
+
(追記) ** [[CSS/Funktionen/scaleY()|scaleY()]] (追記ここまで)
−
** [[(削除) path (削除ここまで)()]]
+
(追記) ** [[CSS/Funktionen/scaleZ()|scaleZ()]] (追記ここまで)
−
** (削除) polygon (削除ここまで)()
+
(追記) ** [[CSS/Funktionen/scale3d()|scale3d()]] (追記ここまで)
  +
(追記) * [[saturate()]] (追記ここまで)
  +
(追記) * [[sepia()]] (追記ここまで)
  +
(追記) * sibling-count() (追記ここまで)
  +
(追記) * sibling-index() (追記ここまで)
  +
(追記) * [[steps()]] (追記ここまで)
  +
(追記) * stylistic() (追記ここまで)
  +
(追記) * styleset() (追記ここまで)
  +
(追記) * swash() (追記ここまで)
  +
 
  +
(追記) == T == (追記ここまで)
  +
(追記) * [[CSS/Funktionen/Math-Funktionen#tan()|tan()]] (追記ここまで)
  +
(追記) * [[CSS/Funktionen/translate()|translate()]] (追記ここまで)
  +
*(追記) * [[CSS/Funktionen/translateX()|translateX (追記ここまで)()(追記) ]] (追記ここまで)
  +
** (追記) [[CSS/Funktionen/translateY()|translateY()]] (追記ここまで)
  +
(追記) ** [[CSS/Funktionen/translateZ()|translateZ (追記ここまで)()(追記) ]] (追記ここまで)
  +
** (追記) [[CSS/Funktionen/translate3d()|translate3d (追記ここまで)()(追記) ]] (追記ここまで)
  +
 
  +
(追記) == U == (追記ここまで)
  +
* (追記) [[CSS/Funktionen/url()|url()]] (追記ここまで)
  +
 
  +
(追記) == V == (追記ここまで)
  +
* [[(追記) CSS/Funktionen/var()|var (追記ここまで)()]]
  +
 
  +
(追記) == W == (追記ここまで)
  +
* (追記) [[CSS/Funktionen/view()|view()]] (追記ここまで)
  +
 
  +
(追記) == X == (追記ここまで)
  +
* (追記) [[CSS/Funktionen/xywh (追記ここまで)()(追記) |yxwh()]] (追記ここまで)
  +
(追記) }} (追記ここまで)
 
}}
 
}}
  +
(追記) (追記ここまで)
  +
(追記) == Siehe auch == (追記ここまで)
  +
(追記) (追記ここまで)
   
 
{{Kategorie|CSS}}
 
{{Kategorie|CSS}}
 
[[Kategorie:Funktion (CSS)]]
 
[[Kategorie:Funktion (CSS)]]

Version vom 15. August 2025, 10:51 Uhr

Im Allgemeinen werden den CSS-Eigenschaften Einzelangaben verschiedener Maß- und Wertetypen zugewiesen. Zusätzlich können aber 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.


Siehe auch

Abgerufen am 6.01.2026
von "http://wiki.selfhtml.org/wiki/CSS/Funktionen"