CSS-mediatyypit ja asemointi - Luento 6
- Luentotaltiointi
- Mediatyypit
- Erilaiset mediatyypit
- Asemointiesimerkkejä
- CSS-vinkkejä
- CSS 2.1:n muutokset CSS2-suositukseen
- CSS3
- Harjoitustyö
Tutustutaan mediatyyppikohtaisiin CSS-asetuksiin ja jatketaan asemointiesimerkkejä.
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.
- aural-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreita varten. aural-tyyppi on poistettu suosituksesta ja korvautuu myöhemmin speech-mediatyypillä.
- braille-tyyppiin voidaan määritellä asetuksia esimerkiksi pistekirjoitusnäyttöä varten.
- embossed-tyyppiin voidaan määritellä asetuksia brailletulostimia varten.
- handheld-tyyppiin voidaan määritellä pieninäyttöisille laitteille.
- 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.
- tty-tyyppiin voidaan määritellä tasalevyistä kirjasinta käyttäviin laitteisiin.
- tv-tyyppiin voidaan määritellä asetuksia televisiotyyppisille laitteille.
Sivun ominaisuuksia
Sivun ominaisuuksilla voidaan hallita dokumenttia sivutettuna. Seuraavassa muutamia sivuttamiseen liittyviä ominaisuuksia.
- @page-määrityksen sisällä voidaan kertoa sivutukseen liittyviä ominaisuuksia, kuten esimerkiksi koko (size), marginaalit.
- Sivunvaihtoon liittyvät ominaisuudet
- page-break-before-voidaan määritellä sivunvaihdon käyttäytyminen ennen kappaletta.
- page-break-after-voidaan määritellä sivunvaihdon käyttäytyminen kappaleen jälkeen.
- page-break-inside-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 { h1, h2, h3 { page-break-after: avoid; page-break-inside: avoid; } ul, ol, dl { page-break-before: 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 aural-mediatyypin määrittelyistä : aural.css.
- Esimerkki handheld-mediasta
Asemointiesimerkkejä
Perusongelma kanssa on saada aikaan monisarakkeinen sivusommittelu.
Taulukkotaitto
- Taulukkoesimerkki
- Se on helppoa ja toimii vanhoillakin selaimilla
- Rakenteen hajottaminen ja uudelleenjärjestely ei ole helppoa
- Semanttisesti väärin!
- Taulukko taulukon sisällä aiheuttaa jo vakavia esteitä!
Float-asemointi
- Float-sarakkeet
- Ongelmana jatkuva tausta
- Sarakkeita voidaan uudelleenjärjestellä 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.
- 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.
- 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
- 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 yleensä kannata antaa prosentteina, 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.
- Lähde: Alistapart: Negative Margins
- Saman kokoiset sarakkeet
- Rakenne pysyy järkevänä
- Toimiiko varmasti kaikilla selaimilla? FF2, IE7, Opera 9 ok.
- Lähde: Equal Height Columns - In search of One True Layout
Linkkejä:
CSS-vinkkejä
Lomake-elementit ja CSS
Lomake-elementtien muotoilu CSS:llä: Älä tee.
Lomake-elementtien ulkomuotoilu CSS:llä on liian epävarmaa joten sitä ei juurikaan kannata tehdä. Enintään voi yrittää vaihtaa kirjasimen tyyppiä, kokoa ja tekstin ja taustan väriä. Liiallinen lomake-elementtien ulkomuodon muuttaminen oletuksesta poikkeavaksi aiheuttaa vain käytettävyysongelmia.
IE6 ja CSS
Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE:llä, käytä valitsinta >, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE:ssä ja tekstin yhteenkirjoittamalla IE 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: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 laskee väärin lohkojen koon
Huomaa, että IE7 laskee koot oikein.
IE6 ja position: fixed
Kiinnitetty asemointi ei toimi oikein IE6:ssa. Ongelman voi kiertää seuraavan esimerkin avulla.
position: fixed
toimii oikein IE7:ssä.
Standard & Quirks Mode
XHTML-dokumentin alussa oleva dokumenttityypin määritys määrää sen millä tavalla CSS:ssä ja muita ulkoasumuotoiluja tulkitaan.
- Activating the Right Layout Mode Using the Doctype Declaration
- Mozilla Quirks Mode behavior
- Opera 9 Doctype Switches
Floatattu kuva valuu lohkon ulkopuolelle
Lisätietoa
- How to hide CSS from buggy browsers
- Tricking browsers and hiding styles
- Position is everything
- windows explorer vs. the standards
CSS 2.1:n muutokset CSS2-suositukseen
CSS 2.1 korjaa muutamia CSS2-suosituksessa olleita virheitä ja poistaa joitain ominaisuuksia joita ei ole tuettu. Oleellisimmat muutokset:
@font-face, font-stretch, font-size-adjust
-ominaisuudet on poistettu.text-shadow
ominaisuus on poistettuaural
-mediatyyppi on poistettu. CSS3:n mukana pitäisi tulla uusispeech
-mediatyyppi- Rajan väri voi olla nyt myös
transparent
- Täyte (
padding
) -ominaisuutta ei ole taulukon riveillä, riviryhmillä, otsikkoryhmillä yms.
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 mm. mahdollisuus valita elementti sen sisältämän tekstin perusteella
- Lisäominaisuuksia tekstin muotoilemiseen
- Tapahtumankäsittely
- Nimiavaruuslaajennukset
- Sarakelayout
- Lisää ominaisuuksia kirjasinten ulkoasun muotoiluun
- Ääniefektit
- Speech-mediatyyppi
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. Riittääkö pelkkä alleviivaus? */ a:link[href^="#"] { color: black; } 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: ""; }
Harjoitustyö
- Suunnitelma 15.2. mennessä
- Toteutus 60 pv suunnitelman hyväksymisestä
Käyttäjien kommentit