visningsområde

den delen av en side et vindu faktisk viser

Hva det er

Et visningsområde, i bestemt form visningsområdet og på engelsk viewport, er rektangelet en nettleser legger ut et dokument i og maler det inn i: på en skjerm flaten innenfor vinduets egne verktøylinjer, på papir sideområdet på hvert ark. CSS måler mot det hele tiden. Den innledende inneholdende blokken, boksen rotelementet legges ut i, får størrelsen sin fra det, en media query på width eller height spør om det, og enhetene vw og vh er hundredeler av det. På en telefon trenger ordet en presisering, også i flertall, og spesifikasjonene har flere å by på: layout, visuelt, lite, stort og dynamisk.

På en stasjonær maskin er visningsområdet og vinduet nesten det samme. På en telefon skilles de. Fordi så mange dokumenter ble laget for vinduer på stasjonære maskiner, legger mobilnettlesere ut en side som ikke gir noen instruksjoner, i en fast bredde som etterligner et slikt vindu, ifølge CSS Viewport-spesifikasjonen typisk 980–1 024 CSS-piksler, og skalerer resultatet ned til det får plass på glasset. En side melder seg ut av dette med ett element i head, som godtar width, height, tre grenser for skalering, user-scalable og interactive-widget:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Zoom deler visningsområdet i to. Layout-visningsområdet er det CSS legger ut siden mot, og knipezoom lar det være i fred, så linjeskiftene blir stående. Det visuelle visningsområdet er den delen av siden som er på glasset akkurat da: det krymper når leseren zoomer inn, og glir når vedkommende panorerer. Som standard krymper et skjermtastatur bare det visuelle visningsområdet; interactive-widget=resizes-content ber nettleseren endre størrelsen på layouten også, og overlays-content ber den endre ingen av dem.

Telefoner legger dessuten til verktøylinjer som glir bort. Adressefeltet tar plass når en side lastes, og trekkes inn når leseren ruller, så den synlige høyden endrer seg under en side som ikke har flyttet seg. CSS Values 4 gir tre størrelser navn for dette: det store visningsområdet antar at hver inntrekkbar verktøylinje er trukket inn, det lille antar at alle vises, og det dynamiske følger det som faktisk er tilfellet. Enhetene bærer forleddene, lvh, svh og dvh, med tilsvarende bredder, og vanlige vh og vw er definert mot det store visningsområdet. Et grensesnitt som legger seg over innholdet uten å flytte det, typisk skjermtastaturet, endrer ingen av disse lengdene.

Hvorfor det er viktig

Responsiv design bygger på visningsområdet. Hvert brytpunkt i et stilark er et spørsmål om bredden, så en side som utelater meta-elementet, legges ut i stasjonær bredde på en telefon og krympes til teksten ikke lar seg lese, uansett hvor nøye media queries er skrevet.

Høyden er den vanskelige aksen. Bredden står stille bortsett fra når skjermen roteres; høyden endres når verktøylinjen glir, når tastaturet åpnes og når telefonen snus, så alt som tar mål av skjermens høyde, må si hvilken høyde det mener. Det lille visningsområdet passer alltid og etterlater en stripe tom plass når verktøylinjene trekkes inn. Det store fyller skjermen og legger innhold bak verktøylinjene mens de vises. Det dynamiske er eksakt, og spesifikasjonen advarer selv om at det kan endre størrelsen på innhold mens leseren ruller, noe som flytter alt som ligger under.

Skjermer har også hjørner. En telefon med avrundede hjørner eller en utsparing for kameraet er ikke et rektangel, og med standardverdien, auto, forblir hele siden synlig på den. Å legge til viewport-fit=cover ber om at visningsområdet skal være rektangelet som tegnes rundt hele den fysiske skjermen, og gir siden jobben med å holde teksten unna utsparingen ved hjelp av variablene env(safe-area-inset-*). Disse innfelte avstandene skal være null på en rektangulær skjerm, så én regel for indre marg dekker begge typer.

Fast posisjonering henger også på visningsområdet. En boks med fast posisjon plasseres mot layout-visningsområdet, som CSS Positioned Layout gir samme størrelse som det dynamiske visningsområdet, så bannere om informasjonskapsler, bakteppet bak modale vinduer og menyer i full skjerm står stille mens siden ruller. Hver av dem forutsetter at ingen forelder har tatt over den rollen, og transform, will-change og contain kan gjøre nettopp det.

Utskrift er det visningsområdet et stilark bare for skjerm aldri møter. På papir måler visningsområdeenhetene sideområdet, en media query på width spør om sideboksen, og et element med fast posisjon gjentas på hvert ark.

Slik ser det ut i praksis

Sidene på dette nettstedet deklarerer width=device-width, initial-scale=1, viewport-fit=cover, så de legges ut i telefonens bredde og går fra kant til kant under et kamerahakk. Stilarket betaler for den andre halvdelen: den indre margen på sidene er max(1rem, env(safe-area-inset-left)) og tvillingen for høyre side, så teksten holder en rem fra kanten og flyttes lenger inn bare der det finnes en utsparing. På lave skjermer i liggende format hever gulvet seg til max(2rem, 7vw, env(safe-area-inset-left)), siden de innfelte avstandene er null på en telefon uten utsparing, og én rem lå for nær kanten.

Seksjoner i full skjerm henter høyden fra en felles variabel satt til 100dvh, med 100vh som reserve, og kommentaren ved siden av forklarer hvorfor: 100vh kan være høyere enn det som vises mens adressefeltet er ute, og hadde latt neste seksjon titte fram under toppbildet. To elementer overser variabelen med vilje. Merket i toppfeltet er dimensjonert i statisk vh, fordi et merke knyttet til det dynamiske visningsområdet ville endret størrelse når verktøylinjene gled bort, og brutt om toppbildet midt i en rulling. Den faste bakgrunnen på berøringsskjermer er 100lvh høy, så den aldri endrer størrelse når adressefeltet kommer og går, og den ligger på sitt eget komposisjonslag, fordi nettlesere på berøringsskjermer rev den opp i lyse og mørke bånd når siden rullet videre av egen fart.

Hver tjenesteblokk på forsiden er minst 100dvh høy, noe som leses som én blokk per skjerm så lenge innholdet er kortere enn skjermen. Ved 852 ganger 393 piksler blir innholdet i en blokk 412 piksler høyt, og blokkene støtte rett mot hverandre. Indre marg innenfor de 100dvh, gjennom box-sizing: border-box, koster ingenting på en høy skjerm og åpner et mellomrom først når innholdet renner over.

Testingen følger media queries. Nettstedets nettleserdrevne kvalitetsport utvidet sjekkene sine til en felles viewport-tabell med tjueto vindusformer, utledet fra hver media query i stilarket, og det alene tok layoutsjekken fra 95 sekunder til 405.

Utskrift avslørte motorene. Utskriftsstilarket dokumenterer at visningsområdeenheter løses opp mot sideboksen i én motor og mot vinduet i en annen, så en side skrevet ut fra et bredt vindu fikk en tredjedel av hver linje kuttet bort i den andre. Stilarket for selve toppfeltet dokumenterer den andre siden av det samme gapet, den som gjelder media queries: utskriften beholdt vinduets retning, høyde og bredde, så ark skrevet ut fra et bredt og et smalt vindu fikk toppfelt med 47 piksler forskjell, inntil screen and foran uttrykket begrenset regelen til vinduer.

Fellen med den inneholdende blokken er også dokumentert. Arbeidet med redusert bevegelse fant at fem ulike egenskaper hver for seg gjør et element til inneholdende blokk for alt som er posisjonert relativt til visningsområdet, og at dette i det stille hadde krympet et lukkelag til en brøkdel av skjermen.

Hvor det går galt

Telefonen viser en bitteliten stasjonær side. Uten meta-elementet for visningsområdet legger nettleseren ut siden i en stasjonær bredde og skalerer den ned, og media queries ser den bredden. Legg til width=device-width, initial-scale=1, og la zoom være på: user-scalable=no tar fra leseren den egne måten å forstørre liten tekst på.

En seksjon i full skjerm går forbi bunnen av skjermen. 100vh er det store visningsområdet, så mens adressefeltet er ute, ligger bunnen av seksjonen bak det, sammen med enhver skjermknapp som er plassert der. Bruk svh for et element som alltid må få plass, og dvh bare der det er akseptabelt at størrelsen endres midt i en rulling.

Et overlegg i full skjerm krymper til en boks inne i siden. En forelder med transform, med will-change som nevner en slik egenskap, eller med inneslutning (containment) blir inneholdende blokk for position: fixed, og overlegget tar størrelsen fra den forelderen. Gjengi overlegg utenfor ethvert transformert element.

En utskrevet side mister slutten av hver linje. Visningsområdeenheter og media queries som er tilpasset vinduet, lekker inn i utskriften, og en motor som løser dem opp mot vinduet, legger arket ut for en skjerm. Hold visningsområdeenheter unna alt som skal skrives ut, og sett screen and foran media queries som er ment for vinduer.

Les mer

Ordliste