Kampen Mot Layout Jank

0
12

En webbsida är inte låst i sten bara för att det har gjort att visuellt. Media tillgångar, såsom bilder, kan komma in och orsaka layouten att flytta baserat på deras storlek, som normalt inte är känd i flytande layouter tills de inte göra. Eller teckensnitt kan laddas och återflöde layout. Eller XHRs kan få mer innehåll för att placeras på sidan. Vi gör alltid vad vi kan för att förhindra att layouten från att flytta runt — det är vad jag menar med layout jank. Det är krångligt och ingen gillar det. I bästa fall, det gör att du förlorar din plats medan du läser, men i värsta fall kan det innebära att klicka på något som man egentligen inte menar.

Medan jag försökte att svepa huvudet runt den nya Layouten Instabilitet API och chattar med vänner, Eric Portis sa något karakteristiskt smart. I grund och botten, layout jank är ett problem och det är utkämpas på flera olika fronter:

  • Bekämpa problemet på innehåll/innehåll-nivå: Vi har nu intrinsicsize som en HTML-attribut och bildförhållande som en CSS-egenskapen. Båda är utformade för denna kamp, även om de egentligen inte har bra webbläsare stöder ännu, kräver DIY bildförhållande lådor intead. Plus, idéer som denna förändring UA stilmallar för att öka effektiviteten av bildförhållande.
  • Bekämpa problemet på webbläsaren beteende nivå: Bläddra förankring är utformad för att göra detta också. Det faktum att det är nu aktiverat som standard är en big deal. Det är också fortfarande möjligt att styra den med CSS om du behöver, via bräddavlopp-ankare.
  • Mäta problemet och orsakerna: Layout Instabilitet API är utformade för detta, förmodligen för att aktivera verktyg som övervakar det.