Master CSS-piksler for Retina-skjermer

Innhold

• 01. Den nitty gritty
• 02. Pakking i piksler
• 03. Designe med stil
• 04. Stille inn oppløsningen
• Likte dette? Les disse!

• Kunnskap som trengs: Grunnleggende HTML5 og CSS
• Krever: Teksteditor, bildeprosessor, HD-smarttelefon eller nettbrett
• Prosjekt Tid: 1 time

Ovenfor er et skjermbilde av et helt Windows 98-skrivebord, circa 1999, på en moderne 24-tommers iMac som kjører OS X Lion; det ser ut som et frimerke. Endringer i skjermoppløsningen påvirker endringer i webdesign. Designere kan nå distribuere en mengde teknikker som ikke er kjent på 90-tallet. Vi bruker godt antydede TFT-kompatible skrifttyper og vertikale rytmer for typografi, og håndverksgitteroppsett mot duodecimale beregninger for ren organisering. Velbalansert bakside og fantastiske logoer kommer fra våre 24-biters fargehjulbaserte paletter og stadig mer komplekse gradientteknikker.

Oppløsningen øker ettersom skjermstørrelser mange steder krymper. Skjermbilder, smarttelefoner og nettbrett med ultrahøy pixeldensitet gir et nytt miljø for å fremme nye teknikker. Men prinsippene for pikseltetthetsteknikker er basert på, er eldre enn mange moderne nettutviklere kan innse.

Gå tilbake i 16 år - en haug med flotte designere satte seg ned for å klekke ut en revolusjonerende plan. CSS var en ny teknologi i 1996, ikke den velprøvde og pålitelige standarden for styling av websider som den er i dag. Planen til CSS-forfatterne var å skille stilinstruksjoner fra avhengighet av enheter. I tillegg til å gjøre det mulig for CSS å utforme nettsider på en skjerm, for eksempel, ønsket de også å kunne utforme trykte nettsider. I den dristige enden la de inn følgende ledd i definisjonen av en piksel:

“Hvis pikseltettheten til utdataenheten er veldig forskjellig fra den for en vanlig dataskjerm, bør UA omskalere pikselverdier. Den foreslåtte referansepikselet er den visuelle vinkelen til en piksel på en enhet med en pikseltetthet på 90 dpi og en avstand fra leseren i en armlengde. For en nominell armlengde på 28 tommer er den visuelle vinkelen omtrent 0,0227 grader. ”

Dette betyr at en 'px' i CSS aldri har betydd en enhetspiksel. Det er heller ikke en lengdeenhet. CSS px er definert som en vinkelmåling.

Dette overrasker noen utviklere, som naturlig antar at en CSS-piksel bare er en enhetspiksel. I praksis kan dette være sant, men detaljene er mer komplekse.

01. Den nitty gritty

Den opprinnelige planen for CSS var å støtte skrivere så vel som skjermer, men det ble snart klart at skjermer også ville endre seg i deres evner. Hvis CSS-piksler bare var enhetspiksler, ville alt vises mindre og mindre over tid etter hvert som skjermoppløsningen økte. Vinkelmålingsdesignen passet ikke bare med utskrift, men med ideen om oppløsningsuavhengighet. Dette forklarer hvorfor påfølgende versjoner av CSS, inkludert den moderne CSS3 i utvikling av leverandører, definerte px som en vinkelmåling. (Den eneste endringen har vært å øke referansepikseltettheten fra 90dpi til 96dpi, noe som gjør CSS-referansepikslen til en litt skarpere vinkel, 0,0213 grader.)

Ettersom px er ikke-lineære vinkler, kan alt med en vinkelmåling mindre enn 180 grader måles i CSS px. Jeremy Clarkson er 6 fot 5 tommer høy. Fra en trygg avstand på 100 meter ser han ut til å være 57,5 ​​px i høyden. Jordens måne er 24,3 px bred når den er full - omtrent en halv Clarkson. Fordi enheten er ikke-lineær, skaleres ikke ting alltid slik du forventer at de skal. 1000px er for eksempel 21,075 grader, men 2000px er 40,813 grader, litt mindre enn dobbelt.

Konverteringene utføres ved hjelp av den magiske figuren 5376 og noen enkle trigonometri. Den magiske figuren kommer fra å multiplisere følgende verdier:

• Referansepikseltettheten, 96ppi. Prikker per tomme kan ofte kalles ppi, piksler per tomme, for skjermoppløsningsformål.
• Avstanden mellom brukeren og skjermen, 28 tommer. Denne avstanden ble en gang kalt en flamsk ell, inne þe oldyn steill mysurementes. En ell er avstanden som en person kan nå.
• Den dimensjonsløse mengden, eller enhetsfritt antall, 2. Vi kaster dette inn for godt mål: den involverte trigonometrien bruker en doblet vinkel, og vi må halvere pikselavstanden før vi dobler vinkelen.

Siden enhetene, der de er brukt, er i gamle imperiale tommer, avbryter de seg i formelen, hvis vinkler måles i radianer i stedet for grader:

vinkel = arctan (px / 5376) × 2
px = 5376 × tan (vinkel / 2)

02. Pakking i piksler

CSS 2.1 gjorde 96ppi til den nye referanseoppløsningen. Skjermene holdt seg imidlertid ikke på 96ppi. IMac-skjermbildet i begynnelsen av denne artikkelen ble tatt på en skjerm som bruker rundt 109 ppi. Hvis referansepikslene ble fulgt på denne enheten, ville det være nødvendig med 1.1354 (109ppi / 96ppi) enhetspiksler for å vise referansepikslene med samme tilsynelatende vinkeldimensjoner som 1px på en 96ppi-enhet. Siden dette ikke er fysisk mulig, fordi pikselet er den minste udelbare skjermenheten, må den være anti-alias. For de fleste applikasjoner vil dette resultere i en uskarp og lite tiltalende gjengivelse.

På grunn av dette introduserte CSS 2.1 - som bare ble en W3C-anbefaling i juni 2011, men som var i utkast i mange år på forhånd - noe tekst som gjorde det klart at referansepikselet kun var ment å brukes som et anker å basere Faktisk verdi. Det anbefaler at px-enheten refererer til “hele antallet enhetspiksler som best tilnærmer seg referansepikselet”. Med andre ord, når en enhet som skal brukes i avstand fra brukeren på 28in, overstiger 144ppi (96ppi × 1,5), så skal den skalere en CSS px til å bety to enhetspiksler. Når den overstiger 240ppi (96ppi × 2,5), skal den skalere en CSS px til å bety tre enhetspiksler; og så videre, et sequentia.

I praksis hadde dette vært uaktuelt uansett, siden det ikke fantes noen skjerm med tilstrekkelig oppløsning for å gjøre mangelen på pixelskalering til et problem for leverandører. Dette betydde at referansepikselet, i det minste utenfor vektorgrafikk, ble betraktet som isomorf med en enhetspiksel.

Den vanlige (mis) oppfatningen av en CSS px som en enhetspiksel ble utfordret i juni 2010, da iPhone 4 ble utgitt med en 326ppi-skjerm. Apples markedsføringsspiel stemplet det som ‘resolusjon’. Åpenbart blir en iPhone sjelden brukt i CSS-standarden 28i borte fra brukeren, og nærmere bruk betyr at piksler ser større ut og den opplevde pikseltettheten går ned. CSS 2.1 anbefalte en oppskalerterskel på 144ppi ved 28in. For iPhone 4s 326ppi, nås den samme tilsynelatende oppfattede pikseltettheten på 12.368in (28in × 144ppi / 326ppi) avstand og utover - veldig nær avstand i faktisk bruk. Så oppskalerterskelen ble nådd.

Til tross for at Apple hevder dessuten å nå det høyeste synlige nivået av pikseltetthet med sin iPhone 4-skjerm på 326ppi, fortsetter produsentene fortsatt å øke densiteten. HTC Rezound (nov 2011) har for eksempel en 342ppi-skjerm, og til og med RIM har utviklet en Blackberry med en 356ppi-skjerm. På mobile enheter hvor kraften er til en premie, er det overraskende at RIM ikke droppet de ekstra 30ppi for å forlenge batterilevetiden. Tidligere var det kameraprodusentene som hadde en oppløsningskrig: kanskje finner mobilprodusenter nå oppløsning for å være en ny salgbar formfaktor.

Uansett årsak fortsetter pikseltettheter og oppløsninger å øke. Med CSS 2.1 oppskaleringsterskel nådd, måtte oppskalering skje. Hvordan leverandører gjorde dette varierte. Apple bestemte seg for å oppskalere bilder på nettet for tredje generasjons iPad, for eksempel med et enkelt 2x-forhold. Et enkelt pikselbilde (1 × 1) vil vises på den enheten ved hjelp av fire (2 × 2) fysiske enhetspiksler. Andre, for eksempel de som bruker Android, oppskalerer ved hjelp av forskjellige forhold, ofte rundt 1,5x eller 1,6x. Brukere kan også skalere sider på enkelte enheter ved å zoome inn på egendefinerte nivåer. På grunn av disse faktorene kan bilder virke uskarpe på noen av disse enhetene.

03. Designe med stil

En løsning er å bruke CSS. Her vil vi returnere full sirkel til ideen som ligger i den originale utformingen av CSS px som en oppløsningsuavhengig enhet. Men fordi vinkelmålingskarakteristikken til CSS px nå er temperert av det eksklusive ankeret, måtte evnen til å håndtere oppløsningen skodes i andre steder. Det mest fornuftige stedet å håndtere det var som et nytt mediespørsmål. Et mediespørsmål er en betingelse som bare tillater at visse stilarkregler brukes hvis betingelsen er oppfylt av den gjengivende brukeragenten.

Siden nettleserleverandører i disse dager har en fast vane med å innovere i helt forskjellige retninger til hverandre, for å si det høflig, er det minst fire forskjellige @media løsninger. Utviklere kan trenge å bruke enda mer enn det bare for å være trygge. En brukes av WebKit, en annen av Mozilla og en av Opera. Det ser ennå ikke ut til å være en publisert løsning for IE10. Den andre løsningen er den som er gitt i CSS3-spesifikasjonen, som er nær å være en W3C-anbefaling. CSS3-spesifikasjonen bruker en annen ordning fra Mozilla - til tross for at den er redigert av en Mozilla-ansatt!

@media (-webkit-min-device-pixel-ratio: 1.5) {/ * WebKit * /}
@media (min - moz-device-pixel-ratio: 1.5) {/ * Mozilla * /}
@media (-o-min-device-pixel-ratio: 3/2) {/ * Opera * /}
@media (min oppløsning: 1.5dppx) {/ * CSS3 * /}

Mozilla-varianten er ikke det -moz-min-enhet-piksel-forhold som forventet. For maksimal kompatibilitet i flere nettlesere må du bruke noe som dette:

Overskrift {
bakgrunn: url ([email protected]);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
bare skjerm og (-moz-min-enhet-piksel-forhold: 2),
bare skjerm og (-o-min-enhet-piksel-forhold: 2/1),
bare skjerm og (min-enhet-piksel-forhold: 2),
bare skjerm og (min oppløsning: 2dppx) {
Overskrift {
bakgrunn: url ([email protected]);
bakgrunnsstørrelse: 50%;
}
}

Dette eksemplet vil sette bakgrunnsbildet til et topptekstelement til å bruke en enhetspiksel på 1dppx- og 2dppx-skjermene, men vil fremdeles føre til potensielt uklare resample-basert oppskalering på enheter som bruker en pikseltetthet mellom disse verdiene. Vi må bruke min-enhet-piksel-forhold også i tilfelle CSS3 avgjør det i stedet for, eller så vel som nåtiden min oppløsning. Når en nettleser har flere piksler tilgjengelig enn det som vanligvis kan gjengis med fire prikker per pikselområde, bruker den ganske enkelt en prikk per pikselområde, eller den sampler bildet. Denne løsningen retter seg bare mot moderne nettlesere som støtter disse funksjonene, men vi forventer uansett å finne moderne nettlesere på moderne høydensitetspikselenheter.

Omskalering er gjort ved å sette størrelsen på bildet til 50%. For standardbilder kan du også stille inn høyde- og breddeattributter på riktig måte for å skalere innholdet. HTML5-spesifikasjonen advarer mot denne teknikken og sier "dimensjonsattributter er ikke ment å brukes til å strekke bildet", men øvelsen er vanlig. I CSS3 kan du fortsatt bruke en annen teknikk i stedet.

04. Stille inn oppløsningen

I forbindelse med @media teknikk introduserer CSS3 en ny egenskap som heter bildeoppløsning, som kan endre oppløsningen på bestemte bilder. Det kan betraktes som en slags tilpasset skalering av bildet. Dessverre for utviklere som nå må målrette enheter mot og mellom 1–2dppx, bildeoppløsning egenskapen er ikke bare adaptiv: den gjør ingenting proporsjonalt med enhetspikseloppskalering. Dette betyr at denne teknikken fortsatt må brukes i mediespørsmål. Siden bildeoppløsning gjelder riktig for bakgrunnsbilder så vel som primært innhold, slik kan overskriftsregelen del spesifikt fra eksemplet på mediespørringen ovenfor skrives med den nye egenskapen:

Overskrift {
bakgrunn: url ([email protected]);
bildeoppløsning: 2dppx;
}

Vi kunne også ha brukt 192dpi i stedet for 2dppx: de har et fast forhold på grunn av CSSs 96dpi referanse piksel tetthet bestemmelse. Men som en av hovedfordelene med denne syntaksen er å gjøre det klart hva utviklerne satser på, er bruk av 2dppx en mer fornuftig best praksis i dette tilfellet.

Siden bildeoppløsning er bare en projisert funksjon i CSS3, det er lite sannsynlig å ha bred nettleserstøtte på kort sikt, og leverandører kan velge å implementere utallige alternative syntakser uansett som de gjorde med min oppløsning eiendom.

Å bruke CSS er ikke den eneste måten å imøtekomme nye pikseltettheter. Det er utallige klient- og serversiden, shims og polyfills for å oppnå det samme målet. Noen bruker JavaScript og inspiserer window.devicePixelRatio for å utføre trolldom. Men dette problemet ble forutsett i CSS til en viss grad tilbake i 1996. Spesifikasjons- og implementeringsbasert innovasjon har blitt varmere i lys av utfordringer fra nyere displayteknologier, men CSS er fortsatt en levedyktig, om ikke optimal løsning for løsningsuavhengighet.

Denne artikkelen dukket først opp i utgave 230 av .net magazine.

Sean B. Palmer inamidst.com er en tidlig moderne historiker, med en informatisk bakgrunn. Han har vært redaktør av W3Cs spesifikasjoner for EARL 1.0 og XML-tilgjengelighetsretningslinjer, og har bidratt til bøker om HTML, JavaScript og det semantiske nettet.

Likte dette? Les disse!

• Gratis programvare for grafisk design tilgjengelig for deg akkurat nå!
• Strålende Wordpress opplæringsvalg
• Lag et perfekt humørbrett med disse pro-tipsene