Der Kampf Gegen Den Layout-Jank

0
13

Eine web-Seite ist nicht gesperrt in Stein, nur weil es visuell dargestellt wird. Media-assets, wie Bilder, können kommen und bewirken, dass das layout zu verschieben, basierend auf Ihrer Größe, die typischerweise noch nicht bekannt ist, in fluid-layouts, bis Sie tun, machen. Oder fonts laden kann und reflow-layout. Oder XHRs in der Lage, mehr Inhalte auf der Seite. Wir sind immer tun, was wir können, um zu verhindern, dass das layout von Verschiebung — das ist es, was ich meine vom layout jank. Es ist peinlich und niemand mag es. Am besten, es bewirkt, dass Sie verlieren Ihren Platz, während Sie Lesen; im schlimmsten Fall kann es bedeuten anklicken etwas, das Sie nicht wirklich so meinen.

Während ich versuchte, wickeln Sie meinen Kopf herum, das neue Layout Instabilität API und chatten Sie mit Freunden, Eric Portis sagte etwas charakteristisch smart. Im Grunde, layout jank ist ein problem, und er kämpfte an mehreren Fronten:

  • Gegen das problem in der content – /authoring-Ebene: Wir haben jetzt intrinsicsize wie ein HTML-Attribut und Aspekt-ratio als CSS-Eigenschaft. Beide sind so konzipiert, für diesen Kampf, obwohl Sie nicht wirklich große browser-Unterstützung vorhanden ist, erfordern die DIY-Aspekt-Verhältnis-Boxen intead. Plus Ideen, wie diese änderung der UA-stylesheets zu erweitern, die Wirksamkeit der Aspekt-ratio.
  • Gegen das problem am browser-Verhalten-Ebene: Blättern Verankerung ist entworfen, um zu tun dies auch. Die Tatsache, dass es nun standardmäßig aktiviert ist eine große Sache. Es ist auch immer noch möglich ist, Steuern Sie es mit CSS, wenn Sie benötigen, über die überlauf-Anker.
  • Messen Sie das problem und die Ursachen: Das Layout Instabilität-API ist dafür ausgelegt, vermutlich zum aktivieren der Werkzeuge, die überwacht wird.