La gestion CSS sous Gecko et Microsoft (ou les petits détails qui dégoutent de l'utilisation de Microsoft Internet Explorer)

Depuis un certain temps déja , on entend parler de CSS (Cascading Style Sheet), ou de feuilles de style pour parler Français.

Cette merveilleuse technologie, qui permet une mise en page parfaite, et un allegement de vos pages HTML était jusqu'alors accessibles sur les traitements de texte et logiciels de mise en page de contenus et a fait sa réele apparition a l'époque des versions 4 de Microsoft Internet Explorer et de Netscape.

En ce temps , Internet Explorer prenait très largement le dessus sur netscape quant a la gestion de cette technologie. Depuis , ces "CSS" ont pris une place considérable dans l'univers du web.

Les temps ont changé , et le moteur Gecko , qui équipe les navigateurs Mozilla / Netscape / Galeon et bien d'autres, a fait d'énormes progres, et semble a présent gerer d'avantage de propriétés CSS que le moteur Microsoft d'internet Explorer .

Construire un site web Compatible avec les différents types de navigateurs se révèle de nos jours dans le domaine du possible (si l'on fait abstraction des navigateurs de type NETSCAPE 4) . Il fut un temps ou l'on pouvait se contenter de creer des pages web compatibles avec netscape 4 , sans se poser trop de questions concernant leur interprétation sous Internet Explorer (qui, de manière générale était très bonne) .

Cette Epoque est, maintenant, révolue.

Pour donner quelques exemples simples de balises CSS (pourtant bien utiles, voire vitales pour une bonne navigation, et définies dans la norme W3C CSS2 (http://www.w3.org/TR/CSS2/visuren.html#fixed-positionning) datant de Mai 1998) qui ne sont pas interprétées sous Internet Explorer, Utilisons la propriété 'position' lors de la définition d'une couche DIV :

	
#divmain {
	position : fixed;
	top : 10px;
	left : 20px;
	width : 50px;
	heigth : 100px;
	color : #000033;
	background:transparent;
	display:block;
	z-index:2;
} 

Cette définition aura bien l'effet escompté sur un navigateur de type gecko , A savoir la creation d'une couche à 10 pixels du haut, et à 20 pixels du bord droit du navigateur, et la position reste fixe quelque soit la position du navigateur dans la page . Ce qui a pour avantage de pouvoir garder un menu de navigation visible en permanence (Voir exemple de ce site) .

En revanche , Internet Explorer ne reconnait pas la valeur 'fixed' en tant que 'position' et considere alors que cette position est absolue; Ce qui a donc pour effet de conserver le menu a une position fixe de la page , mais pas a une position fixe du navigateur.

Pour reproduire le meme effet de menu qui suit la navigation dans la page , il faut donc passer par du DHTML (Javascript) Sous Internet Explorer .

Un autre exemple , relevant plus du graphisme que de la navigation en elle meme , est le manque sous Internet Explorer de l'etat hover sur les autres elements que 'A' . Cet etat prend en compte l'evenement de passer la souris sur un element ce qui peut etre fort utile lorsque l'on souhaite mettre en surbrillance une ligne complete de tableau en valeur lorsque l'on passe dessus avec sa souris.

Exemple Complet :

	La feuille de style 


	TR {
	color:#000000;
	background:#FFFFFF;

	}
	
	TR:hover {
		color:#FFFFFF;
		background:#000000;
	}

	et le code HTML

	<tr>
		<td>Element1</td><td>Test1<td>
	</tr>
	<tr>
		<td>Element2</td><td>Test2</td>
	</tr>

Cet exemple prend bien en compte l'effet de survol sur les navigateurs Gecko, et une fois de plus , le javascript (evenements onMouseOver et onMouseOut avec les fonctions associées) et deux définitions de style supplémentaires sont nécéssaires pour effectuer la même opération. Ce qui représente le double de poids de page de plus pour ce simple exemple , contenant uniquement deux lignes de tableau.

Un nombre indéfini de petits détails de ce genre sont a noter. Ce qui révelle un fois de mieux qu'ils ne faut pas avoir peur des solutions alternatives à Microsoft.

Une solution Paliative ?

Oui , il en existe une ! grâce à différentes recherches effectuées sur internet, j'ai finalement trouvé un moyen pour que Microsoft Internet Explorer Gère les événements hover et focus autrement qu'avec du javascript lourd et fastidieux.

Cette solution s'appèle BEHAVIOR, et fait appel à un fichier .htc qui complète la gestion de ces évenements sous IE.

Pour mettre en place cette solution , il faut récuperer le fichier csshoverandfocus.htc, le placer à la racine du site, et utiliser le code suivant :

<style type="text/css" media="screen">
BODY {BEHAVIOR:url("./csshoverandfocus.htc")}
</style>

et tout se met a fonctionner parfaitement.

Esperons que pour les prochaines versions d'Internet Explorer, Nous n'aurons plus à passer par des astuces dans ce genre.

• Introduction aux feuilles de style
• La gestion CSS chez Microsoft et Gecko ...