Share
Denne artikkelen vil introdusere deg til
Responsivt webdesign (RWD) har tatt webutviklere og designere med storm, og forandrer måten de nærmer seg utvikling av et nettsted. Når du snakker om RWD, Jeg elsker å lage en analogi. Vi, som folk involvert i programvareutvikling, er alltid begeistret av nye verktøy på samme måte som et barn er begeistret av et nytt leketøy (du har hørt om den nylige diatribe på automatiske verktøy i fronten, ikke?). Vi er så fascinert av nye leker som vi noen ganger bruker, og til og med utvikler, verktøy som ikke løser et reelt problem. Vi vil, RWD er ikke som et nytt leketøy som alle elsker å leke med, uten en god grunn. Det er en metodikk som hjelper oss med å løse virkelige problemer: tilpasse et nettsted for et stort utvalg av skjermer. Men, så mange (alle?) Ting i livet, er det ikke perfekt og har noen begrensninger.
Et av de viktigste åpne problemene er å vise innholdsbilder for et nesten uendelig utvalg av enheter, og prøver å vise den versjonen som passer best for den aktuelle enheten som besøker nettstedet vårt. For de av dere som ikke vet hva innholdsbilder er, er de bildene av innholdet. Derfor bør de vises ved hjelp av bakgrunnsbilde. Så langt har tre hovedforslag blitt gjort, diskutert, avvist, og til og med oppstått (som bilde element). Forslagene er: srcset attributt, bilde element og src-n Egenskap. Alle prøvde å dekke det bredere spekteret av brukssaker som er mulig, men dessverre har ingen av dem blitt helt velkommen av alle involverte aktører. På tidspunktet for denne skrivingen virker det som src-n attributtforslag.
Med tanke på at basert på den nyeste statistikken til HTTPArchive.org, utgjør bilder omtrent 62% av den samlede vekten av nettsiden. Du kan lett forstå at det å løse problemet med innholdsbilder er et hovedproblem, og jo før vi kommer til en løsning , jo bedre. Faktisk vil en forbedring av hvordan og hvilke bilder som blir servert, føre til raskere lasting av nettsteder, noe som igjen vil føre til en forbedring av opplevelsen av nettstedets brukere.
Før jeg går videre, vil jeg understreke at dette fremdeles er et forslag, derfor er spesifikasjonene i en tilstand av fluss, og ingen kan forsikre deg om at
Accentsconagua
Med henvisning til spesifikasjonene, er "bildeelementet ment å gi forfattere en måte å kontrollere hvilken bildressurs en brukeragent presenterer for en bruker, basert på mediesøk og / eller støtte for et bestemt bildeformat". Det "skal brukes når en bildekilde eksisterer i flere tettheter, eller når en responsiv design dikterer et noe annet bilde på enkelte typer skjermer (" art direction ")".
Det foreslåtte elementet er laget av flere stykker som vi skal analysere i detalj. Det første faktum du trenger å vite er at det er ingenting annet enn en beholder for andre elementer der vi faktisk skal spesifisere de forskjellige versjonene av bildet vi vil vise. I et bildeelement kan du finne to koder: kilde elementet har tre attributter tilgjengelige:
srcset: Her er hvor vi spesifiserer nettadressen til bildet vi vil vise. Attributtet tillater flere nettadresser adskilt av et komma. I tillegg tar du cue fra srcset attributtforslag, kan vi koble hver nettadresse med en skjermoppløsning eller en bredde (betraktet som en en minstebredde regel) spesifikasjon. Sistnevnte er skilt fra nettadressen med et mellomrom.media: Her skriver vi en medieforespørsel som, hvis evaluert til sann, vil foreslå til UA for å vise bildet som er angitt i srcset Egenskap.størrelser: Attributtet der vi spesifiserer settet av ekte størrelser for kildene som er beskrevet i srcset Egenskap. Den aksepterer flere størrelser skilt med komma.Inntil nå har vi brukt for mye tid på å snakke og sett noe konkret. La oss fikse dette ved å se noen kode!
Som vårt første eksempel, la oss si at vi utviklet et nettsted med en mobil-første tilnærming. Nå vil vi vise et innholdsbilde og gjøre bildet "mobile.png"som standard, bildet"images_15 / bedre-responsive-bilder-med-the-bilde-element.png"hvis brukerens skjerm er minst 480px, og "desktop.png"hvis brukerens skjerm er minst 1024px. Fordi vi er klare utviklere, vil vi også gjengi bildet "images_15 / bedre-responsive-bilder-med-the-bilde-element.png"for de nettleserne som ikke forstår bilde element. For å oppnå dette målet må vi skrive følgende kode:
I koden ovenfor har vi adoptert piksler som enhet for medieforespørsmålene, men du kan også bruke em hvis du foretrekker det.
Det første viste eksemplet var ganske enkelt. La oss se hvordan vi kan gjøre det mer sofistikert ved hjelp av uttrykksfulle kraften i srcset Egenskap. For eksemplets skyld, forestill deg at i tillegg til de forrige kravene vi vil skille bildene basert på oppløsning på skjermen. Den resulterende koden er oppført nedenfor:
Som du kan se, for hver srcset Egenskap. Den andre nettadressen er parret med strengen 2x, adskilt av et mellomrom, som målretter brukere med en høyoppløselig skjerm (piksel tetthet 2x, som netthinnen). I dette tilfellet vil nettleserne først søke etter kilde element som passer best til brukerens skjerm basert på mediespørsmålet spesifisert (hvis det er noe). Da vil det se på skjermoppløsningen og velge den beste passformen blant bildene som er angitt i srcset Egenskap.
Som vårt siste eksempel ser vi hvordan vi kan ansette størrelser Egenskap. La oss si at vi vil at bildet skal dekke hele bredden på enheten (100% av bredden), uavhengig av den faktiske størrelsen og pikseldensiteten. For å oppnå dette målet kan vi spesifisere størrelsen vi vil dekke og størrelsen på hvert bilde i srcset attributt som vist nedenfor:
I dette tilfellet beregner brukeragenten automatisk den effektive pixeldensiteten til bildet og velger hvilken som skal lastes ned tilsvarende.
Ingen. "Hei Aurelio, hva mener du med ingen? Jeg begynte allerede å oppdatere nettstedet mitt!" Hvis du gjenkjenner deg selv i denne setningen, beklager du å skuffe deg. Som jeg sa flere ganger i denne artikkelen, bilde element er fortsatt et forslag og i et veldig tidlig stadium. Så, må du vente en stund før du har sjansen til å ansette den. Ikke alt er tapt, skjønt. Scott Jehl opprettet en polyfil for dette forslaget kalt picturefill. Sistnevnte ble utviklet for flere måneder siden, men har blitt oppdatert flere ganger for å imøtekomme spesifikasjonene. For tiden er den ikke oppdatert til de nyeste spesifikasjonene, så syntaksen er annerledes enn den som er beskrevet i denne artikkelen. Du kan imidlertid fortsatt se på det og kanskje lage en Pull Request for å hjelpe prosjektet.
I denne artikkelen diskuterte vi spørsmålet om visning av innholdsbilder som passer for enheten som besøker et nettsted. Derefter delved vi inn i spesifikasjonene til bilde element, forslaget som synes å ha lykkes med å forligge nettleservirksomheter, utviklere og alle aktørene som er involvert i prosessen. Dessverre for oss er det på et veldig tidlig stadium, så vi kan ikke bruke det i våre neste prosjekter. Likevel er jeg sikker på at nettleservirksomhetene vil begynne å implementere det snart. Som et siste notat, oppfordrer jeg deg sterkt til å lese og følge spesifikasjonene.
