Mediatyypit ja mediakyselyt

ITKP1011 Web-julkaiseminen · pääteohjaus 5 · korjattu laitos

Näissä tehtävissä harjoitellaan CSS:n mediatyyppejä ja mediakyselyjä. Nanonanon sivustolle tehdään oma ulkoasu tulostusta varten, sovitetaan sivu kapealle näytölle ja lisätään tuki selaimen tummalle tilalle. Kaikki tehdään samaan ohjaus3.css-tiedostoon.

• Mallivastaus
• Aihe on käsitelty mediatyyppien ja mediakyselyjen luennolla.

1. Alkuvalmistelut

1. Viimeistele ohjaus 4:n tehtävät, jos ne jäivät kesken. Voit myös jatkaa sen mallivastauksesta.

2. Varmista, että jokaisen sivun head-osassa on viewport-määritys:

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

   Ilman sitä mobiililaite olettaa sivun olevan noin 980 pikseliä leveä ja kutistaa sen näytölleen, jolloin tekstistä tulee lukukelvottoman pientä eivätkä mediakyselyt osu oikein.

3. Avaa ohjaus3.css editoriin. Kaikki tämän ohjauksen tyylit kirjoitetaan sen loppuun.

2. Tulostustyylit

Tulostettu sivu on eri media kuin näyttö. Navigointia ei voi klikata paperilla, taustavärit kuluttavat mustetta ja linkkien osoitteet eivät näy mitenkään.

1. Lisää tyylitiedoston loppuun tyhjä medialohko. Kirjoita kaikki seuraavat tyylit sen sisään, jolloin ne ovat voimassa vain tulostettaessa:

   @media print {
   
   }

2. Piilota se, mikä ei toimi paperilla. Nanonanon sivustolla molemmat navigoinnit:

   .navbartop, .navbar {
     display: none;
   }

   Kun navigointi katoaa, sen viemä tila vapautuu. Jos sisällölle on asetettu leveys tai marginaali navigoinnin takia, poista ne tulostuksessa.

3. Varmista tummat kirjaimet vaalealla pohjalla. Jos sivulla on taustavärejä, ne kannattaa poistaa tulostuksesta:

   body {
     background-color: #ffffff;
     color: #000000;
   }

4. Määrittele marginaalit. Voit tehdä sen body-elementille tai @page-säännöllä, joka on tarkoitettu juuri tähän ja on nykyään tuettu kaikissa yleisissä selaimissa:

   @page {
     margin: 1.5cm;
   }

   Muista, että määrittelemäsi marginaalit tulevat käyttäjän omien tulostusasetusten lisäksi, joten kovin suuria ei kannata asettaa.

5. Hallitse sivunvaihtoja. Tavallisin ongelma on otsikko, joka jää yksin sivun alalaitaan, tai kuva, joka katkeaa kahdelle sivulle.

   Sivunvaihto-ominaisuudet.

   Ominaisuus	Merkitys
   break-before	Sivunvaihto ennen elementtiä
   break-after	Sivunvaihto elementin jälkeen
   break-inside	Sivunvaihto elementin sisällä

   Tavallisimmat arvot ovat auto (oletus), avoid ja page (pakota vaihto).

   Kiellä sivunvaihto otsikkoelementtien jälkeen ja niiden sisällä, sekä kuvalohkon sisällä. Poista samalla kuvan liu'utus, koska paperilla se ei ole tarpeen.

   Vanhat page-break-*-ominaisuudet

   Vanhoissa ohjeissa käytetään ominaisuuksia page-break-before, page-break-after ja page-break-inside. Ne toimivat yhä, koska selaimet muuntavat ne uusiksi, mutta kirjoita mieluummin break-*. Huomaa myös, että vanha arvo always vastaa uutta arvoa page.

   Varo kirjoitusvirhettä valitsinlistassa

   Jos kirjoitat h1, h2, h3, 4 { ... }, koko sääntö hylätään, koska 4 ei ole kelvollinen valitsin. Yksi virheellinen valitsin pilkkulistassa mitätöi kaikki muutkin. Mitään virheilmoitusta ei tule, ja sääntö vain ei vaikuta mihinkään. Tarkista valitsimesi, jos tulostusasu ei muutu.

6. Näytä linkkien osoitteet. Paperilla linkkiä ei voi klikata, joten osoite kannattaa tulostaa näkyviin:

   main a[href^="http"]::after {
     content: " (" attr(href) ")";
     font-size: 0.9em;
   }

   Attribuuttivalitsin ja ::after-pseudoelementti eivät kuulu tämän kurssin valitsinluentoon, joten voit kopioida säännön sellaisenaan. Ne on selitetty valitsinten jatkomateriaalissa.

2.1 Tulostustyylien testaaminen

Esikatselun avaaminen kerta toisensa jälkeen on hidasta. Kehittäjätyökaluista voi pakottaa tulostusmedian päälle, jolloin sivu näkyy tulostustyyleillä selainikkunassa ja sitä voi tutkia elementtinäkymässä normaalisti.

1. Avaa kehittäjätyökalut F12-näppäimellä.

2. Avaa elementtinäkymä eli Tarkastelu. Sääntöpaneelin yläreunassa on @-painike, josta avautuu valikko mediaominaisuuksien jäljittelyyn. Valitse sieltä tulostusmedia. Samasta valikosta säädetään myös prefers-color-scheme- ja prefers-reduced-motion-asetukset.

   Chromessa ja Edgessä sama löytyy komentopaletista hakusanalla Emulate CSS media type: print.

3. Tarkista lopuksi oikealla esikatselulla (Ctrl+P), miltä tuloste näyttää.
4. Kokeile myös Nanonanon etusivua ja galleriasivua. Mitä niissä pitäisi vielä muuttaa?

3. Kapea näyttö

Nanonanon sivusto on tehty liu'utuksella: navigointi on 20 prosentin levyisenä oikeassa laidassa. Puhelimen näytöllä se tarkoittaa noin 70 pikselin levyistä palstaa, mikä on käyttökelvoton. Puretaan asettelu kapealla näytöllä.

1. Lisää tyylitiedoston loppuun uusi medialohko:

   @media (max-width: 40em) {
   
   }

   Kysely on voimassa, kun näkymäikkuna on enintään 40 em leveä, mikä on tavallisella asetuksella noin 640 pikseliä.

   Miksi em eikä px?

   Mediakyselyssä 1em tarkoittaa aina selaimen oletusfonttikokoa, eikä siihen vaikuta se, mitä olet määritellyt html- tai body-elementille. Katkaisukohta seuraa siis käyttäjän omaa asetusta: jos hän on suurentanut selaimensa fonttikokoa, asettelu vaihtuu aikaisemmin. Pikselimittainen katkaisukohta ei ota tätä huomioon.

   Huomaa myös, ettei all and ole tarpeen. @media (max-width: 40em) riittää ja on luettavampi.

2. Pura liu'utus. Navigointi ja kuvalohkot asettuvat allekkain, kun kelluminen poistetaan ja leveys palautetaan:

   .navbar {
     float: none;
     width: 100%;
     margin-left: 0;
   }

   Tee sama gallerian kuvalohkoille. Kun lohkot ovat allekkain, järjestys määräytyy HTML-tiedoston mukaan — tämä on yksi syy siihen, miksi sisältö kannattaa kirjoittaa koodiin siinä järjestyksessä kuin se on tarkoitettu luettavaksi.

3. Estä vaakavieritys. Tavallisimmat syyt siihen ovat liian leveä kuva, taulukko tai koodilohko:

   img {
     max-width: 100%;
     height: auto;
   }
   
   table, pre, textarea {
     max-width: 100%;
   }
   
   pre {
     overflow-x: auto;
   }

4. Pienennä marginaalit. Kapealla näytöllä 5 prosentin sivumarginaalit vievät turhaa tilaa. Laske ne pienemmiksi myös muualta kuin body-elementiltä.
5. Palauta murupolku listaksi. Vaakarivissä oleva murupolku erotinviivoineen ei mahdu kapealle näytölle. Muuta display-arvoksi list-item ja poista erotinviivat.

6. Säädä otsikkojen koot. Suuri h1 vie kapealla näytöllä useita rivejä. Pienennä otsikoita maltillisesti rem-yksikköä käyttäen.

   Älä pienennä leipätekstiä

   Otsikoita voi pienentää, mutta leipätekstiä ei. Puhelinta pidetään yhtä kaukana silmistä kuin kirjaa, ja pieni näyttö on jo valmiiksi vaativampi luettava. Riviväliäkään ei kannata tiukentaa: 1.5 on hyvä myös kapealla näytöllä.

3.1 Testaaminen

1. Avaa laitenäkymä: Ctrl+Shift+M sen jälkeen, kun kehittäjätyökalut on avattu F12-näppäimellä. Valikosta kohta löytyy Firefoxissa Työkalut → Selaintyökalut -valikosta.
2. Testaa vähintään 360 pikselin leveydellä. Tuleeko vaakavierityspalkkia? Mahtuuko kaikki sisältö näkyviin?
3. Vedä ikkunan reunaa hitaasti kapeammaksi ja katso, missä kohtaa asettelu vaihtuu.
4. Kokeile kaikki sivut: etusivu, artikkelit, galleria, linkit ja opiskelu. Opiskelusivun taulukko ja pre-lohko ovat tavallisimmat vaakavierityksen aiheuttajat.
5. Testaa myös omalla puhelimellasi, jos sivusto on jo palvelimella.

4. Tumma tila

Käyttöjärjestelmissä on asetus, jolla valitaan vaalea tai tumma tila. prefers-color-scheme-mediakyselyllä sivu voi seurata sitä. Tämä on helppo toteuttaa ja näkyy käyttäjälle heti.

1. Kerro ensin selaimelle, että sivu tukee molempia tiloja. Lisää tämä perustyylien puolelle, ei medialohkoon:

   :root {
     color-scheme: light dark;
   }

   Näin myös lomakekentät, vierityspalkit ja muut selaimen omat osat mukautuvat.

2. Lisää tyylitiedoston loppuun medialohko:

   @media screen and (prefers-color-scheme: dark) {
   
   }

   Miksi screen and?

   Ilman sitä tummat tyylit koskisivat myös tulostusta, jos käyttäjällä on tumma tila päällä. Tuloksena olisi musta paperi. Rajaamalla kyselyn screen-mediaan tulostustyylit säilyvät koskemattomina.

   Vaihtoehtoisesti voit kirjoittaa @media print -lohkon viimeiseksi, jolloin se voittaa kirjoitusjärjestyksen perusteella. Selkeämpää on kuitenkin sanoa se ääneen valitsimessa.

3. Määrittele tummat värit. Vaihda vähintään sivun tausta ja tekstin väri, navigointien värit sekä linkkien värit. Esimerkiksi:

   body {
     background-color: #1c1a17;
     color: #e9e5dd;
   }

4. Kokeile tulosta. Asetusta voi vaihtaa käyttöjärjestelmästä, mutta nopeampaa on jäljitellä sitä kehittäjätyökaluissa. Firefoxin elementtinäkymän sääntöpaneelissa on kaksi suoraa painiketta: Toggle light color scheme emulation for the page ja Toggle dark color scheme emulation for the page. Sama asetus löytyy myös @-painikkeen valikosta yhdessä tulostusmedian ja prefers-reduced-motion-asetuksen kanssa.

   Chromessa ja Edgessä sama tehdään komentopaletista hakusanalla Emulate CSS prefers-color-scheme.

5. Lopputarkistus

1. Validoi tyylitiedosto CSS-validaattorilla.
2. Tarkista tuloste esikatselussa.
3. Tarkista sivu 360 pikselin leveydellä: ei vaakavieritystä, kaikki sisältö näkyvissä.
4. Suurenna tekstin kokoa 200 prosenttiin (Ctrl++). Pysyykö sivu kasassa? Huomaa, että em-katkaisukohta reagoi tähän.
5. Liiku sarkaimella. Näkyykö kohdistus myös tummassa tilassa?
6. Tarkista kontrastit vaaleassa ja tummassa tilassa.
7. Varmista, ettei mitään sisältöä ole kadonnut kapealla näytöllä. Erityisesti: löytyykö etusivulle vievä linkki?

6. Lisätehtäviä

6.1 Sama asia mobile first -tavalla

Tehdään pienoiskoossa se, mitä luvussa 3 tehtiin toisin päin. Nanonanon sivustoon ei tässä tehtävässä kosketa lainkaan, vaan rakennetaan erillinen koesivu.

1. Luo uusi tiedosto W:\www\koe.html ja kirjoita siihen yksinkertainen sivu, jossa on kolme lohkoa: otsake, navigointi ja sisältö.

   <body>
     <header><h1>Koesivu</h1></header>
     <nav>...muutama linkki...</nav>
     <main>...tekstiä...</main>
   </body>

2. Kirjoita samaan tiedostoon style-elementti. Kirjoita perustyyli kapealle näytölle ilman yhtään mediakyselyä. Lohkot ovat allekkain, marginaalit pienet, kuvat max-width: 100%.

3. Lisää sitten leveämmän näytön ominaisuudet:

   @media (min-width: 40em) {
     nav {
       float: right;
       width: 20%;
     }
   
     body {
       margin: 1% 5%;
     }
   }

4. Vertaa lopputulosta lukuun 3. Montako riviä tarvitsit? Kummassa jouduit kumoamaan aiempia määrityksiä?
5. Kokeile, mitä tapahtuu, kun kommentoit koko medialohkon pois. Tee sama Nanonanon sivuston max-width-lohkolle. Kumpi sivu on käyttökelpoisempi ilman mediakyselyjään?
6. Vertaa lopuksi omaa ratkaisuasi malliratkaisun koesivuun, joka on mallivastauspaketissa nimellä koe.html.

6.2 Liikkeen vähentäminen

Jos lisäsit sivustolle animaatioita tai siirtymiä, kunnioita käyttäjän asetusta:

@media (prefers-reduced-motion: no-preference) {
  .kortti {
    transition: transform 0.3s ease;
  }
}

Huomaa, että liike määritellään kyselyn sisään, ei sen ulkopuolelle. Näin oletus on liikkumaton ja turvallinen myös selaimissa, jotka eivät tue kyselyä. Katso mediatyyppiluennon luku 3.2.

6.3 Erillinen tyylitiedosto

Mediakyselyn voi kirjoittaa myös link-elementtiin:

<link rel="stylesheet" href="tulostus.css" media="print" />

Kokeile siirtää tulostustyylit omaan tiedostoonsa. Huomaa, ettei tämä säästä latausaikaa: selain lataa kaikki linkitetyt tyylitiedostot joka tapauksessa, vain niiden soveltaminen riippuu ehdosta. Kumpi tapa on mielestäsi helpompi ylläpitää?