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

• Luentotaltiointi
• CSS-asemointi
  • Asemointi position-ominaisuudella
  • Liu'utus
  • Absoluuttinen asemointi (engl. absolute positioning)
  • Kiinnitetty asemointi (engl. fixed positioning)
  • Suhteellinen asemointi (engl. relative positioning)
  • Asemointi z-suunnassa
  • Asemointiesimerkkejä
• CSS3
  • CSS3:n uutuudet
• Mediatyypit
  • Erilaiset mediatyypit
  • Mediatyypin määritys
  • Sivun ominaisuuksia print-mediatyyppiä varten
• Mediakyselyt

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:

• static-määrittää sijoittumisen normaaliksi elementin normaaliin paikkaan nähden.
• relative-määrittää sijoittumisen suhteelliseksi elementin normaaliin paikkaan nähden.
• absolute-määrittää sijoittumisen absoluuttisesti sivulle. Sijoittuminen lasketaan sen asemoidun äiti-elementin paikan ja koon suhteen, jossa lohko sijaitsee.
• fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä ja positiointi tapahtuu aina koko näytön suhteen eikä äiti-elementin suhteen.

Lisätietoa: position-ominaisuus

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

• top-ominaisuudella voidaan määritellä elementin etäisyys yläreunasta.
• bottom-ominaisuudella voidaan määritellä elementin etäisyys alareunasta.
• left-ominaisuudella voidaan määritellä elementin etäisyys vasemmasta reunasta.
• right-ominaisuudella voidaan määritellä elementin etäisyys oikeasta reunasta.
• z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.

Lisätietoa: position-ominaisuuden kanssa tarvittavat ominaisuudet

Liu'utus

Kuvien liu'utus (esimerkki)

• float
• clear

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

• abs.htm - lähdekoodi
• abs.css - lähdekoodi

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ä.

Kiinnitetty asemointi ei toimi Internet Explorer 6:ssa, mutta sitä uudemmissa versioissa toimii.

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

Kiinnitetty asemointi -esimerkki

• navbar.htm - lähdekoodi
• navbar.css - lähdekoodi

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;
}

• relative.htm - lähdekoodi
• relative.css - lähdekoodi

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.

• z-index.html - lähdekoodi
• z-index.css - lähdekoodi

Asemointiesimerkkejä

• Erilaisia asemointeja
  • asemointi.html - lähdekoodi
  • asemointi.css - css
• Sarakejako
  • columns.htm
  • columns.css
• Liukuva sarakkeiden määrä esim. kuvagalleriassa
  • galleria.html
  • kuvagalleria.css
• Lomake
  • form.htm
  • form.css
    

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:

• ominaisuuksien jakaminen moduuleihin,
• pyöreät kulmat, varjostus ja kuvista muodostetut rajat,
• esitystasot, joilla voi määrätä näytetäänkö enemmän vai vähemmän tietoja riippuen halutusta esitystasosta (tavallinen WWW-sivu vs. kalvo),
• SVG yhdistyy tiukemmin CSS:ään,
• matemaattisten merkintöjen muotoilu,
• uusia valitsimia,
• lisäominaisuuksia tekstin muotoilemiseen,
• tapahtumankäsittely,
• nimiavaruuslaajennukset,
• sarakelayout,
• lisää ominaisuuksia kirjasinten ulkoasun muotoiluun,
• ääniefektit ja
• speech-mediatyyppi uusitaan.

Esimerkki CSS3-määrityksistä

Mediatyypit

• Mediatyyppien tarkoituksena on mahdollistaa sivun ulkoasun määrittely mediakohtaisesti.
• Esimerkiksi WWW-dokumentti voidaan muotoilla erilaisilla mediatyypeillä eri tavalla paperille kuin näytölle.
• Hyötynä tästä saavutetaan, että jokaista mediaa varten voidaan tehdä omat tyylimääritykset, jotka mahdollistavat tiedon tehokkaan saamisen useamman median kautta.

Erilaiset mediatyypit

• all-tyyppiin voidaan määritellä asetuksia kaikille laitteille.
• braille-tyyppiin voidaan määritellä asetuksia esimerkiksi pistekirjoitusnäyttöä varten.
• embossed-tyyppiin voidaan määritellä asetuksia brailletulostimia varten.
• handheld-tyyppiin voidaan määritellä asetuksia pieninäyttöisille laitteille (esim. mobiililaitteet).
  • Ongelmana tässä on se, että nykyiset älypuhelimet ilmoittavat yleensä mediakseen screen (tietokonenäyttö), minkä vuoksi ne eivät käytä mahdollisia handheld-mediatyypin asetuksia (vaikkakin ne olisivat useasti käytettävämmät puhelimien pienille näytöille).
  • Vaihtoehtoinen tyylitiedosto (Alternate StyleSheet) voikin olla parempi vaihtoehto älypuhelimille. Siinäkin ongelma on yleensä se, etteivät älypuhelimien selaimet osaa tarjota vaihtoehtoisia tyylitiedostoja valikoiden kautta, minkä vuoksi vaihtaminen täytyy toteuttaa esimerkiksi JavaScriptin avulla.
• print-tyyppiin voidaan määritellä esimerkiksi paperille tulostettavaksi tarkoitettuja asetuksia.
• projection-tyyppiin voidaan määritellä asetukset projektoreita varten.
• screen-tyyppiin voidaan määritellä tietokonenäytöllä käytettäviä asetuksia.
• speech-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreita varten.
• tty-tyyppiin voidaan määritellä tasalevyistä kirjasinta käyttäviin laitteisiin.
• tv-tyyppiin voidaan määritellä asetuksia televisiotyyppisille laitteille.

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.

• page-break-before-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen ennen lohkoa.
• page-break-after-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen lohkon jälkeen.
• page-break-inside-ominaisuudella voidaan määritellä sivunvaihdon käyttäytyminen lohkon sisällä.
• Sivunvaihdon esiintyminen voidaan kieltää arvolla avoid ja sivunvaihto voidaan pakottaa arvolla always.

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ä 
left   pakota sivunvaihtoja niin, että seuraava sivu on vasen 
right  pakota sivunvaihtoja niin, että seuraava sivu on oikea 
*/

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

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:

• Näyttöalueen koko (leveys ja korkeus)
• Tulostuspaperin koko
• Median suunta (pysty tai vaaka)
• Median kuvasuhde
• Median värimäärä
• Median resoluutio

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. Myös Internet Explorer alkoi tukea mediakyselyitä versiosta 9 alkaen.

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.