Aktiv lytning: Barrierer for effektiv kommunikation

Hvis du udvikler et html-dokument strengt ved hjælp af den nuværende bedste praksis for at holde styling ude af markeringen, hvordan kommunikerer du bedst billedstørrelse?

Tidligere bedste praksis ønsker billedets højde og bredde med billedet, fordi det gengives hurtigere end browseren, der venter på, at billedet downloades for at få dets dimensioner. Men at gøre dette synes at være i modstrid med isolerende stil ud af dokumentet.

Tilføj en id-attribut til hvert billede, og læg højden / bredden i css? Benægter dette gengivelsesbonus for indbygget billedhøjde og -bredde?

At have bredden og højden i IMG-elementet er ikke udfaset og er bestemt den bedste måde at fortælle browseren bredden og højden på et billede. At gå ud af din måde at gøre det på en anden måde er overflødig og unødvendig (og muligvis fjollet). Foretag ikke unødvendigt arbejde for dig selv eller browseren. Hold dig til det grundlæggende, der fungerer.

  • 1 ... og glem ikke en ALT tag også, selvom det er blankt eller overholdelseskontrol vil klage.
  • @Tchalvak Undskyld, men du tager fejl. Du kan tilsidesætte bredde og højde dynamisk gennem serversides programmering og / eller JavaScript. Og efter din logik kan du heller ikke tilsidesætte indbyggede stilarter.
  • Whoops, det ser ud til, at jeg alligevel havde taget fejl af manglen på en css-overskrivning, !important i css tillader det dig at tilsidesætte bredde- og højdeattributterne, så oprindeligt fungerer det at bruge bredde / højde. Nu sidder jeg dog fast i nedstemningen. Hvis du har lyst til at redigere svaret, vil jeg ændre det. trækker på skuldrene Ikke at det betyder noget for meget.

John Condes svar er spot-on. Billeder har bredde og højde - det er en del af deres indhold, ikke deres stil. Så der er ingen grund til at foretage en "adskillelse" her.

Dog en undtagelse: CSS til billeddimensioner er nyttigt, hvis du har mange billeder i samme størrelse (f.eks. miniaturer). Her er det meget bedre at bruge en CSS-klasse til at skære ned HTML og fremskynde udviklingen.

For et websteds design inklusive knapper og ikoner er din bedste løsning CSS sprites.

  • +1, css sprites gør en latterlig forskel i hastigheden på et websted.

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