CSS Canviables

Estil canviable

20030909

La separació de contingut i format en les webs fetes segons els estàndards de la W3C, ens permet de poder escollir entre varis fulls d'estil per a una mateixa pàgina web. Això vol dir que podem oferir la possibilitat al visitant de triar entre varis colors, tipus i tamanys de lletra, disposició etc. I això pot ser útil per a efectes estètics o bé d'accessibilitat, per a exemple per a gent que té dificultats per a llegir lletra menuda o que confon colors, i que sel's fa dificil de llegir segons quines combinacions cromàtiques de lletra i fons.

Per a començar, crearem els estils que volem utilitzar. En aquest exemple, els anomenarem Estil 1, Estil 2 i Estil 3.

Seguidament cal enllaçar amb els fulls d'estil al <head> del document HTML:

<link rel="stylesheet" type="text/css" title="estil_1" href="estil_1.css"/>

<link rel="alternate stylesheet" type="text/css" title="estil_2" href="estil_2.css" />

<link rel="alternate stylesheet" type="text/css" title="estil_3" href="estil_3.css" />

Ara voldria fer un parèntesi: Hi ha tres maneres de fer enllaços a fulls d'estil externs.

La primera és l'anomenada "persistent", que és la diguem-ne normal, que inclou l'atribut rel amb el valor "stylesheet", i no porta aribut title. Aquest full d'estil estarà sempre actiu (i el farem servir en cas de que no vullguem que es puguin alternar, o sigui no pas en el nostre exemple).

La segona manera és l'anomenada "preferida", que és com l'anterior (l'atribut rel conté el valor "stylesheet" igual), però inclou l'aribut title. L'enllaç al full Estil 1 de l'exemple anterior, és un exemple d'aquest tipus. Aquest full d'estil també estarà sempre actiu a no ser que se li indiqui una altra cosa.

I aquesta altra cosa és el que fem si utilitzem la tercera manera, l'alternant. Aquí, com podem veure en el nostre exemple per als enllaços a Estil 2 i Estil 3, l'atribut rel conté el valor "alternate stylesheet". Per la resta és com en el cas del full "preferit". Aquests fulls, es carreguen també amb la pàgina, i s'activaran quan els ho indiquem.

Només amb això, alguns navegadors ja permeten de fer els canvis de full d'estil (normalment en el menú 'Veure'), però per a que es pugui fer amb els navegadors que no preveguin aquesta possibilitat, o bé si simplement volem que es pugui fer des de dins de la pantalla amb un clic de ratolí, cal un JavaScript:

Baixa't el JavaScript , i desa'l com a canvia_estil.js.

I per a que aquest darrer es carregui, caldrà també enllaçar-lo al <head>:

<script type="text/javascript" src="canvia_estil.js"></script>

En el cas de que haguem optat per utilitzar el JavaScript, posarem aquests enllaços en el <body>, amb el format que vullguem. Són simples enllaços per a cridar el JavaScript i que aquest activi el full d'estil que escollim:

<a href="#" onclick="canvia_estil.js('estil_1'); return false;" onkeypress="setActiveStyleSheet('estil_www'); return false;" title="" accesskey="1">Estil 1</a>

<a href="#" onclick="setActiveStyleSheet('estil_2'); return false;" onkeypress="setActiveStyleSheet('estil_2'); return false;" title="" accesskey="2">Estil 2</a>

<a href="#" onclick="setActiveStyleSheet('estil_3'); return false;" onkeypress="setActiveStyleSheet('estil_3'); return false;" title="" accesskey="3">Estil 3</a>

I ja està: clicant sobre cada un dels enlaços es cridarà un full d'estil diferent.

Dels navegadors que he provat sembla que l'únic (de mínimament modern) que no accepta els canvis mitjançant el JavaScript és el Konqueror 3.

Si vols saber amb més detall com funciona l'escript, pots llegir-te l'article de Paul Sawden a A List Apart.