transform; scale
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
Nochmal ausführlicher:
> Das ist auch dann ein Problem, wenn du Breite des Inhalts und Skalierung als zwei Werte im Stylesheet stehen hast, die voneinander abhängen (bspw. 80% und 1.25).
~~~css,bad
body
{
width: 80%;
transform: scale(1.25);
}
~~~
Wenn man die Skalierung ändern will, muss man beide Werte anfassen – schlecht wartbar, fehleranfällig. Sowas sollte man tunlichst vermeiden.
~~~CSS
:root
{
--scale-factor: 1.25;
}
body
{
width: calc(100% / var(--scale-factor));
transform: scale(var(--scale-factor));
}
~~~
Das sollte [in allen aktuellen Browsern funktionieren](http://caniuse.com/#feat=css-variables); nicht aber in alten IEs. CSS-Postprozessor drüberlaufen lassen …
oder CSS-Präprozessor verwenden:
~~~scss
$scale-factor: 1.25;
body
{
width: 100% / $scale-factor;
transform: scale($scale-factor);
}
~~~
Und was hat dieser Syntaxhighlighter jetzt schon wieder zu meckern?
---
Ich würde hier aber die Finger von `scale()` lassen und [wie marctrix sagte](https://forum.selfhtml.org/self/2017/jun/1/transform-scale/1696561#m1696561) einfach nur die Basischriftgröße ändern.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)