$30 off During Our Annual Pro Sale. View Details »

Custom properties sind mehr als bloß CSS-Variablen

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

Gunnar Bittersmann

September 12, 2018
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

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