Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Commentaires conditionnels avec IE

Date du document en anglais : 30 Octobre 2008 - 13h57 http://drupal.org/node/134569

L'utilisation de JavaScript pour la détection du navigateur est un sujet délicat.

Le paramétrage des polices d'IE pour qu'elle correspondent à celles des autres navigateurs n'est pas chose aisée. Beaucoup de concepteurs de thèmes ressentent le besoin de restreindre leur tendance à l'embonpoint, ou utilisent des hacks CSS pour forcer IE à respecter les normes. 

Hélas pour les utilisateurs de Palm pilot, Blackberries, screen readers, de vieilles versions d'Opéra, utiliser JavaScript pour détecter le navigateur est une mauvaise solution. Il y a tellement de navigateurs, de résolutions différentes qu'il est impossible de satisfaire tout un chacun avec une seule feuille de style.

Les designers avertis se diront « Pourquoi ne pas untiliser une seule feuille de style pour tous les navigateurs, et utiliser JavaScript pour fournir les paramètres propres à IE ? ». Bonne question, mais il y a mieux à faire que de coder un script pour cela.

Microsoft a permis aux designers de spécifier des règles CSS propres à IE en utilisant une balise de commentaire HTML modifiée.

Ce commentaire n'est pas valable selon les normes HTML, c'est juste un commentaire. Tous les navigateurs l'ignoreront mais IE en tiendra compte et suivra toutes les instructions qu'il contiendra. Ce Commentaire Conditionnel est encadré d'une balise <link> qui contiendra la feuille de style spécifique à IE. Voici à quoi il ressemble : 

<!--[if IE]>
   <link href="screenStyle4IE.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Comme d'habitude avec Drupal, il y a plusieurs façons de placer cette modification en début de chaque page HTML. La meilleure façon consiste sans doute à utiliser le module Conditional Styles et à modifier le fichier .info de votre thème pour incorporer des styles conditionnels :

; Set the conditional stylesheets that are processed by IE.
conditional-stylesheets[if lt IE 7][all][] = ie6-and-below.css
conditional-stylesheets[if IE 7][all][] = ie7.css

Remarque : Ce module ne joue que sur la façon dont le registre de thèmes est construit. Vous devrez effacer le registre de thème pour pouvoir constater les changements.

Une autre façon de faire est de placer cette balise dans la section <head> seulement. Une fois que la balise <link> est interprétée par IE, toute règle CSS qu'elle contiendra sera prioritaire. N'oubliez pas que les CSS s'appliquent en cascade, aussi, toute surcharge de règles antérieures doivent venir impérativement prendre place après le lien d'inclusion CSS normal.

Ajoutez un Commentaire Conditionnel au fichier page.tpl.php de Garland comme ceci : 

<head>
  <title><?php php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
  <style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
   style type="text/css" media="screen">@import "<?php print base_path() . path_to_theme() ?>/screen.css";</style>
   style type="text/css" media="handheld">@import "<?php print base_path() . path_to_theme() ?>/handheld.css";</style>
  <!--[if lt IE 7]>
   <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie-layout.css";</style>
 <![endif]-->
  <!--[if IE ]>
 <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie-font-sizes.css";</style>
 <![endif]-->
</head>

La souplesse est ahurissante ! Il est désormais possible de fournir une classe div pour tous les navigateurs, puis de préciser la taille, le z-index, les float, ou les margins de cette div uniquement pour IE.

La taille des polices, disiez-vous ? Bien sûr ! Les polices de IE ont toutes une taille plus grande que celles des autres navigateurs. Personnalisez-les dans un fichier fix-ie-font-sizes.css, en spécifiant des tailles de polices juste inférieures à celles de la feuille de style normale. Par exemple, si vous avez p{font-size:normal}, mettez p{font-size:small}. Cela vous permet une certaine homogénéité entre les navigateurs sans que vous ayez à vous embarraser de hacks composés de pourcentages de taille.

Oh, et si vous voulez affiner jusqu'à préciser des styles pour chaque version de IE, regardez l'exemple précédent : <!--[if lt IE 7]> signifie « toutes les version de IE sauf IE7». Pour plus d'infos sur « lt IE6 » et  « lt IE7 », voyez les pages chez Microsoft.

Vous pouvez aussi créer des styles et des fichiers JS qui seront lus par tous les navigateurs sauf par IE, en modifiant légèrement la structure du code car, dans ce cas-là, les déclarations doivent être à l'extérieur des commentaires : 

<!--[if !IE]>-->
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/ie-wont-see-this.css";</style>
<!--<[endif]-->
La contribution initiale sur ce sujet peut être lue à http://drupal.org/node/16173

Remarque : l'utilisation de feuilles de styles internal ou inline peut causer des problèmes avec certains navigateurs (notamment Opera et Safari) car ils n'ignorent pas toujours les CSS disposées à l'intérieur des commentaires. Utiliser des feuilles de styles externes, comme décrit ci-dessus, semble résoudre ce problème.