A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
Back to the roots
Back to the Future
THE FUTURE IS NOW
BACK TO THE ROOTS AGAIN
BEISPIEL: BILDERGALERIE
BEISPIEL: BILDERGALERIE
a·b=A
a/b=r
a=r·b
r·b·b=A
b² = A / r
b = √A / r
a = r · √A / r
a = √A · r
Sassematics Gunnar Bittersmann @g16n
Babylonian method (Heron’s method)
x0 ≈ √a > 0
xn+1 = (xn + a / xn) / 2
lim xn = √a
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…
Babylonian method (Heron’s method)
@function sqrt($a, $iterations: 10) {
$x: 1;
@for $i from 1 through $iterations { $x: ($x + $a / $x) / 2; }
@return $x;
}
Custom properties sind mehr als bloß CSS-Variablen
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%);
THE FUTURE IS NOW sqrt()
6 10 1 0 5 14
BACK TO THE ROOTS AGAIN FOTOS: GUNNAR BITTERSMANN
Wurzeln ziehen in CSS – mit sqrt().
Anwendungsbeispiel: Bildergalerie
The following resources were mentioned during the presentation or are useful additional information.
A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
Vortrag bei Upfront, Januar 2014
Artikel im Webkrauts-Adventskalender 2015
Vortrag auf dem Webkongress Erlangen, September 2018
live in Leipzig 2013-07-07
The following code examples from the presentation can be tried out live.
