Demo 6 - CSS-asemointi, vaihtoehtoiset tyylitiedostot ja mediakyselyt

• Mallivideot
• Sivun asemointi CSS:llä käyttäen float-ominaisuutta
  • XHTML-sivun tekeminen pohjalle
  • Tyylitiedoston tekeminen
• Sivun asemointi CSS:llä käyttäen position:fixed-arvoa
  • XHTML-sivun tekeminen pohjalle
  • Tyylitiedoston tekeminen
• Vaihtoehtoinen tyylitiedosto mobiililaitteille
• Mobiililaitteiden tyylitiedosto käyttöön mediakyselyiden avulla
• Tyylitiedosto tulostusta varten

Näissä demoissa opetellaan sivun asemointia CSS:llä sekä erillisten tyylitiedostojen ja mediakyselyiden käyttöä.

Sivun asemointi CSS:llä käyttäen float-ominaisuutta

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n float-ominaisuutta.

XHTML-sivun tekeminen pohjalle

1. Tee W-asemallesi opetusteknologia/demot-hakemistoon kansio nimelle demo6.
2. Aloita tekemällä tyhjä XHTML-sivu, jossa on standardin mukainen XHTML-dokumentin rakenne. Anna dokumentin nimeksi float.html.
3. Määritä dokumentti käyttämään float.css-nimistä tyylitiedostoa samasta kansiosta, missä float.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
4. Lisää dokumenttiin seuraavan nimiset div-lohkot (laita nimi lohkon class-attribuutin arvoksi) ja niihin sisältöä (tekstiä) esimerkiksi mallikuvan mukaisesti. Sisältölohkossa kannattaa käyttää p-elementtiä kappalejakoon. Myös navigointilohkoissa voit käyttää p-elementtiä rivittämään linkkitekstit omille riveilleen. Lohkojen järjestys XHTML-koodissa tulee olla seuraavan listan kaltainen.
   • ylatunniste (sisältää ylätunnisteen sisällön)
   • vasennavi (sisältää vasemman navigointipalkin sisällön)
   • sisalto (sisältää sivun varsinaisen sisällön)
   • oikeanavi (sisältää oikean navigointipalkin sisällön)
   • alatunniste (sisältää alatunnisteen sisällön)
5. Voit lisätä sivulle vielä sivua kuvaavan title-elementin.

Tyylitiedoston tekeminen

1. Luo tyhjä tyylitiedosto nimelle float.css.
2. Tee tyylitiedostoon vastaavan nimiset luokat, jotka annoit div-lohkoille. Tyylitiedostoa kannattaa muokata esimerkiksi edellisten demojen tapaan Web Developerin Edit CSS -valinnan avulla ja tallentaa lopussa muutokset myös itse tyylitiedostoon.
3. Muotoillaan ensin ylatunniste-luokkaa. Laita luokalle taustaväriksi #FFFF99 ja leveydeksi 98%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan koko selainikkunan leveys). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
4. Muotoillaan seuraavaksi vasenta navigointipalkkia (vasennavi). Se on tarkoitus liu'uttaa selainikkunan vasempaan reunaan, joten laita float-arvoksi left. Taustaväriksi laita #99CCFF ja leveydeksi 23%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 25% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
5. Muotoillaan seuraavaksi sisalto-luokkaa. Luokka on tarkoitus liu'uttaa vasemman navigointilohkon viereen, joten laita sillekin float-arvoksi left. Taustaväriksi laita #CCCCFF ja leveydeksi 48%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 50% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
6. Muotoile seuraavaksi oikeanavi-luokka kuten vasennavi-luokka. Ainoastaan taustaväriä tarvitsee muuttaa. Laita taustaväriksi #FF99CC. Huomaa, että oikea navigointipalkkikin siis tulee liu'uttaa vasempaan reunaan, jotta kaikki kolme lohkoa saadaan rinnakkain. Yhteensä lohkot vievät koko selainikkunan verran (100%) tilaa leveyssuunnassa.
7. Muotoile lopuksi alatunniste-luokka kuten ylatunniste-luokka. Muuta taustavärin arvoksi #66FF99. Lisäksi laita luokalle clear-ominaisuus, jonka arvo laita siten, että luokan kummallekaan puolelle ei saa tulla muita lohkoja.

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Validoi tuottamasi XHTML- ja CSS-koodit ja korjaa mahdolliset virheet. Testaa sivua selaimella.

Sivun asemointi CSS:llä käyttäen position:fixed-arvoa

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n position:fixed-arvoa. Ylä- ja alatunniste sekä molemmat navigointipalkit on asemoitu kiinteästi selainikkunaan, eli sivun varsinainen sisältö näkyy "kehyksien" sisällä ja siinä voi liikkua selainikkunan vierityspalkkien avulla.

XHTML-sivun tekeminen pohjalle

1. Tallenna edellisessä tehtävässä tekemäsi XHTML-tiedosto nimelle fixed.html.
2. Voit muuttaa lohkojen järjestyksen siten, että tärkeimmät tiedot ovat XHTML-tiedostossa ylimpänä (esimerkiksi sisalto-lohko ylimmäksi). position:fixed-arvoa käytettäessä lohkojen järjestyksellä ei ole merkitystä, joten järjestys kannattaa miettiä "tärkeysjärjestykseksi" esimerkiksi ruudunlukijoita (voivat lukea sivua ylhäältä alas) ja div-lohkoja ymmärtämättömiä selaimia varten.
3. Poista sisalto-lohkon div-elementti, mutta jätä sen sisältö ennalleen (eli tekstikappaleet ovat muutoksen jälkeen suoraan body-elementin "lapsia").
4. Muuta dokumentti käyttämään fixed.css-nimistä tyylitiedostoa samasta sijainnista, missä fixed.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
5. Voit muuttaa vielä title-elementin arvon sivua kuvaavaksi.
6. Muita muutoksia ei tarvitse tehdä - lohkojen nimet, sisällöt yms. saavat pysyä entisellään.

Tyylitiedoston tekeminen

1. Tallenna edellisessä tehtävässä tekemäsi CSS-tiedosto nimelle fixed.css.
2. Muokataan ensin ylatunniste-luokkaa. Kaikki jo olemassa olevat arvot saavat jäädä luokkaan. Lisää luokalle position-ominaisuus ja anna sen arvoksi fixed. Sijoita lohko alkamaan selainikkunan vasemmasta yläkulmasta (anna sopivat top- ja left-arvot). Anna lohkolle korkeudeksi 3em.
3. Muokataan seuraavaksi alatunniste-luokkaa. clear-ominaisuuden voit poistaa, muut jo olemassa olevat arvot saavat jäädä. Määritä luokalle position:fixed-arvo siten, että lohko alkaa näytön vasemmasta alareunasta. Anna lohkolle korkeudeksi 3em.
4. Seuraavaksi muotoillaan vasennavi-luokkaa. Poista luokalta float-ominaisuus ja muuta leveydeksi 15%. Lisää luokalle position:fixed-ominaisuus siten, että top-arvo on 4em ja left-arvo 0%. Näin lohko alkaa heti ylätunnisteen alareunasta. Määritä luokan korkeudeksi 100%.
5. Tee oikeanavi-luokkaan samat muutokset kuin vasennavi-luokkaan sillä muutoksella, että luokka alkaa näytön oikeasta reunasta (pystysuunnassa edelleen ylätunnisteen alareunasta).
6. Poista kokonaan sisalto-luokka CSS-tyylitiedostosta.
7. Määritä CSS-tyylitiedostoon body-elementille seuraavat ominaisuudet: kaikkien reunojen täyte (padding) 0.5em, marginaali (margin) ylhäällä ja alhaalla 4em sekä marginaali vasemmalla ja oikealla 17%. Näin body-elementin sisältö asettuu navigointien sekä ylä- ja alatunnisteiden väliin ilman, että tarvitsee käyttää erillistä luokkaa sisällölle.

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Validoi tuottamasi XHTML- ja CSS-koodit ja korjaa mahdolliset virheet. Testaa sivua selaimella.

HUOM! Nyt harjoituksena tehty asemointi, missä kaikki neljä laitalohkoa kiinnitetään näyttöön EI ole yleensä järkevä, sillä näyttöön kiinnittäminen vie turhan paljon tilaa sivun varsinaiselta sisällöltä etenkin pienemmillä näytöillä (esimerkiksi miniläppärit). Järkevämpää olisi siis kiinnittää näyttöön esimerkiksi vain joko vasemman laidan tai oikean laidan lohko ja lisäksi joko ylätunniste tai alatunniste. Muut lohkot voisi laittaa vierimään sivun mukana, jolloin ne eivät vie niin paljon tilaa sivun varsinaiselta sisällöltä.

Eräs käyttökelpoinen tyyli tehdä vastaavia ulkoasuja on käyttää hyväksi reunuksia (border). Ks. vanha WWW-julkaiseminen kurssin demotehtävä.

Vaihtoehtoinen 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 sivut näkymään hienosti myös mobiililaitteissa.

Pienille näytöille voisi periaatteessa käyttää handheld-mediatyyppiä, mutta koska lähes kaikki vähänkään uudemmat kännykät ilmoittavat mediakseen screen (eli tietokonenäyttö), niin on järkevämpää tehdä vaihtoehtoinen tyylitiedosto (Alternate StyleSheet) mobiililaitteita varten.

• Lisää tekemäsi Opetusteknologia-kurssisivuston etusivulle viite mobiili.css-tyyleihin:

  <link rel="Alternate StyleSheet" href="mobiili.css" 
  type="text/css" title="Mobiililaitteet" media="all" />

  Viite tulee lisätä all-median CSS-tiedoston jälkeen, jotta tyylitiedostossa voidaan ylikirjoittaa all-medialta tulevia tyyliasetuksia, jotka eivät sovi pieninäyttöisille laitteille.

  Viite kannattaa yleensä lisätä kuitenkin ennen tulostukseen tarkoitettua tyyliä, jottei vaihtoehtoisessa tyylissä ylikirjoiteta tulostukseen tarkoitettuja määrityksiä.

  all-median tyyliasetukset vaikuttavat myös vaihtoehtoisiin tyyleihin, koska all-median tyylitiedosto on linkitetty ilman titleä, jolloin kyseinen tyylitiedosto on aina käytössä. Jos määrittäisimme all-median linkitykseen titlen, niin silloin kyseinen tyylitiedosto ei vaikuttaisi vaihtoehtoisiin tyylitiedostoihin.

  Vaihtoehtoisille tyylitiedostoille title on aina määriteltävä!

• Luo tiedosto mobiili.css ja tallenna se opetusteknologia-hakemistoon. Kopioi tiedostoon pohjaksi koko tyyli.css-tiedoston sisältö, jolloin kukin ominaisuus tulee uudelleenmääritellyksi. Älä siis poista ominaisuuksia, vaan muuta niiden arvoja mobiililaitteille sopiviksi!
• Muokkaa mobiili.css:ään sopivat CSS-säännöt, joilla saat sivun näyttämään siistiltä kapeassa ja matalassa selaimessa.
• Huomioi erityisesti seuraavat seikat:
  • Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää mobiilipuolelle 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ä.
  • Kapeilla näytöillä lohkoille kannattaa yleensä antaa käyttöön koko näytön leveys. Muuta .navbar-lohkon leveys takaisin koko näytön levyiseksi:

    width: 100%;

  • 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 (esim. 90%).
• Testaa sivua haluamallasi selaimella (esimerkiksi Firefoxilla). Avaa sivu ja pienennä ensin selainikkunan kooksi noin 240 x 320 px (suunnilleen tavallisen peruskännykän näytön koko). Ota sen jälkeen käyttöön vaihtoehtoinen tyylitiedosto (Firefoxissa View | Page Style). Kiinnitä huomiota muun muassa lohkojen ja eri elementtien näkyvyyteen pienellä näytöllä:
  • Onhan selainikkuna käytetty tiiviisti, eli turhia marginaaleja tai tyhjää tilaa ei ole?
  • Eihän selainikkunaan tule sivuttaisia vierityspalkkeja?
    • Jos sivuttaiset vierityspalkit tulee, on jonkun lohkon kokonaisleveys yli 100%. Muista, että kokonaisleveyteen vaikuttavat elementin marginaalit (margin), täytteet (padding), reunaviivat (border) ja itse elementin leveys (width).
  • Onko teksti sopivan kokoista pienelle näytölle?
• Validoi tekemäsi mobiili.css-tiedosto.

Mobiililaitteiden tyylitiedosto käyttöön mediakyselyiden avulla

Jos vaihtoehtoisen tyylitiedoston käyttöönottoon ei toteuta esimerkiksi JavaScriptiä hyödyntävää ratkaisua, jää tyylitiedosto saamatta käyttöön kaikilla niillä selaimilla, jotka eivät tarjoa valikkoa tyylitiedoston vaihtoa varten. Valitettavasti mm. mobiiliselaimet eivät kyseistä valikkoa yleensä tarjoa. JavaScript-toteutukselle vaihtoehtoinen ratkaisu on toteuttaa mobiilityylitiedoston käyttöönotto mediakyselyiden (Media Queries) avulla. Mediakyselyistä löytyy lisää tietoa luennolta 4. Toteutetaan edellisessä tehtävässä luodun mobiilityylitiedoston käyttöönotto mediakyselyiden avulla.

Koska kännyköiden selaimet eivät välttämättä ymmärrä mediakyselyitä, tulee sivun pohjatyylitiedostoksi (kaikille selaimille) linkittää mobiilipuolen tyylitiedosto, minkä jälkeen linkitetään "tavallinen tyylitiedosto" mediakyselyitä ymmärtäviä tietokoneiden selaimia varten. Tavallisessa tyylitiedossa sitten ylikirjoitetaan mobiilipuolen tyyliasetukset "normaaleille" tietokoneiden selaimille sopiviksi.

• Poista ensin Opetusteknologia-kurssisivuston etusivulta kaikki tyylilinkitykset.
• Linkitä sen jälkeen ensimmäisenä tyylitiedostona edellisessä tehtävässä tehty mobiilipuolen tyylitiedosto:

  <link href="mobiili.css" rel="StyleSheet" type="text/css" />

• Tämän jälkeen linkitä mediakyselyiden avulla "tavallinen tyylitiedosto" siten, että ne tietokoneen selaimet, joiden selainikkunan koko on tiettyä raja-arvoa suurempi, ottavat kyseisen tyylitiedoston käyttöön. Raja-arvoa voi myöhemmin säätää sopivaksi, aluksi voi käyttää esimerkiksi arvoa 800px, jolloin tyylin linkittäminen menisi seuraavasti:

  <link href="tyyli.css" rel="StyleSheet" media="all and (min-width: 800px)" type="text/css" />

• Kokeile seuraavaksi, miltä 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.
• Tyylitiedostot linkitettiin siis toisinpäin mitä aiemmin. Koska molemmissa tyylitiedostoissa on määritelty samat ominaisuudet, ylikirjoitus toimii myös näin päin, eli tavallisessa tyylitiedostossa (tyyli.css) ylikirjoitetaan mobiilipuolen tyylitiedoston (mobiili.css) ominaisuuksia. Testaamalla sivua kuitenkin huomataan, että muutamat mobiilipuolen asetukset (mm. eri elementtien fonttien koot) eivät muutu "normaalin" kokoiseksi, vaikka selain käyttää tavallista tyylitiedostoa. Syy tähän on se, että mobiilipuolella määriteltiin muutamia fontin koon määrityksiä, joita ei oltu määritelty tavallisessa tyylitiedostossa. Siellä niihin kelpasi selaimelta tulevat oletusasetukset. Nyt kuitenkin kyseiset määritykset tulee ylikirjoittaa tyyli.css-tiedostossa vastaamaan selaimen oletusasetuksia.
• Ongelmaksi muodostuu se, että mistä tietää sopivat oletusasetukset? Apuna voi käyttää W3C:n ohjetta, jossa annetaan suosituksia selaimen oletustyyleiksi. Esimerkiksi h1-elementin fonttikoon tulisi olla 2em, h2-elementin 1.5em jne. Muista myös, että tekstikappaleen (p-elementti) oletusfonttikoko on 1em.
• Vertaa seuraavaksi mobiili.css- ja tyyli.css-tiedostoja. Ylikirjoita tyyli.css-tiedostossa oletusasetuksille kaikki ne ominaisuudet, joille on määritetty joku arvo mobiilipuolella, muttei vielä tavallisessa tyylitiedostossa. Näitä ominaisuuksia ovat mm. otsikkoelementtien, tekstikappaleiden ja listojen fonttikoot. Esimerkiksi pääotsikon fontin ylikirjoitus menee seuraavasti (rivi tulee sijoittaa CSS-tiedostossa h1-lohkoon):

  font-size: 2em;

• Testaa lopuksi, että määritykset toimivat nyt oikein. Tee tarvittaessa lisämäärityksiä CSS-tiedostoon. Validoi sekä XHTML- että CSS-koodit ja korjaa mahdolliset virheet. Mediakyselyn linkityksestä johtuvasta validaattorin mahdollisesti antamasta virheestä ei tarvitse välittää.
• HUOM! Mobiilityylin linkittämiseksi täytyy valita joko nyt tehty mediakyselyitä hyödyntävä tapa tai sitten edellisessä tehtävässä tehty tapa linkittää tyyli vaihtoehtoisena tyylinä. Samassa dokumentissa ei siis voi tehdä linkitystä molemmilla tavoilla.

Tyylitiedosto tulostusta varten

CSS-ulkoasupohjan päälle voi tarvittaessa tehdä lisä- tai muutosmäärityksiä myös print-median (tulostus) tarpeisiin.

• Tallenna print.css opetusteknologia-hakemistoon.
• Lisää Opetusteknologia-kurssisivuston etusivulle linkki edellä tallentamaasi CSS-tiedostoon. Linkki tulee lisätä viimeiseksi muiden tyylitiedostojen linkityksen jälkeen, jotta print-mediassa voidaan ylikirjoittaa all-medialta tulevia tyyliasetuksia, jotka eivät sovi tulostusnäkymään.
• Muuta lisäämäsi link-elementin media-attribuutin arvoksi print.

  <link rel="StyleSheet" href="print.css" type="text/css" media="print" />

  HUOM! print-mediatyypille ei kannata koskaan määrittää titleä, koska silloin se ei ole aina käytössä (persistent), jolloin selaimet eivät osaa ottaa sitä automaattisesti käyttöön valittaessa tulostuksen esikatselu.

• Avaa sivu Firefoxilla ja valitse Web Developer -työkalupalkista CSS | Display CSS By Media Type | Print.
• Siirry muokkaamaan print.css-tiedostoa valinnalla CSS | Edit CSS.
• Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen kannalta turhat elementit (navigoinnit, koristelohkot jne.) eli etusivun tapauksessa .navbar-lohko. Piilottaminen onnistuu display-ominaisuuden avulla:

  .navbar {
    display: none;
  }

  Myös Navigointi-otsikko (h2-elementti) olisi hyvä saada piiloon. Käy antamassa kyseiselle otsikolle attribuutti class ja sen arvoksi piilo. Tämän jälkeen kyseisen elementin voi piilottaa CSS-puolella:

  .piilo {
    display: none;
  }

• Määritellään tulostukseen sopivat marginaalit body-elementille:

  body {
    margin-top: 0.5cm;
    margin-left: 0.5cm;
    margin-right: 0.5cm;
    margin-bottom: 0.5cm;
  }

  Määrittele haluamasi marginaalit. Marginaaleja määritettäessä täytyy muistaa, että määritellyt marginaalit tulevat käyttäjän omien tulostusasetusmarginaalien lisäksi, joten kovin isoja marginaaleja ei kannata laittaa. Esimerkiksi eri elementtien marginaaleja voi usein hieman pienentää, jotta paperi käytetään tarkemmin hyväksi.
• Tee tarvittaessa myös muita haluamasi määrityksiä tulostuspuolelle.
• Tallenna tekemäsi muutokset print.css-tiedostoon.
• Varmista vielä Firefoxin Print Preview -toiminnolla (tulostuksen esikatselu), miten sivun tulostusasu muuttui. HUOM! Ulkoasu voi näyttää erilaiselta tulostuksen esikatselussa kuin Web Developerin Display CSS By Media Type | Print -näkymässä. Syy tähän on se, että Display CSS By Media Type | Print ei käytä ollenkaan all-medialta mahdollisesti tulevia tyylimäärityksiä, mutta tulostuksen esikatselu (ja itse tulostaminen) käyttää. Aina täytyy siis varmistaa, että myös tulostuksen esikatselu näyttää hyvältä.
• Validoi lopuksi tuottamasi XHTML- ja CSS-koodit ja korjaa mahdolliset virheet.

Tarkemmin tulostamiseen liittyvistä erikoisasetuksista voit halutessasi lukea W3C:n CSS 2.1 Paged media -sivulta.