CSS-mediatyypit ja asemointi - Luento 6

Tutustutaan mediatyyppikohtaisiin CSS-asetuksiin ja jatketaan asemointiesimerkkejä.

Luentotaltiointi

www06.wmv 73M
www06.mp3 16M
www06.avi H.264-pakkaus, 232M

Ongelmia videon katselussa?

Mediatyypit

Mediatyyppien tarkoituksena on mahdollistaa sivun ulkoasun määrittely mediakohtaisesti.
Esimerkiksi WWW-dokumentti voidaan muotoilla erilaisilla mediatyypeillä eri tavalla paperille kuin näytölle.
Hyötynä tästä saavutetaan, että jokaista mediaa varten voidaan tehdä omat tyylimääritykset, jotka mahdollistavat tiedon tehokkaan saamisen useamman median kautta.

Erilaiset mediatyypit

all-tyyppiin voidaan määritellä asetuksia kaikille laitteille.
braille-tyyppiin voidaan määritellä asetuksia esimerkiksi pistekirjoitusnäyttöä varten.
embossed-tyyppiin voidaan määritellä asetuksia brailletulostimia varten.
handheld-tyyppiin voidaan määritellä asetuksia pieninäyttöisille laitteille (esim. mobiililaitteet).
print-tyyppiin voidaan määritellä esimerkiksi paperille tulostettavaksi tarkoitettuja asetuksia.
projection-tyyppiin voidaan määritellä asetukset projektoreita varten.
screen-tyyppiin voidaan määritellä tietokonenäytöllä käytettäviä asetuksia.
speech-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreita varten.
tty-tyyppiin voidaan määritellä tasalevyistä kirjasinta käyttäviin laitteisiin.
tv-tyyppiin voidaan määritellä asetuksia televisiotyyppisille laitteille.

Mediatyypin määritys

Mediatyyppi voidaan määrittää link-elementillä:

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

Mediatyyppi voidaan määrätä myös CSS-tiedostossa:

@media print {
  .. tähän väliin kaikki print-mediaan liittyvät tyylit
}

Media Queries

Uusinta uutta ovat mediakyselyt (Media queries), joilla voidaan tarkentaa mediatyyppiä ja siihen liittyviä ominaisuuksia.

Mediakyselyille ei ole vielä kunnollista tukea tällä hetkellä.

<link rel="StyleSheet" media="screen and (color)" href="example.css" />
<link rel="StyleSheet" media="screen, 3d-glasses, print and resolution > 120dpi" href="example2.css" />

Sivun ominaisuuksia

Sivun ominaisuuksilla voidaan hallita dokumenttia sivutettuna. Seuraavassa muutamia sivuttamiseen liittyviä ominaisuuksia.

page-break-before-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen ennen kappaletta.
page-break-after-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen kappaleen jälkeen.
page-break-inside-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen lohkon sisällä.
Sivunvaihdon esiintyminen voidaan kieltää arvolla avoid ja sivunvaihto voidaan pakottaa arvolla always.

Esimerkkejä mediatyyppien käytöstä

Kurssin kotisivuja tulostettaessa jätetään tulosteista pois navigointipalkit sekä pyritään välttämään sivunvaihtoa asiakirjan eri rakenteissa. Tämä on toteutettu seuraavilla CSS-määrittelyillä.

@media print {
/*
auto   automaattinen 
always sivunvaihto aina ennen elementtiä 
avoid  sivunvaihtoa ei ennen elementtiä 
left   pakota sivunvaihtoja niin, että seuraava sivu on vasen 
right  pakota sivunvaihtoja niin, että seuraava sivu on oikea 
*/

h1, h2, h3 { 
  page-break-after: avoid;
  page-break-inside: avoid; 
}

ul, ol, dl { 
  page-break-before: avoid; 
}

.navbar, .navbartop {
  display: none;
}
}

Toinen esimerkki mediatyyppien käytöstä löytyy WWW-sivujen näyttämisestä esityksenomaisesti. Esimerkiksi tämä sivu näkyy Opera-selaimella diaesityksenä, kun sitä katsotaan kokoruututilassa.
```
@media projection {

body {
  margin-top: 1em;
  margin-left: 1em;
  margin-right: 1em;
  font-size: 200%;
}

h1,h2,h3{
  page-break-before: always;
}

.navbartop, .navbar {
  display: none;
}
}
```
Tarkempi esimerkki speech-mediatyypin määrittelyistä: speech.css.
Esimerkki handheld-mediasta

Lisätietoa CSS2-mediatyypeistä: http://appro.mit.jyu.fi/doc/css2/index1.html

Asemointiesimerkkejä

Perusongelma asemoinnin kanssa on saada aikaan monisarakkeinen sivusommittelu.

Taulukkotaitto (hyi!)

Taulukkoesimerkki
- Semanttisesti väärin! Ei saa käyttää.
- Rakenteen hajottaminen ja uudelleenjärjestely ei ole helppoa.
- Taulukko taulukon sisällä aiheuttaa jo vakavia esteitä!

Float-asemointi

Float-sarakkeet
- Ongelmana jatkuva tausta.
- Sarakkeiden paikkoja voidaan hienosäätää negatiivisten marginaalien avulla.
- Skaalautuvuus ikkunan kokoon kunnossa.

Absoluuttinen asemointi

Sarakkeet position-ominaisuudella
- Sivuosat on asemoitu reunoihin, sisältö on body-osassa ja säädetty keskellä padding-ominaisuudella.
- Skaalautuvuus ikkunan kokoon kunnossa.
- Olettaa, että body-osassa on eniten tekstiä. Jos ei ole, niin footer-osan kanssa tulee ongelmia (footer menee sivulohkojen päälle).
- Ongelmana jatkuva tausta edelleen.
Sarakkeet position-ominaisuudella
- Kaikki osat omissa div-lohkoissa. Tällöin footer-osan on oltava isoimmassa lohkossa. Footer-osa venytetään koko ruudun kokoiseksi ja asemoidaan sisältölohkon ulkopuolelle.
- Skaalautuvuus ikkunan kokoon kunnossa.
- CSS-määritykset riippuvat edelleen siitä mikä lohko on isoin.
- Ongelmana jatkuva tausta edelleen.

Samankorkuiset sarakkeet

Alta näkyy sama väri
- Toimiva ratkaisu.
- Olettaa, että jokin lohkoista on pisin, sama ei toimi siis välttämättä kaikilla sivuilla.
- XHTML-koodiin tulee useita "turhia lohkoja".
- Toinen vastaava esimerkki: Jatkuva tausta navigointipalkille
Huijaussarakkeet taustakuvalla
- Sarakkeet saa aikaan helposti.
- Pikselipohjainen, ei skaalautuva (paha!).
- Jos layout muuttuu, joudutaan säätämään taustakuvaakin.
- Lähde: Alistapart: Faux Columns
Negatiiviset marginaalit
- Reunapalkkien kokoa ei yleensä kannata antaa prosentteina (jos annetaan, niin kannattaa antaa lisäksi lohkojen minimileveydet em-yksikössä), mutta mitenkäs sitten annetaan keskellä olevan sisältöosan koko?
- Annetaan päälohkon kooksi 100 %, mutta poistetaan siitä marginaalia negatiivisella em/px-arvolla. Tällöin sivupalkki voi tulla päälohkon kanssa päällekkäin. Laitetaan päälohkon sisään kuitenkin lohko, jolla on marginaalia reunassa sen verran, että sivupalkki mahtuu sinne.
- Lohkojen jatkuvuus tehdään taustakuvalla.
- Melko monimutkainen ja ei varmuutta toimiiko vanhoilla selaimilla.
- Lähde: Alistapart: Negative Margins
Saman kokoiset sarakkeet
- Rakenne pysyy järkevänä ja skaalautuvana.
- Toimiiko varmasti kaikilla (vanhemmilla) selaimilla? FF3, IE7, Opera 9 OK.
- Lähde: Equal Height Columns - In search of One True Layout

Linkkejä:

CSS-vinkkejä

Lomake-elementit ja CSS

Lomake-elementtien muotoilu CSS:llä: Älä tee ainakaan paljoa.

Lomake-elementtien ulkoasun muotoilu CSS:llä on liian epävarmaa, joten sitä ei juurikaan kannata tehdä. Enintään voi yrittää vaihtaa kirjasimen tyyppiä, kokoa sekä tekstin ja taustan väriä. Myös kenttien leveyden määrittäminen etenkin handheld-medialle on järkevää. Liiallinen lomake-elementtien ulkomuodon muuttaminen oletuksesta poikkeavaksi aiheuttaa vain käytettävyysongelmia. Lomake-elementtien asettelua voi toki tehdä CSS:llä normaalisti.

IE 6 ja CSS

Ennen Internet Explorerin 7-version julkaisua IE:n vanhemmat versiot aiheuttivat runsaasti pulmia WWW-sivujen tekijöille puutteellisella CSS:n tuella. Onneksi versiossa 7 iso osa puutteista korjattiin. Edelleen voi kuitenkin olla selailijoita, jotka käyttävät IE:n versiota 6, joten seuraavassa joitakin vinkkejä, minkä avulla sivut saataisiin näyttämään heillekin järkeviltä.

Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE 6:llä, käytä valitsinta >, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE 6:ssä ja tekstin yhteenkirjoittamalla IE 6 jättää nämä määrittelyt varmasti huomiotta. Merkitse tyylitiedostoon esimerkiksi seuraavasti:

html>body>.notforie {
/* Tänne määritykset, joita käytetään välittömästi body-elementin sisällä
olevassa elementissä, jonka luokka on notforie. */
}

p>strong {
/* Tänne määritykset välittömästi tavallisen kappaleen sisällä olevalle 
strong-elementille, jota ei haluta näyttää IE 6:ssä. */
}

* html body div#forie {
/* Tänne määritykset lohkolle <div id="forie">...</div>, 
jotka halutaan toimivan pelkästään IE:n vanhemmilla versioilla. */
}