CSS-mediatyypit ja asemointi - Luento 6

Tutustutaan mediatyyppikohtaisiin CSS-asetuksiin ja jatketaan asemointiesimerkkejä. Lopuksi käydään läpi pikaisesti CSS3:sta.

Luentotaltiointi

Ongelmia videon katselussa?

Mediatyypit

Erilaiset mediatyypit

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
}

Muiden kuin all-median tyyppisten tyylien linkityksessä täytyy huomioida se, ettei niiden jälkeen linkitetä enää all-median tyylejä, koska muuten all-median tyylit ylikirjoittaisivat muiden mediatyyppien tyylimääritykset.

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.

Media Queries

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

Mediakyselyiden avulla käytettävä tyylitiedosto voidaan määritellä esimerkiksi seuraavien perusteiden mukaan:

Mediakyselyille ei ole valitettavasti vielä täydellistä tukea tällä hetkellä, mutta esimerkiksi Firefoxin, Operan, Safarin ja Google Chromen uusimmat versiot tukevat jo niitä riittävän hyvin. Internet Explorer 8 ei vielä tue mediakyselyitä, mutta IE 9 Beta tukee, joten jatkossa (IE 9:n korvatessa IE 8:n) mediakyselyitä voi käyttää yhä enemmän.

Esimerkki

@media all {
  p {
    width: 40%;
    color: black;
  }
}

@media all and (min-width: 300px) {
  p {
    width: 60%;
    color: blue;
  }
}

@media all and (min-width: 600px) {
  p {
    width: 80%;
    color: red;
  }
}

@media all and (min-width: 900px) {
  p {
    width: 100%;
    color: green;
  }
}

Esimerkki, missä vaihdetaan käyttäjälle kapeille näytöille sopiva tyylitiedosto käyttöön selainikkunan leveyden mennessä riittävän kapeaksi. Esimerkissä on hyödynnetty osittain seuraavaa mediakyselyitä hyödyntävää esimerkkiä kännyköille oman tyylitiedoston asettamisessa.

Sivun ominaisuuksia

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

Esimerkkejä mediatyyppien käytöstä

Lisätietoa CSS 2.1 -mediatyypeistä: http://www.w3.org/TR/CSS21/media.html

Asemointiesimerkkejä

Perusongelma asemoinnin kanssa on saada aikaan monisarakkeinen sivusommittelu.

Taulukkotaitto (hyi!)

Float-asemointi

Absoluuttinen asemointi

Samankorkuiset sarakkeet

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 pienille näytöille 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. Lisää korjauksia tehtiin versioon 8. 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. */
}

IE 6 laskee väärin lohkojen koon

IE 6 ja lohkojen koko

Huomaa, että IE 7-9 laskee koot oikein.

IE 6 ja position: fixed

Kiinnitetty asemointi ei toimi oikein IE 6:ssa. Ongelman voi kiertää seuraavan esimerkin avulla.

position: fixed toimii oikein IE 7-9:ssa.

Floatattu kuva valuu lohkon ulkopuolelle

Kuva ei mahdu lohkoon

Lisätietoa

CSS3

CSS3 on tekeillä oleva uusin versio CSS-suosituksesta. CSS3:ssa ominaisuudet jaetaan moduuleihin, joista ohjelmat voivat valita mitä moduuleja haluavat tukea. Moduuleja on yli 30 kappaletta.

CSS3:n uutuudet

Tärkeimmät uutuudet mitä CSS3 tulee ehkä tuomaan mukanaan ovat:

Esimerkki CSS3-määrityksistä

Muutamia CSS3-esimerkkejä

/* Merkitään aktiivinen lomake-elementti. */
input[type="text"]:focus, textarea:focus { border-color: #FC0; } 

/* Merkitään sisäisen linkin kohde. */
body *:target { border-bottom: 1px dotted; }

/* Muotoillaan sisäiset linkit poikkeavasti. */
a:link[href^="#"] {
  color: black;
}

/* Poistetaan alleviivaus sähköpostilinkeistä. */
a:link[href^="mailto:"] {
  text-decoration: none;
}

print-mediassa:

a:link:after {
  content: " <" attr(href) "> "; 
  color: silver;
  font-family: "Courier New", Courier, monospace;
  font-size: smaller;
}

a:link[href^="/"]:after {
  content: " <http://appro.mit.jyu.fi" attr(href) "> "; 
}

a:link[href^="#"] {
  text-decoration: none;
}

a:link[href^="#"]:after {
  content: "";
}

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento6/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2011-02-01 15:25:14
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta