Stylesheet switching, en Javascript | dimanche 09 janvier 2005, 23h51
Puisque j'utilise assez intensement le mécanisme d'Alternate StyleSheet sur ce weblog, et qu'un certain navigateur obsolète ne suit absolument pas la recommandation du W3C qui indique que les UA sont supposés offrir un mécanisme permettant au visiteur de choisir l'apparence parmi celle proposée, j'ai du recourir à une solution alternative, en JS, pour pouvoir fournir le même résultat sur tous les navigateurs. Pour être tout à fait juste, il faut quand même préciser qu'un peu d'aide pour Gecko est aussi appréciable, étant donné que par défaut, l'apparence choisie n'est pas retenue pour les visites ultérieures...
Idéalement, une telle implémentation devrait être aisée par l'utilisation de l'objet document.styleSheets présent dans le DOM du W3C, mais l'implémentation qui en est faite par les navigateurs ne permet pas réellement de l'utiliser comme il se doit... J'en sais quelque chose pour avoir voulu cet après-midi m'en servir pour modifier un peu Somatic, en faisant en sorte qu'en ayant le JavaScript desactivé, l'ensemble des sections soit affichée... Ce qui pourrait se faire facilement en ajoutant par du JS les règles dans Somatic.css dans un monde idéal. Ca marche très bien dans Gecko, j'ai réussi à me débrouiller pour que ca fonctionne dans IE aussi, mais, Opera et KHTML semble totalement réfractaire.
Enfin, pour en revenir au sujet actuel, j'ai au fil du temps adapté un script trouvé sur le web, au point qu'il n'a maintenant plus une seule ligne en commun avec ce que j'avais trouvé. Raison principale de ce post en réalité, histoire de contribuer un peu à l'evolution éventuelle des scripts utilisées sur le web.
L'utilisation actuelle est relativement simple. Elle necessite tout d'abord l'utilisation du début de mon fichier RollUp.js, plus précisement, les lignes de var styleSwitcher = { jusqu'à l'accolade fermante se situant au même niveau que le var ( oui, je compte mettre ca dans un fichier séparé d'ici pas trop longtemps, histoire que ca soit plus simple à suivre ^^; ). Ensuite, il est necessaire d'ajouter dans l'évenement onload de la page la ligne de code :
styleSwitcher.set(styleSwitcher.getPref());
Utilisée uniquement pour initialiser correctement l'état de départ de la page. Ou plus exactement, pour une partie de l'initialisation. En effet, je triche un petit peu, car l'implémentation n'est pas totalement en JS, mais un système hibride : le changement de feuille de style et la sauvegarde dans un cookie du style choisi se font effectivement dans le code JS, mais le choix de la stylesheet a marqué comme stylesheet par défaut est fait au niveau PHP, avant d'envoyer la page, avec ( code réellement utilisé, pour vous donner une idée précise ) :
$CkStyle=$_COOKIE['style'];
if(is_null($CkStyle)) $CkStyle="Somatic";
$StyleSheets['0']=array( 0=> "OliveVerde", 1=> "OliveVerde.css");
$StyleSheets['1']=array( 0=> "Lite", 1=> "Lite.css");
$StyleSheets['2']=array( 0=> "Lite:Reloaded", 1=>"Lite_nv.css");
$StyleSheets['3']=array( 0=> "Brushed", 1=> "Brushed.css");
$StyleSheets['4']=array( 0=> ":Hover", 1=> "HoverExp.css");
$StyleSheets['5']=array( 0=> "Somatic", 1=>"Somatic.css");
foreach($StyleSheets as $StyleSheet) {
if($StyleSheet[0] == $CkStyle)
echo(" <link rel='StyleSheet' type='Text/CSS' href='/blog/{$StyleSheet[1]}' title='{$StyleSheet[0]}' media='screen' />\n");
else
echo(" <link rel='Alternate StyleSheet' type='Text/CSS' href='/blog/{$StyleSheet[1]}' title='{$StyleSheet[0]}' media='screen' />\n"); }
L'avantage majeur de la detection en PHP, c'est que la page s'affiche immédiatement avec l'apparence que le visiteur souhaite. Dans le cas d'une implémentation en JS, il y aura toujours un flash, le visiteur verra brievement le site avec l'apparence par défaut avant d'avoir sous les yeux l'apparence qu'il a choisi. A mon humble avis, c'est des plus désagréable, et retire une grande part de l'interet des Alternate StyleSheet...
Enfin, dernière étape dans l'utilisation du mécanisme, la création de lien amenant le changement de style ^^; Ca se fait avec un code du genre :
<a href="#" onclick="styleSwitch.set('OliveVerde');return false;">Olive Verde</a>
où styleSwitch.set prend en argument le "title" de la feuille de style à laquelle on veut passer ^^;
Voilaaa pour une présentation rapide de la méthode que j'utilise, en esperant que ca aura interessé quelques-uns d'entre vous. Si c'est l'cas et que vous souhaitez avoir un moyen simple d'utiliser ce script, faites-le moi savoir en commentaire, et j'vais séparer le JavaScript necessaire du reste qui n'est utile que pour Dual Blog, et donner des instructions claires et concises permettant de l'utiliser sur vos sites z'à vous ^^
Tags : aucun
268 -
Un p'tit commentaire ? (1)
david à 20h22, le mercredi 09 février 2005et vu que je suis un newbie en PHP.... si tu pouvais donc m'éclairer....
merci pour tes infos.