Tip til at rette Windows Store-apps, der ikke fungerer korrekt i Windows 10 og 8.1

På mit websted siger Google Webmasterværktøjer, at en masse sider har kumulative layout shift-fejl (CLS). Ellers kendt som rykkende belastning.

På min side er billederne altid i en div med en klasse, der indstiller den til en procentdel af indholdsblokken.

F.eks.

Birch by pond

Birch along a pond. In the landscape birch look good in random small clumps.


Den beregnede bredde ender med at blive 281. (Ja, jeg ved det. Jeg skulle bruge srcsets.)

Jeg prøvede at tilføje billedets faktiske dimensioner med width=900 height=1200. I denne situation skalerer skalaen den vandrette dimension, men ikke den lodrette.

Googles webudviklingsside foreslår at placere dimensionerne i. Både teksten på denne side og videoen synes at antyde, at dette ville fungere, men det gør det ikke. Men dette efterlader ikke længere siden lydhør. De foreslår også at bruge CSS-aspektfelter. Ak, CanIUse.com siger, at dette ikke understøttes af nogen browser uden for boksen.

Denne artikel foreslår følgende:

img { aspect-ratio: attr(width) / attr(height);} 

Men

W3C CSS-checker reagerer med:

img Property aspect-ratio doesn't exist : attr(width) / attr(height) 

Men kan jeg bruge ville foreslå, at billedformat kun delvis understøttes på Firefox, eksperimentelt (skal aktiveres) i krom og ingen andre steder.

Jeg mangler noget her.

Hvad er den bedste måde at reservere plads på og reducere CLS på tilfældige billeder på en statisk side?

Jeg kunne nøjes med et lille antal standardstørrelser. Dette ville kræve, at jeg manuelt ændrer størrelse / genoptager hvert billede, jeg bruger. Derefter vil hver størrelse eller rettere størrelsesforholdet have en tilpasset css-klasse defineret. Dette er tidskrævende. (Jeg har i øjeblikket 2300 billeder på mit websted.)

Rediger: Som svar på en kommentar er her CSS og computermodel fra det pågældende element:

Beregnet model

  • "Jeg prøvede at tilføje billedets faktiske dimensioner med bredde = 900 højde = 1200" - I HTML-kilden? "I denne situation skalerer den side den vandrette dimension, men ikke den lodrette." - Afhængigt af hvilken CSS du har anvendt i din klasse.
  • Okay. Vil tilføje css beskrivelse til mit indlæg.

Jeg tror, ​​at den vigtigste del, du mangler, er height: auto; i CSS.

Tidligere på året foretog alle de store browsere en ændring, hvorved de tager bredden og højden defineret i HTML img-tag som billedformatet. Noget baggrund her

For at reservere den korrekte plads skal du først indstille attributterne for bredde / højde, som du allerede har gjort. (Teknisk behøver dette ikke at være billedets sande pixelstørrelse, men brug ikke et 1000px bredt billede, hvis det aldrig vises så stort.)

Hvis du ikke anvender nogen CSS på billedet, vises det nøjagtigt på de pixeldimensioner, du har angivet, og browseren reserverer det plads, mens billedet indlæses.

Naturligvis med lydhør design er billedet ofte for stort. Den bedste CSS at bruge er dette:

img { max-width: 100%; height: auto; } 

Hvis det overordnede element (f.eks. En kolonne) nu er mindre, udvides billedet ikke større, og browseren reserverer stadig den korrekte mængde plads.

arbejdet for dig: Charles Robertson | Ønsker du at kontakte os?

nyttige oplysninger