CSS-mediatyypit ja mediakyselyt

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

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.

Floatattu kuva valuu lohkon ulkopuolelle

Kuva ei mahdu lohkoon

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 Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/luento6/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-05 17:31:45
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta