Mediatyypit ja mediakyselyt
Näissä tehtävissä harjoitellaan CSS:n mediatyyppejä tekemällä Nanonanon kotisivuille oma ulkoasu tulostusta ja Lisäksi tehdään mediakyselyillä oma tyylitiedosto mobiililaitteita varten.
Tulostus (print)
CSS-ulkoasupohjan päälle voi tarvittaessa tehdä lisä- tai muutosmäärityksiä erilaisten medioiden tarpeisiin. Tehdään omat tyylit tulostamista varten.
- Avaa tekstieditorilla Nanonanon sivustolla oleva artikkelit/it-dokumentti
- Varmista, että tiedostossa jo oleva link-elementti sisältää myös media-attribuutin, jonka arvo on all. link-elementin pitäisi siis näyttää seuraavanlaiselta:
<link rel="StyleSheet" href="../../demo2.css" type="text/css" media="all" />
- Avaa Firefoxilla sama dokumentti ja siirry muokkaamaan tyylejä valitsemalla Tools|Web developer|Style Editor tai SHIFT+F7-näppäinyhdistelmällä.
- Lisää jo olemassaolevien tyylien perään uusi medialohko:
Kirjoita kaikki seuraavat tyylit print-medialohkon sisään niin ne ovat voimassa vain tulostettaessa@media print { }
-
Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen
kannalta turhat elementit (navigoinnit, koristelohkot jne.) eli Nanonanon sivujen
tapauksessa .navbartop- ja .navbar-lohkot. Piilottaminen
onnistuu display-ominaisuuden avulla:
Piilotetuilta lohkoilta vapautuu useasti tilaa (riippuu asemointitavasta), joten anna mahdollisesti vapautunut tila käyttöön sisällölle. Tämä onnistuu kasvattamalla sisällön leveyttä ja poistamalla sisällölle mahdollisesti asetetut marginaalit. Nanonanon sivuston tapauksessa tilaa ei kuitenkaan vapaudu, joten muutoksia ei tarvitse tehdä..navbartop, .navbar { display: none; }
- Määritellään tulostukseen sopivat marginaalit body-elementille:
Määrittele haluamasi marginaalit. Oikeampi tapa olisi käyttää @page-valitsinta, mutta sitä kaikki selaimet eivät tue. Lisäksi täytyy muistaa, että määritellyt marginaalit tulevat käyttäjän omien tulostusasetusmarginaalien lisäksi, joten kovin isoja marginaaleja ei kannata laittaa.body { margin-top: 0.5cm; margin-left: 0.5cm; margin-right: 0.5cm; margin-bottom: 0.5cm; }
-
Tulostettaessa ongelmana voi olla esimerkiksi keskelle otsikkotekstiä tai kuvaa osunut sivunvaihto. Tätä
ongelmaa voi yrittää välttää page-break-before, page-break-inside
ja page-break-after-ominaisuuksilla:
- page-break-before määrää tehdäänkö sivunvaihto ennen lohkoa (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- page-break-inside määrää vältetäänkö sivunvaihtoja lohkon sisällä (avoid). Oletusarvo on auto.
- page-break-after määrää tehdäänkö sivunvaihto lohkon jälkeen (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- Varmista vielä Firefoxin Print Preview -toiminnolla (tulostuksen esikatselu), miten sivun tulostusasu muuttui.
- Kokeile miltä Nanonanon sivuston etusivu näyttäisi tulostettaessa. Mitä tulostusasetuksiin voisi vielä lisätä?
Tyylitiedosto mobiililaitteille
WWW-sivuja selataan yhä enemmän kännyköillä ja muilla pienillä vempaimilla. Näiden laitteiden suurin rajoitus on pieni näyttö. Sopivilla CSS-asetuksilla saadaan Nanonanon sivu näkymään hienosti myös mobiililaitteissa.
- Lisää it-dokumentin head-osaan seuraava rivi:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Tämä rivi neuvoo mobiililaitetta noudattamaan sivun omia tyylejä. Jos emme määrittelisi omia mobiilityylejä niin silloin tätä riviä ei tarvittaisi, vaan mobiililaite itse päättelisi millä tavalla sivu kannattaa skaalata pieneen näyttöön.
- Lisää CSS-tiedostoon uusi lohko, joka näyttää seuraavalta:
@media all and (max-width: 600px) { }
Tässä käytetään apuna mediakyselyitä eli rajataan tämä tyylitiedosto käyttöön vain selaimissa joiden ikkunan leveys on alle 600 pikseliä.
Samaan tapaan html-tiedostoon voisi lisätä myös useita css-tiedostoja ja määrätä suoraan link-elementin yhteydessä mihin mediaan kyseinen css-tiedosto soveltuisi. Esim.:
<link href="../mobiili.css" rel="StyleSheet" media="all and (max-width: 600px)" type="text/css" />
Käytetään tällä kerralla samaa tiedostoa kaikille medioille.
- Muokkaa uuteen medialohkoon sopivat CSS-säännöt, joilla saat sivun näyttämään siistiltä kapeassa ja matalassa selaimessa.
- Mallia muotoiluihin voit katsoa esim. tämän kurssisivuston
handheld.css-tiedostosta.
Huomioi erityisesti seuraavat seikat:
-
Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia.
Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:
img { max-width: 100%; }
- Mobiililaitteiden näytöt ovat pieniä, joten säädä sivun marginaalit minimiin. Poista turhat marginaalit myös muualta kuin body-elementiltä.
- Poista näkyvistä mahdolliset epäoleelliset osat (esimerkiksi koristelohkot) sivuilta.
Anna mahdollinen poistetuilta lohkoilta vapautunut tila käyttöön muille lohkoille
(lähinnä sisällölle) kasvattamalla näiden lohkojen leveyttä esimerkiksi seuraavalla tavalla:
width: 100%;
Nanonanon sivuston tapauksessa turhia koristelohkoja ei kuitenkaan ole, joten muutoksia ei tarvitse tehdä.
- Poista kaikki alkuperäiset asemoinnit ja tee tarvittaessa asemointi uudelleen niin, että
kaikki lohkot varmasti mahtuvat pieneen näyttöön (ilman sivuttaisia vierityspalkkeja).
Yleensä lohkot kannattaa siis sijoittaa mobiililaitteissa päällekkäin
järjestyksen määräytyessä HTML-tiedostossa.
Jos käytössä on float-asemointi (kuten Nanonanon sivustolla), niin asemoinnin (liu'utusten) poistaminen tapahtuu seuraavasti:
float: none;
Asemoinnin poistamisen jälkeen lohkojen ollessa päällekkäin, kannattaa varmistaa, että jokainen lohko saa käytettäväkseen leveyssuunnassa 100 % tai ainakin arvon, joka on lähellä sitä. Näin vältetään turhaa tekstin rivittymistä.
- Muuta leivänmurunavigointi takaisin tavalliseksi listaksi.
- Muuta sivun otsikoiden, tekstikappaleiden ja listojen kirjasinkoot järkeviksi, esim. h1-elementin kirjasinkoko voisi olla 120% ja h2 sekä h3 jotain 100%:n ja 120%:n väliltä. Tekstikappaleiden ja listojen koko voi olla vielä hieman pienempi.
- Pienennä riviväli lähelle normaalia.
- Määrää taulukoiden, textarea-elementin ja pre-elementin maksimileveydeksi 100%. Tällä tavalla nekään eivät aiheuta selaimeen sivuttaisia vierityspalkkeja.
-
Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia.
Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:
- Testaa sivua Firefoxin Responsive Design Modessa. Valitse Tools|Web Developer|Responsive Design Mode tai CTRL+SHIFT+M. Voit testata myös omalla kännykälläsi.
- Kokeile myös Nanonanon sivuston etusivua ja testaa sen toimivuutta. Tee tarvittaessa lisämäärityksiä tyylitiedostoon. Muista lisätä myös etusivulle aiemmin mainittu meta-elementti.
- Kokeile seuraavaksi, miltä Galleria-sivu näyttää Firefoxilla. Jos mediakyselyt toimivat oikein, leveällä selainikkunalla käyttöön tulee tavallinen tyylitiedosto, mutta kun kavennat selainikkunan antamaasi raja-arvoa pienemmäksi, niin käyttöön vaihtuu mobiilipuolen tyylitiedosto.
Käyttäjien kommentit