Custom properties sind mehr als bloß CSS-Variablen

Custom Properties – das sind CSS-Variablen, nicht wahr? Ja, sowas in der Art. Und nein, sie sind mehr als das.
Der Vortrag behandelt, was Custom Properties mit Variablen gemeinsam haben, wie wir sie aus CSS-Präprozessoren wie Sass kennen, und wie sie darüber hinausgehen. Wir werden sehen, wie sich Custom Properties ins CSS-Universum einfügen, mit Betonung auf dem C: the cascade.
Wir werden sehen, wie Custom Properties dabei helfen, DRY Code (don’t repeat yourself) zu schreiben. Wir werden anhand von Beispielen sehen, was man mit Custom Properties machen kann, was mit Variablen in Sass nicht geht.
Wir werden Jahrtausende zurück in der Zeit reisen und Quadratwurzeln wie die alten Babylonier berechnen – nur, dass wir es in CSS tun.
Warum? Weil wir’s können?
Nicht nur das, ich werde einen Anwendungsfall vorstellen, bei dem man beim Layouten tatsächlich Wurzeln ziehen muss.

Video: https://www.video.uni-erlangen.de/clip/id/9481

Beispiele:
Info-Boxen https://codepen.io/gunnarbittersmann/pen/QOxEoW
Terminkalender https://codepen.io/gunnarbittersmann/pen/mGVpgw
Schriftgröße https://codepen.io/gunnarbittersmann/pen/EebWbd
Bildergalerie https://codepen.io/gunnarbittersmann/pen/mXXYye

Artikel:
Zurück zu den Wurzeln http://webkrauts.de/artikel/2015/mathematische-funktionen-mit-sass

Transcript

2. - beginnen immer mit !-- - setzen: !--my-property: 42; - verwenden: var(!--my-property) - werden vererbt - gehorchen der Spezifität
3. BeispiEl: info-boxEn codepen.io/gunnarbittersmann/pen/QOxEoW
4. BeispiEl: termiNkalEnDer codepen.io/gunnarbittersmann/pen/mGVpgw
5. <li style="!--start: h1100; !--end: h1300"> Zwischen Frühstück und Gänsebraten !</li> <div class="container"> <div class="row"> <div class="col-12 col-md-8 col-lg-6"> Das sind keine Inline-Styles. Aber das sind Inline-Styles.
6. Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite
7. SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE
8. SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE body { font-size: 16px } @media (min-width: 640px) { body { font-size: 17px } } @media (min-width: 960px) { body { font-size: 18px } } body { font-size: 1em } @media (min-width: 40em) { body { font-size: 1.0625em } } @media (min-width: 60em) { body { font-size: 1.125em } }
9. calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16) f(x) = m x + n f(x) = m (x − 320) + 16 m = = = Δy Δx 18 − 16 960 − 320 18 − 16 640 18 − 16 640 f(x) = (x − 320) + 16 SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE 18 − 16 640 18 − 16 2 = x + 16 −
10. body { font-size: calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16); } SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE ÜbersChrifT: 26pX bei 320pX breiTE, 36pX bei 960pX breiTE h1 { font-size: calc((36 - 26)/640 * 100vw + (26 - (36 - 26)/2) * 1rem/16); }
11. body { !--font-size-320: 16; !--font-size-960: 18; font-size: calc((var(!--font-size-960) - var(!--font-size-320))/640 * 100vw + (var(!--font-size-320) - (var(!--font-size-960) - var(!--font-size-320))/2) * 1rem/16); } h1 { !--font-size-320: 26; !--font-size-960: 36; }
12. body { !--font-size-320: 16; !--font-size-960: 18; } h1 { !--font-size-320: 26; !--font-size-960: 36; } body, h1 { font-size: calc((var(!--font-size-960) - var(!--font-size-320))/640 * 100vw + (var(!--font-size-320) - (var(!--font-size-960) - var(!--font-size-320))/2) * 1rem/16); }
13. BeispiEl: schRiftgRöße codepen.io/gunnarbittersmann/pen/EebWbd
14. BeispiEl: bildeRgalErie
15. r · b · b = A b = √A / r a · b = A a / b = r a = r · b b² = A / r a = r · √A / r a = √A · r a b
16. Babylonian method (Heron’s method) a = 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356… x0 ≈ √a > 0 xn+1 = (xn + a / xn ) / 2 lim xn = √a n
    ∞ Heron-verfAHren (babyLoniscHEs wuRzElzieHen)
18. Babylonian method (Heron’s method) a = 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356… x0 ≈ √a > 0 xn+1 = (xn + a / xn ) / 2 lim xn = √a n
    ∞ Heron-verfAHren (babyLoniscHEs wuRzElzieHen) @function sqrt($a) { $x: 1; @for $i from 1 through 3 { $x: ($x + $a / $x) / 2; } @return $x; }
19. Babylonian method (Heron’s method) a = 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356… x0 ≈ √a > 0 xn+1 = (xn + a / xn ) / 2 lim xn = √a n
    ∞ Heron-verfAHren (babyLoniscHEs wuRzElzieHen) @function sqrt($a) { $x: 1; $x: ($x + $a / $x) / 2; $x: ($x + $a / $x) / 2; $x: ($x + $a / $x) / 2; @return $x; }
20. Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !--area: 0.4; !--a: calc(var(!--area) * var(!--aspect-ratio)); !--x0: 1; !--x1: calc((var(!--x0) + var(!--a) / var(!--x0)) / 2); !--x2: calc((var(!--x1) + var(!--a) / var(!--x1)) / 2); !--x3: calc((var(!--x2) + var(!--a) / var(!--x2)) / 2); width: calc(var(!--x3) * 100%);
21. Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !--area: 0.4; !--a: calc(var(!--area) * var(!--aspect-ratio)); !--x0: 1; !--x1: calc((var(!--x0) + var(!--a) / var(!--x0)) / 2); !--x2: calc((var(!--x1) + var(!--a) / var(!--x1)) / 2); width: calc(var(!--x2) * 100%);
22. BeispiEl: bildeRgalErie codepen.io/gunnarbittersmann/pen/mXXYye
23. <img src="https:!//bittersmann.de/images/65.1057/580.jpg" style="!--aspect-ratio: calc(4/3)" alt=""!/> <div class="container"> <div class="row"> <div class="col-12 col-md-8 col-lg-6"> Das sind keine Inline-Styles. Aber das sind Inline-Styles.
24. - beginnen immer mit !-- - setzen: !--my-property: 42; - verwenden: var(!--my-property) - werden vererbt - gehorchen der Spezifität
29. LiebeGerda & LiebedOriS von Ulrike Rausch liebefONts.Com