Mediavalg i CSS

Hva

Mulghetene for å spesifisere media i CSS har utviklet seg i versjon 2 og 3. Det betyr altså at vi skal kunne spesifisere hvordan siden vår skal vises på medier med forskjellige egenskaper. Utviklingen av webløsninger for stadig nye medier har presset fram denne utviklingen. Responsive design [1] er et nøkkelord her.

Vi skal se litt på hvordan vi kan gjøre dette ved å tilegne stilsett til forskjellige medier og hvordan vi skal kunne spesifiserehvordan enkelt-elementer skal vises innefor ett og samme stilsett.

Mediatyper

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 Media Queries [2] for å hjelpe oss med dette.

W3C foreslo i versjon 2 en rekke mediadefinisjoner og forutså at det ville bli behov for flere.

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

I praksis er det vel slik at det er de tre første som er implementert i de fleste nettlesere. Vi kan kanskje forvente at aural, kanskje under navnet speech, er den neste som bli vanlig ?. Opera hadde i noen versjoner en ganske fiks implementering av projection. Synd at den forsvant fordi det gjorder det enkelt å vedlikehold både en web-side, et printet dokument og en "foredrags"-versjon (projection).

Vi kan bruke et eksempel til å studere dette nærmere.

Vi tar for oss en enkel, og meningsløs, HTML-fil som ser slik ut:

<!DOCTYPE HTML>
<html>
 <head>
  <title>demo2</title>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="demostil2.css">
 </head>
 <body>
  <h1>Alternativene</h1>
   <div class="title">1:</div>
   <div class="alternativ">
   JA
   </div>
   <p>
   eller
   </p>
   
   <div class="title">2:</div>
   <div class="alternativ">
   Nei
   </div>
   <p class="msg">
   ... forsøk print-preview
   </p>
 </body>
</html>

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

/* Stylesheet for screen, print   
*/
@media screen{
   h1{font-size: 24px; font-weight: bold; color:black;}
   div.title{font-size: 20px; font-weight: bold; color:red; 
   display:inline; margin-top:20px;}
   div.alternativ{ display:inline; font-size: 34px}
   
}
 
@media print{
   h1{font-size: 24px; font-weight: bold; color:blue;}
   div.title{display:none;}
   div.alternativ{ font-size: 200px; 
      padding-top:200px;
      page-break-before:always}
   p{display:none}
}

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 skal vi kunne se print-varianten når vi printer eller når vi ber om å få se print-preview.

Prøv her https://borres.hiof.no/wep/css/media/mediademo2.html

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

Spesifikasjon (queries)

Vi kan gå nærmere i detalj ved å spesifisere flere egenskaper ved mediet. W3C [2] foreslår følgende :

width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Ikke alle disse er implementert i de vanlige nettleserne. De viktigste vi kan bruke i øyeblikket er : width, max-width, min-width og orientation. F.eks:

@media (width: 400px) {}

@media (min-width: 100px) {}

@media (max-width: 1000px) {}

@media screen and (max-width: 699px) 
              and (min-width: 520px) {}

@media all and (orientation:landscape) {}

Vi ser at det er egenskaper av denne typen som kan hjelpe oss å identifisere brett og mobiler av ulik størrelse, og som er orientert på forskjellig måte. Det er imidlertid en del skjær i sjøen hvis vi skal være veldig nøyaktige. Ulike enheter rapporterer ikke på samme måte når det gjelder bredde. Vi har da valget om vi vil sette oss inn i alle detaljer når det gjelder alle aktuelle medier, eller om vi lager løsninger som er "bra nok".

Merk også at mange av de forklaringene og strategiene du finner på nette for å bruke disse egenskapene refererer til begrepet viewport. Dette begrepet opptrer også i en meta-tag som vi praksis ønsker å bruke n på websider vi ønsker å lage fleksible, f.eks:

<meta name="viewport" 
      content="width=device-width, 
	       initial-scale=1.0"/>

Valg av stilsett

Vi kan altså legge media-spesifikasjoner inne i et style element

<style>
@media all{
   h1{font-size: 24px;}
   p{font-size: 12px;}
}

@media print{
   h1{font-size: 48px;
   page-break-before:always}
}
@media screen{
   .printOnly{display:none}
}
</style>

eller i .css-filer som vi linker til

Vi kan også bruke separate filer og gjøre slik på websiden:

<link rel="stylesheet" 
	media="screen and (min-width:500px)" 
	href="big.css" />

Referanser

Responsive web design Wikipedia en.wikipedia.org/wiki/Responsive_web_design 14-04-2016

Media Queries W3C www.w3.org/TR/css3-mediaqueries/ 08-03-2014

CSS (Cascading Style Sheets) W3C www.w3.org/TR/CSS/ 08-03-2014