CSS-asemointi, CSS3, mediatyypit ja mediakyselyt - Luento 4

Luennon aiheina ovat CSS-asemointi ja CSS3-ominaisuudet sekä mediatyypit ja mediakyselyt.

CSS-asemointi

Normaalisti block-level-elementit järjestyvät allekkain äitilohkon vasempaan laitaan ja inline-elementit vierekkäin, kunnes äitilohkon leveys on täyttynyt. CSS-ominaisuuksilla voidaan kuitenkin irrottaa tietyt elementit perusjärjestyksestä ja asemoida ne sivulle uuteen paikkaan.

Asemointia voidaan tehdä taulukoilla (ei suositeltava), elementtien marginaaleilla, float-ominaisuudella ja CSS 2.1:sen position-ominaisuudella. Myös kehyksien (engl. frame) käyttöä voitaisiin ajatella asemointina, mutta niiden käyttö ei ole sallittua mm. esteettömyys- ja saavutettavuusongelmien vuoksi.

Asemointi position-ominaisuudella

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Erilaisia arvoja ovat seuraavat:

Lisätietoa: position-ominaisuus

Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:

Lisätietoa: position-ominaisuuden kanssa tarvittavat ominaisuudet

Liu'utus

Kuvien liu'utus (esimerkki)

Lisätietoa: float- ja clear-ominaisuudet

Absoluuttinen asemointi (engl. absolute positioning)

Absoluuttisessa (engl. absolute) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti tai kiinteästi asemoidun äiti-elementin sisällä välittämättä normaalista sijainnista.

Absoluuttisesti asemoitu elementti vierii dokumentin sisällön mukana.

.vasenylanurkka {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

Vierivä kehyksien korvike

Kiinnitetty asemointi (engl. fixed positioning)

Kiinnitetyssä (engl. fixed) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti näyttöalueen sisällä.

Asemoitu elementti EI vieri dokumentin sisällön mukana.

Paljon tilaa vieviä lohkoja ei yleensä kannata kiinnittää näyttöön, koska ne vievät paljon tilaa sivun muulta sisällöltä.

.vasenylanurkka {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

Kiinnitetty asemointi -esimerkki

Suhteellinen asemointi (engl. relative positioning)

Suhteellisessa (engl. relative) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.

.up {
  position: relative;
  top: -1em;
}

Asemointi z-suunnassa

z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää. Ominaisuus toimii vain position-asemoitujen lohkojen kanssa.

Asemointiesimerkkejä

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

CSS3 on jo tuonut tai tulee tuomaan mukanaan mm. seuraavia uutuuksia:

Esimerkki CSS3-määrityksistä

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.

Sivun ominaisuuksia print-mediatyyppiä varten

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

Selaimet valitettavasti tukevat sivun vaihdon määrityksiä aika vaihtelevasti.

Esimerkki print-mediatyypin 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ä 
*/

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

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

img {
  page-break-inside: avoid;
}

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

Mediakyselyt

Mediakyselyillä (Media Queries) voidaan tarkentaa mediatyyppiä ja siihen liittyviä ominaisuuksia. Mediakyselyt saivat W3C:n suosituksen aseman vuonna 2012.

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

Mediakyselyiden selaintuki on parantunut koko ajan, ja tällä hetkellä Firefoxin, Internet Explorerin, Operan, Safarin ja Google Chromen uusimmat versiot tukevatkin niitä jo riittävän hyvin. Internet Explorerissa mediakyselytuki tuli ensimmäisen kerran versioon 9.

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.

Meta-tagi viewport

Mobiiliselaimissa on WWW-sivuille omat skaalauskäytännöt, jotta sivut saadaan mahtumaan kapeaankin selainikkunaan. Nämä ovat hyödyllisiä silloin, kun sivujen tekijä ei ole suunnitellut sivuille erillisiä mobiilikäytön mahdollistavia ulkoasumäärityksiä. Jos sivujen tekijä kuitenkin on huomioinut mobiililaitteet esimerkiksi mediakyselyiden avulla, mobiiliselaimien skaalauskäytännöt voivat haitata sivun tekijän omia ulkoasumäärityksiä. Mobiilikäyttöön suunniteltuihin sivuihin kannattaakin lisätä viewport meta-tagi, jolla määrätään sivun "kehykseksi" (engl. viewport) laitteen selainikkunan todellinen leveys. Ilman määritystä sivujen skaalaus tapahtuu yleensä oletusleveyden 980 px mukaan, joka voi siis tuottaa ongelmia laitteissa, joiden todellinen selainikkunan leveys on jotain muuta. Viewport-määritys ei vaikuta tietokoneiden selaimiin mitenkään.

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

Esimerkkisivut, joissa tekstikappaleen leveys määrätty 500 pikseliin (kokeile sivuja mobiiliselaimella):

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/opetusteknologia/luennot/luento4/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2014-04-08 12:42:35
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta