Der Kampf gegen Layout-Ruckeln

Eine Webseite ist nicht in Stein gemeißelt, nur weil sie visuell gerendert wurde. Medieninhalte wie Bilder können das Layout verschieben, je nach ihrer Größe, die in flüssigen Layouts typischerweise erst bekannt ist, wenn sie gerendert werden. Oder Schriften können laden und das Layout neu umbrechen. Oder XHRs können mehr Inhalt bringen, der auf der Seite platziert werden soll. Wir tun immer unser Bestes, um zu verhindern, dass sich das Layout verschiebt – das meine ich mit Layout-Ruckeln. Es ist unbeholfen und niemand mag es. Im besten Fall verliert man beim Lesen den Faden; im schlimmsten Fall klickt man auf etwas, das man *wirklich* nicht anklicken wollte.

Während ich versuchte, die neue Layout Instability API zu verstehen und mit Freunden darüber sprach, sagte Eric Portis etwas, das charakteristisch klug war. Grundsätzlich ist Layout-Ruckeln ein Problem und wird an mehreren Fronten bekämpft.

• Bekämpfen Sie das Problem auf der Ebene des Inhalts/Autors: Wir haben jetzt intrinsicsize als HTML-Attribut und aspect-ratio als CSS-Eigenschaft. Beide sind für diesen Kampf konzipiert, obwohl sie noch keine wirklich gute Browserunterstützung haben und stattdessen DIY-Seitenverhältnis-Boxen benötigen. Außerdem ändern Ideen wie diese die UA-Stylesheets, um die Effektivität von *aspect-ratio* zu erweitern.
• Bekämpfen Sie das Problem auf der Ebene des Browserverhaltens: Scroll Anchoring ist ebenfalls dafür konzipiert. Die Tatsache, dass es jetzt standardmäßig aktiviert ist, ist eine große Sache. Es ist auch weiterhin möglich, es bei Bedarf mit CSS zu steuern, über overflow-anchor.
• Messen Sie das Problem und seine Ursachen: Die Layout Instability API ist dafür konzipiert, vermutlich um Tools zu ermöglichen, die sie überwachen.