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

1. View Slide

2. - beginnen immer mit !--
   - setzen: !--my-property: 42;
   - verwenden: var(!--my-property)
   - werden vererbt
   - gehorchen der Spezifität
   

   View Slide

3. BeispiEl: info-boxEn
   codepen.io/gunnarbittersmann/pen/QOxEoW
   

   View Slide

4. BeispiEl: termiNkalEnDer
   codepen.io/gunnarbittersmann/pen/mGVpgw
   

   View Slide

5. 
   Zwischen Frühstück und Gänsebraten
   !
   
   
   
   Das sind keine Inline-Styles.
   Aber das sind Inline-Styles.
   

   View Slide

6. Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite
   

   View Slide

7. SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE
   

   View Slide

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 }
   }
   

   View Slide

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 −
   

   View Slide

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);
    }
    

    View Slide

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;
    }
    

    View Slide

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);
    }
    

    View Slide

13. BeispiEl: schRiftgRöße
    codepen.io/gunnarbittersmann/pen/EebWbd
    

    View Slide

14. BeispiEl: bildeRgalErie
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

17. View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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%);
    

    View Slide

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%);
    

    View Slide

22. BeispiEl: bildeRgalErie
    codepen.io/gunnarbittersmann/pen/mXXYye
    

    View Slide

23. style="!--aspect-ratio: calc(4/3)" alt=""!/>
    
    
    
    Das sind keine Inline-Styles.
    Aber das sind Inline-Styles.
    

    View Slide

24. - beginnen immer mit !--
    - setzen: !--my-property: 42;
    - verwenden: var(!--my-property)
    - werden vererbt
    - gehorchen der Spezifität
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. LiebeGerda & LiebedOriS
    von Ulrike Rausch
    liebefONts.Com
    

    View Slide