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:

Tärkein ja eniten käytetty ominaisuus mediakyselyissä on näytön leveys. Tähän voidaan reagoida esim. seuraavilla tavoilla:

/* näytön on oltava vähintään 300 pikseliä leveä */
@media all and (min-width: 300px) {
  /* tänne tulevat kaikki halutut tyylimäärittelyt */
}

/* näytön on oltava enintään 500 pikseliä leveä */
@media all and (max-width: 500px) {
  /* tänne tulevat kaikki halutut tyylimäärittelyt */
}

Kapeissa näytöissä kannattaa yleensä purkaa monimutkaisia asemointeja ja sijoittaa elementtejä mieluummin peräkkäin kuin vierekkäin. Esim. poistetaan navigointipalkki näytön laidasta ja sijoitetaankin se keskelle. Sivusuuntaista skrollausta pitää aina välttää

Esimerkki 1

nav {
 float: right;
 background-color: green;
 width: 15%;
}

header, footer {
 background-color: yellow;
}

/* seuraavassa on esimerkkejä asioista joita voi mediakyselyillä tehdä */
@media all and ( max-width: 500px ) {
/* Palautetaan navigointi koko sivun levyiseksi */
 nav {
  float: none;
  width: 100%;
}

/* rajataan kuvat maksimissaan sivun levyisiksi */
img {
 max-width: 100%;
}

/* piilotetaan koko yläpalkki */
header {
  display: none;
}
pre {
 overflow: scroll;
}

}

Esimerkki 2

@media all {
  p {
    color: black;
    background-color: white;
  }
}

@media all and (min-width: 300px) {
  p {
    color: white;
    background-color: black;
  }
}

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

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

Esimerkki 3, 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
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta