CSS-mediatyypit ja mediakyselyt

Tutustutaan mediatyyppeihin ja mediakyselyihin joilla voi kustomoida CSS-tyylejä eri ympäristöihin.

Mediatyypit

Erilaisia mediatyyppejä

Mediatyypin määritys

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

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

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:

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.

Sivun ominaisuuksia

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

Esimerkkejä mediatyyppien käytöstä

Viewport

Mobiililaitteet olettavat sivujen olevan leveämpiä kuin niiden näytöt ovat. Esim. Applen laitteet olettavat sivujen olevan 980 pikseliä leveitä ja zoomailevat ja sovittavat niitä tämän oletuksen mukaan omaan näyttöönsä. Jos sivu on kuitenkin suunniteltu responsiiviseksi niin laitteen oma arvailu vain huonontaa sivun esitystä...

Mobiililaitteissa ja muissa pieninäyttöisissä laitteissa responsiivisuutta voidaan parantaa käyttämällä viewport-määritystä:

<meta name="viewport" content="width=device-width, initial-scale=1">

Jos teet responsiivisen sivun niin käytä viewport-määritystä:<meta name="viewport" content="width=device-width, initial-scale=1">. Jos et tee responsiivista sivua niin älä käytä mitään viewport-määrityksiä.

Mobiililaitteiden ja muiden erittäin tarkoilla näytöillä varustettujen laitteiden näytöissä pikselit voivat olla turhankin pieniä. Jos sivun ulkoasu on määritelty pikseleinä niin teksti voi olla tarkassa näytössä lukukelvottoman pientä. Tästä syystä monet selaimet skaalaavat automaattisesti tekstin kokoa tarkoissa näytöissä. Aihetta on selitetty tarkemmin artikkeleissa: A pixel is not a pixel is not a pixel

Lisätietoa

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/css-mediatyypit/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-11-01 09:59:00
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta