SELFHTML actuel Articles spécialisés  Feuilles de style CSS
	Stefan Münz: CSS "dynamique"
	Stefan Münz  Point de départ  Écrire dynamiquement des feuilles de style CSS  Autres possibilités

Stefan Münz

Adresse électronique:	stefan.muenz@selfhtml.org
Présence Internet:	http://aktuell.de.selfhtml.org/

Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!

Point de départ

Les éléments de bloc tels que les titres, les paragraphes, les tableaux mais également les passages <div> sont des candidats typiques pour des mentions de feuilles de style concernant marges, cadres et arrière-plan. Il apparaît très clairement cependant que le Navigateur Netscape 4.x et l' Explorer Internet MS ont des "idées différentes" de ce qu'est un élément de bloc. Un exemple:

<h1 style="border:1cm solid blue;font-family:Arial; font-size:20pt;">Peu de contenu</h1>

Netscape affiche la "boîte" créée par les mentions de feuilles de style définies dans le repère du titre numéro 1 en rapport avec la longueur du texte contenu, alors que l'Explorer Internet MS utilise toute la largeur de la fenêtre pour l'affichage. Cette différence d'interprétation survient surtout lors de la définition d'encadrements et d'arrière-plans de couleur et est la cause de différences d'affichage importantes et non souhaitées.

 Aperçu dans votre navigateur

Pour obtenir avec les deux navigateurs le même effet qu'avec Netscape, on peut inclure l'élément de bloc dans un passage <div> d'une largeur déterminée. Exemple:

<div style="width:250px;">
<h1 style="border:1cm solid blue; font-family:Arial;
font-size:20pt;">Peu de contenu</h1>
</div>

De ce fait, l'Explorer Internet MS affiche l'élément avec la largeur définie. La mention idéale de la largeur ne s'obtient malgré tout que grâce à quelques essais et doit s'orienter sur le contenu.

 À vous de voir! (seulement judicieux, si vous utilisez MSIE à partir de la version 4.x)

Inversement, il existe une solution semblable pour forcer Netscape à étendre l'affichage du cadre de l'exemple ci-dessus sur toute la largeur de la fenêtre:

<div style="border:1cm solid blue; margin:0px">
<h1 style="font-family:Arial; font-size:20pt">Peu de contenu</h1>
</div>

 À vous de voir! (seulement judicieux, si vous utilisez le Navigateur Netscape 4.x)

Le repère <div>, conteneur vide pour toutes sortes de mentions de feuilles de style, encadre en fait le repère <h1>. Les mentions pour encadrer (border) et la mention margin:0px, qui provoque l'étendue sur toute la largeur de la fenêtre, sont maintenant définies à l'intérieur du repère <div>. Le repère <h1> ne contient plus que les mentions de feuilles de style utiles au formatage de la police d'écriture. Ce "partage" des mentions de feuilles de style est nécessaire , car Netscape interprèterait faussement le repère <h1> entier si la mention margin était incluse dans celui-ci.

Écrire dynamiquement des feuilles de style CSS

Les solutions présentées plus haut sont statiques. Il est plus élégant de rechercher le navigateur à l'aide de JavaScript et d'écrire en conséquence et de façon dynamique les différents formatages déterminés. L'exemple suivant montre une nouvelle fois comment forcer l'Explorer Internet MS à afficher un élément de bloc sur une largeur définie.

<script language="JavaScript">
var IE4 = 0;
if((navigator.appName.indexOf("Explorer") >= 0) &&
 (navigator.appVersion.indexOf('4.0')>=0 )) IE4 = 1;
if(IE4)
 document.writeln('<div id="myDiv" style="width:100%; visibility:hidden">');
</script>
<h1 style="border:30px solid blue; font-family:Arial; font-size:20pt;">
<span id="myText">Peu de contenu</span>
</h1>
<script language="JavaScript">
if(IE4)
 {
  document.all.myDiv.style.width = document.all.myText.offsetWidth + 60;
  document.all.myDiv.style.visibility = "visible";
  document.writeln("</div>");
 }
</script>

 À vous de voir! (seulement judicieux, si vous utilisez MSIE à partir de la version 4.x)

Certes, cette solution est plus longue que la solution précédente sans JavaScript, mais en revanche, elle est plus flexible et plus précise. L'exemple contient deux passages script: l'un est placé avant et l'autre après le titre numéro 1 encadré. Dans le premier passage script, la variable IE4 est initialisée avec la valeur 0. Si le navigateur utilisé est l'Explorer Internet MS, la valeur de la variable est changé en 1. Ensuite, une simple demande if(IE4) suffit pour que les instructions ne soient suivies que dans le cas où ce navigateur est réellement utilisé. Dans le premier passage script de l'exemple, un repère <div> est écrit dynamiquement pour l'Explorer Internet MS à l'aide de document.write(...). Avec la valeur de 100%, la largeur n'est, bien qu'elle soit définie comme mention de feuilles de style, pas particulièrement spécifiée. Ceci est voulu, car dans le passage script du dessous cette valeur sera modifiée dynamiquement. En attendant, l'affichage du titre encadré est empêchée avec la mention de feuilles de style visibility:hidden. De cette façon, le chargement de l'image à l'écran s'effectue sans sauts.

Le changement dynamique s'effectue dans le passage script d'en dessous, car c'est là qu'est employée avec document.all.myText.offsetWidth une valeur qui n'est connue qu'après que le titre numéro 1 complet ait été lu en mémoire. Il s'agit de la largeur effective réclamée par ce dernier. Cependant, l'Explorer Internet MS ne se laisse duper et ne livre cette valeur que grâce à un repère <span> noté à l'intérieur du repère du titre numéro 1. Avec document.all.myText.offsetWidth, on se réfère à son ID.

À cette valeur est ensuite ajouté le nombre 60, correspondant au double de l'épaisseur du cadre entourant le titre (épaisseur du cadre à gauche et épaisseur du cadre à droite). Car dans les mentions de feuilles de style pour le titre a été définie une épaisseur de cadre de 30px. La valeur complète obtenue par l'addition est affectée à la mention width du repère <div> et de ce fait, la largeur d'affichage est calculée à nouveau. Après quoi, l'affichage peut être "rendu visible" en changeant la propriété de visibility. L'Explorer Internet MS affiche maintenant le cadre de façon à ce que celui-ci entoure exactement le titre numéro 1 défini dans l'exemple.

Autres possibilités

Il est possible d'aller plus loin dans l'utilisation combinée d'instructions document.writeln() en JavaScript et l'emploi de feuilles de style dépendantes du navigateur. Car les différentes interprétations citées ici (avec les éléments de blocs) ne sont pas les seules divergences entre les deux navigateurs les plus connus. Selon les cas, il peut être souhaitable de définir dès le départ les feuilles de style séparément, afin d'obtenir sur chaque navigateur un résultat optimal. L'exemple suivant montre comment peuvent être définies dans l'entête du fichier HTML des mentions de feuilles de style centrales appropriées à chaque navigateur:

<head>
<script language="JavaScript">
document.writeln('<style type="text/css">');
if((navigator.appName.indexOf("Explorer") >= 0)
  && (navigator.appVersion.indexOf('4.0')>=0 ))
{
 document.writeln("a:link { font-weight:bold; color:blue }");
 document.writeln("a:visited { font-weight:normal; color:violet }");
 document.writeln("a:active { font-weight:bold; font-size:120%; }");
}
if((navigator.appName.indexOf("Netscape") >= 0)
  && (navigator.appVersion.indexOf('4.0')>=0 ))
{
 document.writeln("a:link { color:blue }");
 document.writeln("a:visited { color:violet }");
 document.writeln("a:active { color:red }");
}
document.writeln('</style>');
</script>
</head>

 À vous de voir! (affichage différent selon MSIE 4.x ou Netscape 4.x)

Au lieu d'un passage <style> statique est noté ici une passage <script>, à l'intérieur duquel des instructions document.writeln() s'occupent d'écrire de façon dynamique un passage <style> approprié à chaque navigateur. Les instructions servant à définir le passage <style> lui-même, c'est à dire document.writeln('<style type="text/css">') au début et document.writeln('</style>') à la fin, sont notées en dehors de toute condition if et sont, de cette façon, écrites dans tous les cas. Les trois mentions définissant les pseudo-formats pour les liens à des pages non encore visitées (a:link), à des pages déjà visitées (a:visited) et en train d'être cliqués (a:active), sont notées, elles, à l'intérieur de conditions if. Ainsi s'obtiennent de différentes définitions selon le type de navigateur recherché.

Les pseudo-formats pour les liens sont un cas d'application typique pour de telles définitions "doubles", car l'Explorer Internet MS dans sa version 4 autorise beaucoup plus de libertés que Netscape. Ainsi, le changement dynamique de la taille (font-size:120%) et du poids (font-weight:bold) de la police ne pose aucun problème à l'Explorer Internet MS alors que Netscape ignore absolument ces instructions.

Il est de la même façon possible d'incorporer des fichiers CSS externes différents pour chaque navigateur. L'exemple suivant traite ce cas de figure:

<head>
<script language="JavaScript">
if((navigator.appName.indexOf("Explorer") >= 0)
 && (navigator.appVersion.indexOf('4.0')>=0 ))
 document.writeln('<link rel=stylesheet href="netscape.css" type="text/css">');
if((navigator.appName.indexOf("Netscape") >= 0)
 && (navigator.appVersion.indexOf('4.0')>=0 ))
 document.writeln('<link rel=stylesheet href="msie.css" type ="text/css">');
</script>
</head>

Les fichiers netscape.css und msie.css incorporés de la sorte peuvent contenir des mentions de feuilles de style ignorant les manques d'interprétation du navigateur pour lequel elles ne sont pas définies.

SELFHTML actuel Articles spécialisés  Feuilles de style CSS

© 2001-2005  Informations