Connexion utilisateur
Sommaire
Commentaires récents
 
Changer de thème Drupal en fonction du navigateur
Le 13 mars 2008, à 20:29 par Ulhume...

Rendre un thème compatible avec cette horreur d'IE6 a un coût certain et je n'avais pas, mais alors pas du tout envie de me lancer dans l'aventure pour le nouveau look d'artisan. La solution qui m'est paru plus saine, vu que ce brouteur est de toute façon en fin de vie (dieu merci), c'est d'utiliser spécifiquement pour lui, le vieux thème du site et ainsi laisser par défaut le nouveau pour ceux qui respectent un tant soit peu les standards. Et tout cela en restant dans un module, sans modifier le code de Drupal de préférence.

Stratégie de cache

Comme vous devez le savoir, Drupal dispose de trois niveaux de cache allant de désactiver à agressif. Le cache des pages permet d'améliorer énormément les performances sur un site à fort trafic en court-circuitant de manière plus ou moins profonde tout traitement en PHP. Ce cache n'est utilisé que pour les connexions anonymes.

Le problème est que le cache étant par essence une version pré calculée d'une page, il va rentrer clairement en conflit avec notre module de changement de thème. Cependant, pour rester progressif, je vous propose d'abord une version qui implique de désactiver le cache. Nous verrons ensuite, dans un prochain article, comment modifier ce module pour qu'il puisse aussi fonctionner en mode "haute performance".

Le module de base

Pour construire notre module, nous allons comme d'habitude créer un dossier du genre sites/all/modules/mes_modules/ie6_theme_hack et y ajouter le fichier de description :

ie_theme_hack.info
  1. name         = "IE Theme Hack"
  2. description  = "IE Theme Hack"
  3. package      = "karma-lab"
  4. version      = "5.x-1.0"
  5. project      = "ie_theme_hack"

Ceci fait, créons un deuxième fichier, le module à proprement parler, avec pour l'instant juste ce qu'il faut pour l'activer :

ie_theme_hack.module
  1. <?php
  2.  
  3. function ie_theme_hack_help($section) {
  4.     switch ($section) {
  5.         case 'admin/modules#description' :
  6.             return t('IE Theme Hack');
  7.     }
  8. }

Comme d'habitude, un petit tour dans ?q=/admin/build/modules, on coche le nouveau module et on enregistre.

Changement dynamique de thèmes

Changer un thème sous Drupal est très simple. Le panneau de configuration ?q=/admin/build/themes permet de sélectionner autant de thème "actifs" que l'on désire et en choisir un "par défaut". Il vous suffit donc de cocher votre thème "spécial IE6" pour le rendre disponible mais non actif par défaut.

Ensuite, le "truc" réside en une variable globale non documentée dans Drupal, $custom_theme. Lorsque elle est renseignée, son contenu vient écraser le non de thème par défaut. Une chose que nous pourrions faire dans le hool_menu de notre menu. Mais ce n'est pas "si" simple Wink

En effet, la seule chose un peut délicate est que cette variable doit être renseignée très tôt dans le cycle de vie d'une page Drupal, bien avant que n'importe quel hook ne soit appelé sur notre module.

N'importe quel hook, sauf heureusement hook_init et hook_exit. Si un module possède ces deux fonctions, il sera considéré par Drupal comme prioritaire (aussi appelé module "bootstrap") et ces méthodes seront appelées avant même que le cache ne soit initialisé. Nous allons donc utiliser ces deux hooks dans notre nodule :

a la suite de ie6_theme_hack.module
  1. function ie_theme_hack_init(){
  2.     global $custom_theme;
  3.     $userAgent= $_SERVER['HTTP_USER_AGENT'];
  4.     if ((strpos($userAgent, 'MSIE 6') !== false) || (strpos($userAgent, 'MSIE 5') !== false)) {
  5.         $custom_theme = 'theme_pour_ie6';
  6.     }
  7. }
  8.  
  9. function ie_theme_hack_exit(){
  10. }

Comme vous le voyez, hook_exit n'est pas utilisé mais il doit être présent pour que le module soit déclaré comme prioritaire. Le corps du hook_init est lui assez simple. Une petite interrogation de la variable $_SERVER['HTTP_USER_AGENT'] nous permet de déterminer s'il s'agit d'un IE5 ou IE6, et si c'est le cas, on positionne la variable $custom_theme avec le nom du thème alternatif, celui qui vous avez coché en plus du thème par défaut.

Il ne reste alors plus qu'à sauver. Pour tester, prenez soin de déconnecter le cache dans la section performances de l'administration. Ensuite, en fonction du navigateur soit c'est le thème par défaut qui sera utilisé, sinon c'est celui spécifique au navigateur cible.

Conclusion

Les deux hooks "init" et "exit" définissant un module "bootstrap" sont très précieux pour effectuer des opérations très bas niveau sans pour autant torpiller systématiquement le code de Drupal, en restant dans le cadre d'un module distribuable. Ceci dit, même si l'on cherche généralement à l'éviter, il n'est pas toujours possible d'éviter la modification du coeur de Drupal, c'est ce que nous allons voir au prochain épisode pour pouvoir réactiver le cache.

Commentaires

Anonymous , le 13 March, 2008 - 21:41

Et bien, merci pour l'info.

Par contre active le, parce que ton site dans IE6 à l'air "borked"...

(J'ai juste testé parce qu'au travail j'ai un IE6 qui traine encore...)

++

Ulhume, le 14 March, 2008 - 11:01

Ah oui effectivement, c'est mieux quant c'est activé Smiling

Merci de m'avoir prévenu

Anonymous , le 14 March, 2008 - 15:33

Beaucoup mieux Big grin

(posté depuis un vieux IE6, en fait vive IEtab pour ff Big grin)

++

Ulhume, le 15 March, 2008 - 09:56

Parfait, content que ça fonctionne Smiling

Anonymous , le 11 June, 2008 - 12:02

ouyeah!!! thanks bro!

MOsieur_taz , le 18 June, 2008 - 17:26

Super je va me lancer dans l'aventure contre IE6 qui me gonfle un tantinet.
Juste un truc : il y aurait-il un theme meme tres basique qui ne merde pas sous ie6 pour les tests
Merki d'avance
Un Dupralien débutant mais persistant

Ulhume, le 18 June, 2008 - 17:58

Désolé non, j'ai rien en stock. Généralement je pourris un thème standard en lui enlevant des fonctionnalités.

MOsieur_taz , le 18 June, 2008 - 18:06

Bon bein merki je vais 'pourrir' le bluemarine qui semble s'afficher correctement avec la machine virtuelle ie6 (IETester V0.2.2 pour ceux que cela intéresserait et qu'on trouve ici http://www.my-debugbar.com/wiki/IETester/HomePage)

Dab, le 19 June, 2008 - 09:34

BlueprintCss est un framework CSS basé sur un système de grille très facilement configurable, il est compatible firefox, IE, safari et opéra. http://code.google.com/p/blueprintcss/. Il existe un thème pour Drupal qui répond à ton besoin http://tedserbinski.com/tags/drupal/blueprint-drupal-theme-released

Poster un nouveau commentaire

Le contenu de ce champ est gardé secret et ne sera pas montré publiquement.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • To highlight piece of code, just surround them with <code type="language"> Your code &tl;/code>>. Language can be java,c++,bash,etc... Everything Geshi support.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Textual smileys will be replaced with graphical ones.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.

Plus d'informations sur les options de formatage