De Strijd Tegen De Lay-Out Jank

0
11

Een web pagina is niet opgesloten in steen gewoon omdat het er visueel weergegeven. Media-items, zoals afbeeldingen, kan komen en de oorzaak van de lay-out te verschuiven op basis van hun grootte, die meestal niet bekend in vloeibare lay-outs, totdat zij doen renderen. Of lettertypen kunt laden en reflow-lay-out. Of XHRs kan brengen in meer content worden geplaatst op de pagina. We zijn altijd doen wat we kunnen om te voorkomen dat de lay-out van het verschuiven van rond — dat is wat ik bedoel met de lay-out jank. Het is lastig en niemand vindt het leuk. Op zijn best, het zorgt u ervoor dat u verliest uw plaats tijdens het lezen; in het slechtste geval, kan het betekenen klikken op iets wat u echt niet verstaan.

Terwijl ik probeerde mijn hoofd wikkel rond de nieuwe Lay-out Instabiliteit API en chatten met vrienden, Eric Portis zei iets typisch smart. Kortom, de lay-out jank is een probleem en het wordt een strijd op meerdere fronten:

  • Bestrijding van het probleem op de inhoud/authoring niveau: We hebben nu intrinsicsize als een HTML-attribuut en de aspect-ratio als een CSS-eigenschap. Beide zijn ontworpen voor deze strijd, hoewel ze niet echt grote steun van de browser nog, eigen DIY-aspect ratio dozen intead. Plus, ideeën, zoals deze wijziging van de UA stylesheets te verruimen van de effectiviteit van de aspect-ratio.
  • Bestrijding van het probleem bij de browser gedrag niveau: Ga verankering is ontworpen om dit te doen ook. Het feit dat het nu standaard is een big deal. Ook is het nog mogelijk om de controle van het met CSS, indien nodig, via overloop-anker.
  • Meten van het probleem en de oorzaken: De Lay-out Instabiliteit API is ontworpen voor deze, vermoedelijk voor het inschakelen van tooling die bewaakt het.