CSS-mediatyypit ja asemointi - Luento 6
Tutustutaan mediatyyppikohtaisiin CSS-asetuksiin ja jatketaan asemointiesimerkkejä. Lopuksi käydään läpi pikaisesti CSS3:sta.
Luentotaltiointi
Ongelmia videon katselussa?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.
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:
- 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. 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.
@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.
- 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.
Esimerkkejä mediatyyppien 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; } }
- Toinen esimerkki mediatyyppien käytöstä löytyy WWW-sivujen näyttämisestä
esityksenomaisesti. Esimerkiksi tämä sivu näkyy Opera-selaimella diaesityksenä,
kun sitä katsotaan kokoruututilassa.
@media projection { body { margin-top: 1em; margin-left: 1em; margin-right: 1em; font-size: 200%; } h1, h2, h3{ page-break-before: always; } .navbartop, .navbar { display: none; } }
-
Tarkempi esimerkki speech-mediatyypin määrittelyistä: speech.css.
- Esimerkki handheld-mediasta
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!)
- Taulukkoesimerkki
- Semanttisesti väärin! Ei saa käyttää.
- Rakenteen hajottaminen ja uudelleenjärjestely ei ole helppoa.
- Taulukko taulukon sisällä aiheuttaa jo vakavia esteitä!
Float-asemointi
- Float-sarakkeet
- Ongelmana jatkuva tausta.
- Sarakkeiden paikkoja voidaan hienosäätää negatiivisten marginaalien avulla.
- Skaalautuvuus ikkunan kokoon kunnossa.
Absoluuttinen asemointi
- Sarakkeet position-ominaisuudella
- Sivuosat on asemoitu reunoihin, sisältö on body-osassa ja säädetty keskellä padding-ominaisuudella.
- Skaalautuvuus ikkunan kokoon kunnossa.
- Olettaa, että body-osassa on eniten tekstiä. Jos ei ole, niin footer-osan kanssa tulee ongelmia (footer menee sivulohkojen päälle). Eräs ratkaisu ongelmaan: min-height-ominaisuudella voi säätää lohkon vähimmäiskorkeutta riippumatta sen sisällön määrästä.
- Ongelmana jatkuva tausta edelleen.
- Sarakkeet position-ominaisuudella
- Kaikki osat omissa div-lohkoissa. Tällöin footer-osan on oltava isoimmassa lohkossa. Footer-osa venytetään koko ruudun kokoiseksi ja asemoidaan sisältölohkon ulkopuolelle.
- Skaalautuvuus ikkunan kokoon kunnossa.
- CSS-määritykset riippuvat edelleen siitä mikä lohko on isoin. Ratkaisuna voisi olla jälleen min-height-ominaisuus.
- Ongelmana jatkuva tausta edelleen.
Samankorkuiset sarakkeet
- Alta näkyy sama väri
- Toimiva ratkaisu.
- Olettaa, että jokin lohkoista on pisin, sama ei toimi siis välttämättä kaikilla sivuilla. Ratkaisuna voisi olla taas min-height-ominaisuus.
- XHTML-koodiin tulee useita "turhia lohkoja".
- Toinen vastaava esimerkki: Jatkuva tausta navigointipalkille
- Huijaussarakkeet taustakuvalla
- Sarakkeet saa aikaan helposti.
- Pikselipohjainen, ei skaalautuva (paha!).
- Jos layout muuttuu, joudutaan säätämään taustakuvaakin.
- Lähde: Alistapart: Faux Columns
- Negatiiviset marginaalit
- Reunapalkkien kokoa ei useastikaan kannata antaa prosentteina (jos annetaan, niin kannattaa antaa lisäksi lohkojen minimileveydet em-yksikössä), mutta mitenkäs sitten annetaan keskellä olevan sisältöosan koko?
- Annetaan päälohkon kooksi 100 %, mutta poistetaan siitä marginaalia negatiivisella em/px-arvolla. Tällöin sivupalkki voi tulla päälohkon kanssa päällekkäin. Laitetaan päälohkon sisään kuitenkin lohko, jolla on marginaalia reunassa sen verran, että sivupalkki mahtuu sinne.
- Lohkojen jatkuvuus tehdään taustakuvalla.
- Melko monimutkainen ja ei varmuutta toimiiko vanhoilla selaimilla.
- Lähde: Alistapart: Negative Margins
- Saman kokoiset sarakkeet
- Rakenne pysyy järkevänä ja skaalautuvana.
- Sivun sisäiset linkit tuovat ison ongelman (linkin yläpuolella oleva sisältö ei välttämättä näy), joten ei yleensä kannata käyttää.
- Toimiiko muutenkaan varmasti kaikilla (vanhemmilla) selaimilla? FF3, IE7-8, Opera 9-10 OK (lukuun ottamatta sivun sisäisiä linkkejä).
- Lähde: Equal Height Columns - In search of One True Layout
- Saman kokoiset sarakkeet reunuksien avulla
- Katso demon 4 lisätehtävä.
- Rakenne pysyy järkevänä ja skaalautuvana.
- Skaalautuvuus paranisi edelleen, kun bodyn korkeus määritettäisiin prosenteilla em:n sijasta.
- Toimii järkevästi riippumatta siitä, mikä lohko on pisin.
- Toimiiko kuitenkaan kaikilla (vanhemmilla) selaimilla? FF3, IE8, Opera 10 OK.
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.
IE 6 ja CSS
Ennen Internet Explorerin 7-version julkaisua IE:n vanhemmat versiot aiheuttivat runsaasti pulmia WWW-sivujen tekijöille puutteellisella CSS:n tuella. Onneksi versiossa 7 iso osa puutteista korjattiin. Lisää korjauksia tehtiin versioon 8. Edelleen voi kuitenkin olla selailijoita, jotka käyttävät IE:n versiota 6, joten seuraavassa joitakin vinkkejä, minkä avulla sivut saataisiin näyttämään heillekin järkeviltä.
Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE 6:llä, käytä valitsinta >, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE 6:ssä ja tekstin yhteenkirjoittamalla IE 6 jättää nämä määrittelyt varmasti huomiotta. Merkitse tyylitiedostoon esimerkiksi seuraavasti:
html>body>.notforie {
/* Tänne määritykset, joita käytetään välittömästi body-elementin sisällä
olevassa elementissä, jonka luokka on notforie. */
}
p>strong {
/* Tänne määritykset välittömästi tavallisen kappaleen sisällä olevalle
strong-elementille, jota ei haluta näyttää IE 6:ssä. */
}
* html body div#forie {
/* Tänne määritykset lohkolle <div id="forie">...</div>,
jotka halutaan toimivan pelkästään IE:n vanhemmilla versioilla. */
}
IE 6 laskee väärin lohkojen koon
Huomaa, että IE 7-9 laskee koot oikein.
IE 6 ja position: fixed
Kiinnitetty asemointi ei toimi oikein IE 6:ssa. Ongelman voi kiertää seuraavan esimerkin avulla.
position: fixed
toimii oikein IE 7-9:ssa.
Floatattu kuva valuu lohkon ulkopuolelle
Lisätietoa
- How to hide CSS from buggy browsers
- Tricking browsers and hiding styles
- Position Is Everything
- Internet Explorer vs. the Standards
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.
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