CSS >Media

Mediavalg i CSS

Hva

Stilsett for forskjellige media

CSS versjon 2 introduserer mediaspesifikasjon som en av flere interessante muligheter. Utgangspunktet er at de sidene vi produserer skal kunne fungere på ulike media. For å få til dette må vi kunne undersøke hvilket media som skal vise fram vår side. W3C har introdusert Mdia Queries [1] for å hjelpe oss med dette.

W3C foreslår følgende mediadefinisjoner og forutser at det vil bli behov for flere:

all	generell, brukes til alle media
aural	stemme syntesizere
braille	enheter som gir blindeskrift
embossed	enheter som gir sideorientert blindeskrift
handheld	små, håndholdte enheter, typisk med liten "skjerm"
print	sideorienterte enheter
projection	projiserte presentasjoner
screen	"normale" dataskjermer
tty	enkle, karakterorienterte enheter
tv	lav oppløsning, begrenset scroll, tilgang på lyd

Hva betyr så dette i praksis. Det vi er ute etter er selvsagt at vi som forfattere, eller innholdsgeneratorer, ønsker at det vi lager skal fungere best mulig i det mediet leseren velger å bruke. Dette kan vi selvsagt gjøre ved å generere sidene spesielt for ulike medier, men det ville i mange sammenhenger være en fordel om vi kunne lage en side som så og si tilpasset seg mediet. Ofte vet vi ikke på forhånd hvilket medium siden vil bli framstilt i.

Nettlesere på vanlige PC'er er en av de programmene som skal kunne handtere deler av dette. Det viser seg at implementasjonen av media-tilpassing er i varetatt på litt forskjellig måte. Vi kan bruke et eksempel til å studere dette nærmere.

Vi tar for oss en HTML-fil med de 10 første av Shakespeares sonetter. ( De som vi se alle 154 kan se på eksempelet Sonetter . Fila, mediademo.html, ser slik ut, forkortet:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Mediademo</title>
  <link rel="stylesheet" href="shakeprintstil.css" />
 </head>
 <body>
  <h1>Shakespeares sonetter</h1>
   <h2>I.</h2>
   <div class="sonett">
   From fairest creatures we desire increase, <br/>
   That thereby beauty's rose might never die, <br/>
   But as the riper should by time decease, <br/>
   His tender heir might bear his memory: <br/>
   But thou, contracted to thine own bright eyes, <br/>
   Feed'st thy light's flame with self-substantial fuel, <br/>
   Making a famine where abundance lies, <br/>
   Thyself thy foe, to thy sweet self too cruel. <br/>
   Thou that art now the world's fresh ornament <br/>
   And only herald to the gaudy spring, <br/>
   Within thine own bud buriest thy content <br/>
   And, tender churl, mak'st waste in niggarding. <br/>
   Pity the world, or else this glutton be, <br/>
   To eat the world's due, by the grave and thee.<br/>
   </div>
	...
</body>
</html>

Som det gå fram av koden er det koplet til et stilsett, shakeprintstil.css. Dette stilsettet definerer stiler for tre forskjellige medier: screen, print og projection. Stilsettet er i sin helhet slik:

/* Stylesheet for changing media
   Børre Stenseth, nov 2003
*/

@media screen{
   h1{font-size: 24px; font-weight: bold; color:black;
     }
   h2{font-size: 20px; font-weight: bold; color:red;
      margin-left:100px;
     }
   div.sonett{ font-size: 14px; margin-top:2px;
     }
   div.sonett:first-letter { font-size: 200%;
                             font-weight: bold;
                             padding-right:5px;
                             color:black
     }
}


@media print{
h1{font-size: 24px; font-weight: bold; color:blue;}

h2{   font-size: 20px; font-weight: bold; color:gray;
    margin-left:100px;
    page-break-before:always}
div.sonett{ font-size: 14px; padding-top:20px;}
div.sonett:first-letter { font-size: 200%;
                          font-weight: bold;
                          padding-right:10px;
                           color:blue }
}

@media projection{
   h1{font-size: 36px; font-weight:bold; color:blue;
      margin-left:100px; margin-top:100px
      }

   h2{font-size: 12px; font-weight: bold; color:black;
       margin-left:0px; page-break-before:always
     }
   div.sonett{ font-size: 30px;
               margin-left:100px; margin-top:100px
     }
   div.sonett:first-letter { font-size: 200%;
                             font-weight: bold;
                             padding-right:10px;
                             color:blue
     }
}

Stilsettet er altså forberedt for å ta signaler om mediaskifte. Hvis vi skal se på HTML-fila i en nettleser så er vi avhengige av at nettleseren kan gjenkjenne og reagere på skifte i medium, eller med andre ord kan vi provosere fram en situasjon som tolkes som mediaskifte. I de fleste nettlesere vil vi kunne se print-varianten når vi printer eller når vi ber om å få se print-preview.

Prøv denne http://www.it.hiof.no/~borres/dw/cssmedia/mediademo.html

Eller du kan forsøke å be om File - Print Preview av den siden du leser nå.

Opera versjon 7+ har i tillegg til screen og print implementert projection slik at dette "skrus på" når vi trykker F11 (full screen). Vi kan da bla fra side til side med PgUp og PgDn.

Prøv denne i Opera http://www.it.hiof.no/~borres/dw/cssmedia/mediademo.html

Mediavalg er interessant fordi vi kan vedlikeholde en fil for mange formål. Vi kan for eksemple tenke oss at vi har en artikkel som skal kunne leses på skjermen (screen) og vises i et foredrag på storskjerm (projection), samt at den skal kunne printes med kontrollerbare sideskift (print). Det siste er interessant fordi en slik printstil også vil fungere når vi printer til en fil, slik som vi kan gjøre når vi lager pdf. Det betyr at vi kan kontrollere sideskift, i tillegg til all annen layout.

Referanser

Media Queries W3C www.w3.org/TR/css3-mediaqueries/ 18-11-2012

CSS21 (Cascading Style Sheets) W3C www.w3.org/TR/CSS21/ 08-10-2012

Du kan hente ned de to involverte filene, sonettene og stilsettet, her: tofiler.zip

Eksempelet Presentasjon beskriver et forsøk på å få til en screen/print/projection løsning i flere nettleserne (IE, FireFox, Opera, Chrome)

Vedlikehold

Børre Stenseth, revidert november 2012

( Velkommen ) CSS >Media ( Sider i CSS )