Vælg normal visning

Brugervalgte stylesheets

Ved hjælp af den menuen i højre spalte kan du vælge, hvorledes denne side skal præsenteres.

Denne artikel handler om denne funktionalitet, det vil sige hvorledes du ordner det sådan, at dine brugere selv kan vælge skriftstørrelse.

Jeg har i nogle år interesseret mig for problemkredsen omkring skriftstørrelser på websider. Herom har jeg så begået en håndfuld websider (Valg af skriftstørrelse).

De overvejelser, der liggger bag disse artikler, har ført mig frem til en lidt vigtig, men også noget kontroversiel, konklusion.

Jeg anbefaler nemlig valg af em-enheden, når du skal angive størrelse på dine skrifter. Det er, så vidt jeg kan konstatere, ikke god latin i gurukredse. Og det er i hvert fald ikke det, de fleste gør. De fleste gør, som jeg selv har gjort igennem mange år: Sætter skriftstørrelser i pixel.

Men én har jo lov at blive klogere.

Jeg erkender, at det måske ikke er alle mine læsere, der har lyst til at hoppe i den båd med begge ben. Derfor peger jeg i denne artikel på en udvej, der giver dig – og ikke mindst de brugere, der besøger din website – valget mellem din ufleksible pixelbaserede skrift og et eller flere andre skriftbilleder.

Jeg har på websiten A List Apart fundet et script, jeg synes er lidt mere tilgængeligt end det, jeg byggede min oprindelige artikel på. (Det var Paul Sowdens banebrydende artikel i 2001, se afsnittet om mine kilder i menuspalten til højre).

Scriptet

Scriptet indsættes i head-delen af alle de sider, der skal vises med et alternativt skriftbillede (eller et helt andet design. Det kan jo også overvejes, jf. valgmuligheden "Vælg kun tekst" her på siden). Scriptet kan også gøres eksternt og indlæses ved hjælp af den sædvanlige JavaScript reference.

<script src="[sti]styleswitcher.js" 
--> type="text/javascript"></script>

Scriptet som sådan ser således ud:

  if(!document.getElementById)
    alert("Du bruger en ældre browser, der 
-->    \nikke tillader brugervalgte stylesheets.")
  else if(document.cookie.indexOf('style=1')>=0){
    document.write('<link rel="stylesheet" 
-->    type="text/css" href="[sti]stylesmall.css" 
-->    media="screen">\n');
  }
  else if (document.cookie.indexOf('style=2')>=0) {
    document.write('<link rel="stylesheet" 
-->    type="text/css" href="[sti]stylebig.css" 
-->    media="screen">\n');
  }
  else if (document.cookie.indexOf('style=3')>=0) {
    document.write('<link rel="stylesheet" 
-->    type="text/css" href="[sti]style_sh.css" 
-->    media="screen">\n');
  }
  else {
    document.write('<link rel="stylesheet" 
-->    type="text/css" href="[sti]almstyle.css" 
-->    media="screen">\n');
  }

function chooseStyle (newstyle){
  if (!document.getElementById){
    alert("Du bruger en ældre browser, der 
-->    \nikke tillader brugervalgte  stylesheets.");
    return false;
  }
  var expdate = new Date();
  expdate.setTime(expdate.getTime() + 
-->  (1000*3600*24*365));
    document.cookie = 'style=' + newstyle + '; 
    expires=' + expdate.toGMTString() + '; path=/';
    self.location.reload();
}

Hensigten med dette script er at indlæse ét af fire mulige stylesheets, afhængigt af nogle forskellige betingelser.

Første gang en webside med dette script indlæses, sker der følgende:

  1. Det konstateres, om browseren er en nyere browser (om denne teknik, se websiden Browsersniffing). Hvis det er en ældre browser serveres en advarselsboks, der fortæller brugeren, at hun ikke kan anvende denne funktionalitet.
  2. En nyere browser falder igennem, som det hedder, og tjekker efter, om brugeren har en cookie med indhold style=1, style=2 eller style=3
  3. En sådan cookie findes ikke, før brugeren har valgt et alternativt stylesheet, så derfor ender denne bruger på sidste else-sætning, der skriver en stylesheet reference til det "normale" stylesheet ind i head-delen af dokumentet.
  4. Brugeren kan nu vælge et alternativt stylesheet ved at udløse funktionen chooseStyle().
  5. Funktionen chooseStyle() skal have en parameter i form af et tal, 0, 1, 2 eller 3
  6. Er parameteren 0, er ingen af de betingelser, vi satte for at indlæse et nyt stylesheet opfyldt, og websiden med standard-stylesheet'et genindlæses. (Funktionens sidste linie).
  7. Er parameteren derimod 1, 2 eller 3, sættes en cookie (med en bestandighed på 1 år) med indholdet style=1 eller style=2.
  8. Når sidste linie udføres, foretages en reload, og scriptet læser indholdet af den cookie, der lige er sat og indlæser dermed det ønskede stylesheet.

Ad. pkt 1: I Daniel Ludwins artikel på A List Apart gør han meget ud af browserfilteringen og serverer forskellige stylesheets til forskellige ældre browsere tilbage til Netscape 4 og Microsoft Internet Explorer 4.

Hvis du også ønsker dette, er du nødt til at læse Daniels artikel. Jeg gør ikke noget ud af dette og har luget den kode væk, der sørger for dette.

Funktionsknapperne på websiden

Brugeren skal jo på websiden have lejlighed til at foretage disse valg, så derfor lægges funktionskaldene ind i nogle passende aktive knapper. Jeg har brugt de samme stylesheet-formaterede knapper, som jeg bruger til så mange andre ting. Derfor ser disse knapper på denne side således ud i koden:

<ul class="cssmenu">
<li><a href="#" 
onclick="chooseStyle(1);return false;">
Vælg en mindre skrift</a></li>
<li><a href="#" 
onclick="chooseStyle(0);return false;">
Vælg en medium skrift</a></li>
<li><a href="#" 
onclick="chooseStyle(2);return false;">
Vælg en større skrift</a></li>
<li><a href="#" 
onclick="chooseStyle(3);return false;">
Vælg kun tekst</a></li>
</ul>

Når en cookie først er sat, har den indflydelse på alle sider, hvor scriptet er indsat i head-delen af siden, men ikke på andre sider. Det gælder, uanset om du har de knapper på siden, hvor brugeren kan vælge stylesheet.

Du kan således vælge at friholde nogle websider for de alternative stylesheets, og/eller du kan vælge kun at bringe knapperne, hvormed brugeren vælger stylesheet, på nogle af siderne.

Et lysende eksempel

CSS-guruen Eric Meyer, som jeg har nævnt i andre artikler om skrift og skriftstørelser, har på sin website virkelig gennemført dette princip. På www.meyerweb.com kan du vælge op mod et dusin markant forskellige styles og tillige vælge en base font size som slår igennem på alle siderne.

Den bedste af begge verdener

Brug af stylesheet switching eller brugervalgte stylesheets, som jeg kalder det for, er en fortrinlig metode til at sikre masimal brugervenlighed og tilgængelighed på websiderne.

Jeg er på det rene med, at pixelbaseret layout er så indgroet hos så mange websmede, at de vil have vanskeligt ved at kvitte denne i realiteten dårlige vane. Jeg er selv ingen undtagelse, så jeg kaster ingen sten.

Jeg har imidlertid fundet på et kompromis, jeg mener er overkommeligt for de fleste:

Forestil dig, at de stylesheets, der skaber de 3 layouts, som er betegnet ved "Mindre skrift", "Medium skrift" og "Større skrift" alle er pixelbaserede. Så kan du vælge "normal" pixelstørrelse til "Medium skrift", samt 15-20 procent øget pixelstørrelse til til den største skrift og 8½ procent mindre pixelstørrelse til den mindste skrift.

Dem, der først og fremmest ønsker at kunne benytte browserens tekststørrelsesværktøj, kan du give muligheden for at vælge "Kun tekst". Dette stylesheet præsenterer det, der er væsentligt ved mine websider, nemlig artiklernes teksindhold, uden falbelader overhovedet. Sådan er der jo også nogen, der kan li' det.

Nu er næsten alle mine websider formateret således, at skriftstørrelsen kan øges og mindskes med browserens tekststørrelsesværktøj. Derfor har på alle nyere sider droppet denne stylesheet switcher, som jeg beskriver her.

Konklusion

Jeg har præsenteret en metode til at indbygge en funktionalitet i dine websider, der gør det muligt for en bruger at vælge, hvilket stylesheet af flere, brugeren er mest komfortabel med.

Det kan have stor betydning, især hvis du foretrækker absolutte eller pixelbaserede skriftstørrelser, der stort set allesammen sætter browserens tekststørrelsesværktøj ud af funktion.

Tilføjelser 2006

W3C beskriver i CSS2-specifikationen fra 1998 en mekanisme, som browserne kan stille til rådighed for brugerne, der tillader en bruger at vælge mellem forskellige stylesheets.

Problemet er blot, at Microsoft ikke har implementeret denne mekanisme i deres Internet Explorer. Derimod har Opera browseren haft en sådan i årevis, ligesom Gecko browsermotoren fra 2000 har været basis for Mozilla og Netscape 6+ browserne og senere for den populære Firefox browser.

En sådan browsermekanisme har i sagens natur ikke mulighed for en global ændring af udseendet på flere sider, kun på den side, der i øjebliket læses.

Derfor synes jeg det er mindre interessant at udnytte denne mekanisme, så meget des mere som Internet Explorer ikke har en sådan mekanisme. Den teknik, jeg har beskrevet i denne artikel, giver ikke den mulighed. Ønsker du dette, er du nødt til at studere Paul Sowdens originale artikel. (Se referencen i menuspalten til højre).

På et enkelt punt kan jeg dog score et billigt point. Ved at indsætte mit print stylesheet som “alternate stylesheet” får den, der læser denne side med Firefox eller Opera browseren mulighed for at vælge dette stylesheet i browserens Vis-menu:

<link rel="alternate stylesheet" title="Print" 
type="text/css" href="/design/res/print.css" 
media="screen,projection" />

Denne side er senest opdateret: 22. November, 2006