[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Mediatyypit ja -ryhmät sekä tulostus

Aiheet

Mediasääntö ja -tyypit

CSS2 tarjoaa monenlaisia mahdollisuuksia räätälöidä sivusto eri esityslaitteita varten. Yleisimmin tuettuja ovat normaali näyttöesitys ja tulostus. Niille voi antaa @media at-säännön avulla toisistaan poikkeavan esitysasun.

Alla on W3C organisaation spesifikaation pohjalta muokattu esimerkki:

@media print {/* toimii ainakin MS IE 5.x, uusilla Netscape/ Mozilla ja Opera4.+ selaimilla */
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt }
}
@media screen, print {/* muut mahdolliset mediatyypit: aural, braille, embossed, handheld, projection, tty, tv - huomaa, että laitteen täytyy tunnistaa itsensä eli tietyt laitteet tarvitsevat erityisselaimen eikä toimivuutta voi testata ennen kuin kyseinen selain on valmistettu! */
body {line-height: 1.2}
} /* huomaa, että kaarisulut ympäröivät tavanomaiset määrittelyt */
W3C: CSS2: 7 Media types; 7.2.1 The @media rule[Pw].

Kun mediasääntö liitetään samaan tyylisivuin, sääntöjen merkitystasoja kuvaa jo aiemmin käyttämäni kaavio, johon olen lisännyt yhden tason (mediasääntölohko voi sisältää useita sääntöjä aivan kuten kuvauslohko voi sisältää useita kuvauksia):

mediasääntölohko (media rule block)
sääntö (rule)
kuvauslohko (declaration-block)
kuvaus (declaration)
valitsin (selector) ominaisuus (property) arvo (value)
@media print { body { font-family : Verdana, Arial, sans-serif; } }

Edellä olleessa kaaviossa print on ns. mediatyyppi (media type). Mediatyyppitiedon voi liittää myös STYLE tai LINK-elementteihin (<LINK rel="stylesheet" type="text/css" media="print">) ja @import -sääntöön (esim. @import url(printti.css) print; - tämä tiedosto haetaan vain tulostettaessa).

Selainkohtaisia huomautuksia:

  1. Yleisimmin tuettu arvo on screen, joka toimii ainakin joissakin MS IE 4.x, Netscape 4.x ja Opera 3.51+ versioissa. Opera 3.51-3.6x tukee myös arvoa all ja Opera 4.x+ sen lisäksi arvoa projection. MS IE 4.x+ tukee myös all ja print. Jälkimmäinen toimii myös Netscape 4.x -selaimissa. Vastaavat arvot toimivat monessa selaimessa myös at-säännön @media kanssa. Mediatyyppien käyttämisessä on kuitenkin seuraavia ongelmia:

  2. Attribuutti media toimii oikein STYLE elementin kanssa testaamistani selaimissa vain Mozilla 0.7+:ssa. Muut selaimet lukevat normaalille näyttöesitykselle osan seuraavasta CSS:stä vaikka niiden ei pitäisi niin tehdä:

    <style type="text/css" media="projection">
    <!--
    @import url(../Css/CssSiteProjection.css); /* tämä pitäisi ohittaa */
    body.CssSite div.docSlide p {color:red !important} /* MS IE 5.5+ ja Opera 5.x+ osaavat ohittaa tämän, joten attribuutti media osittain toimii */
    -->

    </style>
  3. Operalla on vastaava ongelma myös LINK elementtiä käytettäessä, mikäli tuontisääntöä ei tarkenneta (esim. @import url(...) screen;) tai käytetä tuoduissa tiedostoissa medialohkoja.

  1. @import url(...) screen; tms. toimii testaamistani selaimista vain Mozilla 0.7+:ssa ja Opera 5.1x+:ssa.

  2. MS IE 4.x Windows ja Opera 3.x lukevat @media print {...} myös näytölle (tosin MS IE:llä jää ensimmäinen sääntö lukematta). @media screen {...} täytyy kirjoittaa viimeiseksi ja on katsottava, että kaikki tarvittava CSS on määritelty uudestaan. Mahdollisesti sama ongelma media attribuuttien kanssa.

  3. Netscape 4.x ei lue LINK ja STYLE elementtejä, mikäli attribuutilla media on useampi arvo, esim. media="screen,print". Netscapella on myös eräs toinen seikka, johon viittaan tällä edempänä.

  4. MS IE 5.0 Mac ja Netscape 4.x eivät lue medialohkojen sisällä olevia sääntöjä. Koska tuontisääntö tuottaa ongelmia Operalle, @media ja @import at-sääntöjä ei tule lainkaan käyttää, mikäli halutaan yleistoimivasti hyödyntää mediatyyppejä.

  1. Operassa on useiden mediatyyppien antamisen kanssa ongelmia (käsittelen niitä tarkemmin sivulla[S]).

  2. Kun Opera 4.x+:ssa käynnistää ns. full screen mode -tilan, Opera on ns. esitysmuodossa (presentation mode), jolloin @media screen (koskee myös @media print) or vastaavat media-attribuutit eivät toimi, mutta on mahdollista käyttää mediatyyppiä @media projection. Olen huomioinut tällä sivulla myös tämän mediatyypin (olen optimoinut sen 800x600 näytölle - käytön ohjeet[S]). Kokeile, jos sinulla on sangen uusi Opera - paina F11 näppäintä!

    Opera Software: XML in Opera.

Mediaryhmät

Normaali näyttöesitysmedia, kuten eräät muutkin mediatyypit ovat ns. jatkuvaa media (continous media). Mediatyypit print ja projection ovat osa CSS2:n sivutettua mediaa (paged media), joka on yksi mediaryhmä (media group).

Sivutetussa tulostus- ja näyttömediassa pyritään hallitsemaan sivutkatkot.

Tavanomainen paperitulostus, normaali näyttöesistys ja projektioesitys ovat kaikki osa visuaalista muotoilumallia (visual formatting model). CSS2:n kuuluu myös ei-visuaalisia muotoilumalleja (formatting models) ja erityismedioita näkövammaisia varten, joita ovat kuulomuotoilumalli (aural rendering model) ja kosketeltava media tactile media).

Lisäksi on otettava huomioon esityslaitteen ominaisuudet, joihin kuuluu mm. se, voiko käyttää lainkaan grafiikkaa. tai voiko käyttäjä vaikuttaa esityksen lopputulokseen vai ei.

Seuraava lista esittelee mediaryhmät, muotoilumallit sekä niihin liittyvät mediatyypit, mikäli niitä on vain yksi tai kaksi:

  • Visuaalinen muotoilumalli
  • Kuulomuotoilumalli - mediatyyppi aural
  • Kosketeltava media - mediatyypit braille ja emboss
  • Sivutettu media - jatkuva media (kyse on siitä, että käytetäänkö sivunkatkosääntöjä vai ei)
  • Interaktiivinen media - staattinen media (interactive - static; voiko käyttäjä muuttaa sivun esitysasua vai ei)
  • Kehikko - rasteri (grid - bitmap; edellisessä näyttö käyttää ns. kiinteävälistä kirjasinkehikkoa (fixed-pitch character grid), joka ei tue grafiikkaa; jälkimmäisessä näyttö toimii rasterina, jolloin voidaan käyttää myös suhteutettuja merkkejä ja esittää grafiikkaa)

Muotoilumallien, mediatyyppien ja -ryhmien välistä suhdetta kuvaa W3C spesifikaatiosta lainattu taulukko (kohta ei sovellu, merkitään englanniksi N/A (= not applicable), joka merkitsee sitä, että kyseistä vaihtoehtoa ei voi soveltaa tiettyyn tilanteeseen; ks. mediatyyppien suomennosehdotuksia[S][Pw]:

Mediatyypit Mediaryhmät
jatkuva/ sivutettu visuaalinen/ kuulo/ kosketeltava kehikko/ rasteri interaktiivinen/ staattinen
aural jatkuva kuulo ei sovellu molemmat
braille jatkuva kosketeltava kehikko molemmat
emboss sivutettu kosketeltava kehikko molemmat
handheld molemmat visuaalinen molemmat molemmat
print sivutettu visuaalinen rasteri staattinen
projection sivutettu visuaalinen rasteri staattinen
screen jatkuva visuaalinen rasteri molemmat
tty jatkuva visuaalinen kehikko molemmat
tv molemmat visuaalinen, kuulo rasteri molemmat
Media

Yleisiä huomautuksia:

  1. Eräät ryhmittelyt ovat lähinnä suosituksia. Mediatyyppi projection voi olla myös interarktiivinen. Mediatyypin aural voidaan pause-toiminnoilla luoda tavallaan sivutettua mediaa.

  2. Taulukon ongelmallinen kohta on mediatyyppi handheld. Ryhmä tarkoittaa käsipuhelimia ja kämmenmikroja (kuten esim. palm pilot -laitteet). Niiden grafiikan käsittelykyky vaihtelee. WAP-puhelimet ovat vasta tulossa markkinoille ja niissä voi käyttää jonkin tason grafiikkaa käsittely, mutta ei kuitenkaan kämmenmikrojen tasoa. Kummat tulisi huomioida ensisijaisesti? Ryhmä tty tarkoittaa vain tekstiä näyttäviä laitteita, joten se ei tule kysymykseen. Pitäisikö olla oma ryhmä mobile_phones? Tein WAP-ongelmista liitesivun[S][Pw].

Fonttityyppien at-sääntö

Eri visuaalisten esitystapojen tueksi on myös mahdollista ladata fontteja @font-face säännön avulla. Seuraavassa kuitenkin yksi W3C sivuilta ottamani esimerkki:

@font-face {
src: local("Helvetica Medium"), /* selain yrittää ensin etsiä asennetun fontin */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* mikä selain ei löydä sellaista, se lataa fontin; mikäli ladattua fonttia ei löydy käytetään vaihtoehtoista fonttia */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face[Pw].

Koska nimelliskooltaan samankokoinen fontti saattaa näyttää kovinkin erikokoiselta, CSS2 tuo laskentakaavoja (font matching algorithm), joilla korvaavien fonttien koko tuottaisi mahdollisimman samankaltaisen lopputuloksen (font-size-adjust).

W3C: CSS2: 15 Fonts[Pw], 15.2.4 Font size[Pw], 15.5 Font matching algorithm[Pw].
Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.

Selainkohtaisia huomautuksia:

  1. font-size-adjust sekä eräät muut fonttien käsittelyyn liittyvät erityispiirteet eivät ole toimineet testaamissani selaimissa.

  2. Microsoftin ilmoituksen @font-face at-rule toimii MS IE -selaimissa alkaen MS IE 4.0 Windowsista (todensin versiolla 6.0), mutta viitatun fonttitiedoston tiedostomuoto täytyy olla joko .eot tai .ote, ei tavanomainen fonttitiedosto (esim. TT028M_.TTF). Koska @font-face toimii MS IE -selaimissa vain tietyillä tiedostomuodoilla, toteutus on tavallaan selainkohtainen.

  3. Netscape 4.x tukee epästandardia @fontdef at-sääntöä, joka tukee .pfr-tiedostoja (esim. @fontdef url("http://www.example.com/sample.pfr");). Ladattavat fontit toimivat myös epästandardin linkkisuhteen avulla (<LINK rel="fontdef"...). Mozilla org. saamani erittäin luotettavan s-postin (21.07.200) mukaan @font-face ei ole vielä tuettu.

[Alku]