CSS-mediatyypit ja asemointi - Luento 6

• Luentotaltiointi
• Mediatyypit
  • Erilaiset mediatyypit
  • Mediatyypin määritys
  • Mediaqueries
• Sivun ominaisuuksia
  • Esimerkkejä mediatyyppien käytöstä
• Asemointiesimerkkejä
  • Taulukkotaitto (hyi!)
  • Float-asemointi
  • Absoluuttinen asemointi
  • Samankorkuiset sarakkeet
• CSS-vinkkejä
  • Lomake-elementit ja CSS
  • IE6 ja CSS
  • IE laskee väärin lohkojen koon
  • IE6 ja position: fixed
  • Standard & Quirks Mode
  • Floatattu kuva valuu lohkon ulkopuolelle
  • Lisätietoa
• CSS3
  • CSS3:n uutuudet
  • Muutamia CSS3-esimerkkejä
• 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.
• speech-tyyppiin voidaan määritellä asetuksia puhesyntetisaattoreita varten.
• 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.

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
}

Mediaqueries

Uusinta uutta ovat mediakyselyt (mediaqueries) joilla voidaan tarkentaa mediatyyppiä ja siihen liittyviä ominaisuuksia.

Mediakyselyille ei ole vielä kunnollista tukea tällä hetkellä.

<link rel="stylesheet" media="screen and (color)" href="example.css" />
<link rel="stylesheet" media="screen, 3d-glasses, print and resolution > 120dpi" href="example2.css" />

Sivun ominaisuuksia

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

• 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 {
  /*
  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;
  }
  .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

Asemointiesimerkkejä

Perusongelma 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.
  • 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ä:

• 3-sarakkeiset CSS-sommittelut
• 3 column complex layout demo

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

IE ja lohkojen koko

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

Kuva ei mahdu lohkoon

Lisätietoa

• How to hide CSS from buggy browsers
• Tricking browsers and hiding styles
• Position is everything
• windows 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, 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ä