Affichage d'un site sur différents navigateurs

Bonjour,
Ayant créé un site, je rencontre le souci d'affichage sur différents sites.
Je vous soumets un article paru dans Micro-Hebdo, il y a quelque temps déjà.
Mon souci : que faut-il mettre dans les feuilles de style (CSS) du paragraphe 2 ?
Avec vos (grandes) connaissances, peut-être auriez-vous la solution ?
Cordialement, J-P Malgoire

Pour obtenir un même affichage sur plusieurs navigateurs, sur PC ou sur Mac...

1 / Préparer les dossiers à inclure dans le site.
Commencer par créer un nouveau dossier dans celui contenant les pages HTML du site et le nommer Styles, ce dossier accueillera les différentes feuilles de style que nous allons créer.

2 / Rédiger des feuilles de style ou CCS (cascading style sheet) qui sont des petits fichiers contenant des instructions de mise en page qui obéissent à une syntaxe stricte.
Rédiger autant de feuilles de style que l'on souhaite et nommer chaque fichier selon le schéma suivant:
- ie60win.css pour la feuille de style adaptée à Internet Explorer 6.0 sous Windows
- ie55mac.css pour celle adaptée à Internet Explorer 5.5 sous MacOs
- nn47unx.css pour celle adaptée à Netscape Navigator 4 sur Unix
- etc...
Regrouper ces fichiers dans le dossier Styles créé à l'étape 1.

3 / Recopier scrupuleusement le code JavaScript indiqué ci-dessous dans le bloc-notes de Windows (en respectant les espaces qui sont signalés par des points rouges)(qui sont ici des petits carrés), puis l'enregistrer sous le nom navigateur.js, directement dans le dossier du site Web (ce code étant chargé de reconnaître le navigateur et le système d'exploitation utilisés par les visiteurs du site, attention à ne pas commettre d'erreurs pendant la copie):

functionTrim(str)
{
vardeb=0;
while&#61614;((deb&#61614;<&#61614;str.lenght)&#61614;&&&#61614;(str.charAt(deb)&#61614;= =&#61614;'&#61614;'))&#61496;
deb++;&#61496;
var&#61614;fin=&#61614;str.lenght;&#61496;
while&#61614;((fin&#61614;>&#61614;0)&#61614;&&&#61614;(str.charAt(fin&#61614;-&#61614;1) = =&#61614;'&#61614;'))&#61496;
fin--;&#61496;
return(str.substring(deb,&#61614;fin));&#61496;
}&#61496;
&#61496;
function&#61614;Navigateur(agent)&#61496;
{&#61496;
this.nom&#61614;=&#61614;"inconnu";&#61496;
this.os&#61614;=&#61614;"inconnu";&#61496;
this.version&#61614;=&#61614;"0";&#61496;
this.vermaj&#61614;=&#61614;"0";&#61496;
this.vermin&#61614;=&#61614;"0";&#61496;
this.style&#61614;=&#61614;"";&#61496;
&#61496;
var&#61614;preparens&#61614;=&#61614;"";&#61496;
var&#61614;parentheses&#61614;=&#61614;"";&#61496;
i&#61614;=&#61614;agent.indexOf("(");&#61496;
if&#61614;(i&#61614;>=&#61614;0)&#61496;
{ preparens&#61614;=&#61614;Trim(agent.substring(0,i));&#61496;
parentheses&#61614;=&#61614;agent.substring(i+1,&#61614;agent.lenght);&#61496;
j&#61614;=&#61614;parentheses.indexOf(")");&#61496;
if&#61614;(j&#61614;>=&#61614;0)&#61496;
parentheses&#61614;=&#61614;parentheses.substring(0,&#61614;j);&#61496;
}&#61496;
else&#61614;preparens&#61614;=&#61614;agent;&#61496;
&#61496;
var&#61614;navVer&#61614;=&#61614;preparens;&#61496;
var&#61614;parties&#61614;=&#61614;parentheses.split(";");&#61496;
for&#61614;(i&#61614;=&#61614;0;&#61614;i&#61614;<&#61614;parties.lenght;&#61614;i++)&#61496;
{ var partie&#61614;=&#61614;Trim(parties);&#61496;
&#61496;
if&#61614;(partie.indexOf("MSIE")&#61614;>= 0)&#61496;
navVer&#61614;=&#61614;partie;&#61496;
else&#61614;if&#61614;(partie.indexOf("Opera")&#61614;>=&#61614;0)&#61496;
navVer&#61614;=&#61614;partie;&#61496;
else&#61614;if&#61614;((partie.indexOf("X11")&#61614;>=&#61614;0&#61614;| |&#61614;(partie.indexOf("SunOS")&#61614;>=&#61614;0)&#61614;| |&#61614; (partie.indexOf("Linux")&#61614;>=&#61614;0))&#61496;
this.os&#61614;=&#61614;"unx";&#61496;
else&#61614;if (partie.indexOf("Win")&#61614;>=&#61614;0)&#61496;
this.os&#61614;=&#61614;"win";&#61496;
else&#61614;if&#61614;(partie.indexOf("Mac")&#61614;>=&#61614;0)&#61614;| |&#61614;(partie.indexOf("PPC")&#61614;>=&#61614;0))&#61496;
this.os&#61614;=&#61614;"mac";&#61496;
}&#61496;
&#61496;
var&#61614;msieIndex&#61614;=&#61614;navVer.indexOf("MSIE");&#61496;
if (msieIndex&#61614;>=&#61614;0)&#61496;
navVer&#61614;=&#61614;navVer.substring(msieIndex, navVer.lenght);&#61496;
&#61496;
var&#61614;reste&#61614;=&#61614;"";&#61496;
if&#61614;(navVer.substring(0,&#61614;7)&#61614;= =&#61614;"Mozilla")&#61496;
&#61614;{ this.nom&#61614;=&#61614;"nn"; //Netscape&#61496;
reste&#61614;=&#61614;navVer.substring(8,&#61614;navVer.lenght);&#61496;
}&#61496;
else&#61614;if&#61614;(navVer.substring(0,&#61614;4)&#61614;= =&#61614;"MSIE")&#61496;
{ this.nom&#61614;=&#61614;"ie"; //InternetExplorer&#61496;
reste&#61614;=&#61614;navVer.substring(5,&#61614;navVer.lenght);&#61496;
}&#61496;
else&#61614;if&#61614;(navVer.substring(0,&#61614;27)&#61614;= =&#61614;"Internet Explorer")&#61496;
{ this.nom&#61614;=&#61614;"ie"; //InternetExplorer&#61496;
reste&#61614;=&#61614;navVer.substring(28,&#61614;navVer.lenght);&#61496;
}&#61496;
else&#61614;if&#61614;(navVer.substring(0,5)&#61614;= =&#61614;"Opera")&#61496;
{ this.nom&#61614;=&#61614;"op"; //Opera&#61496;
reste&#61614;=&#61614;navVer.substring(6,&#61614;navVer.lenght);&#61496;
}&#61496;
&#61496;
else&#61614;if&#61614;(navVer.substring(0,&#61614;4)&#61614;= =&#61614;"Lynx")&#61496;
{ this.nom&#61614;=&#61614;"ly"; //Lynx&#61496;
reste&#61614;=&#61614;navVer.substring(5,&#61614;navVer.lenght);&#61496;
&#61496;
}&#61496;
&#61496;
reste&#61614;=&#61614;Trim(reste);&#61496;
&#61496;
i&#61614;=&#61614;reste.indexOf("&#61614;");&#61496;
this.version&#61614;=&#61614;((i&#61614;>=&#61614;0) ? reste.substring(0,&#61614;i)&#61614;:&#61614;reste);&#61496;
j&#61614;=&#61614;this.version.indexOf(".");&#61496;
if&#61614;(j&#61614;>=&#61614;0)&#61496;
{ this.vermaj&#61614;=&#61614;this.version.substring(0,j);&#61496;
this.vermin&#61614;=&#61614;this.version.substring(j+1,&#61614;this.version.lenght);&#61496;
}&#61496;
else&#61496;
this.vermaj&#61614;=&#61614;this.version;&#61496;
&#61496;
this.style&#61614;=&#61614;(this.nom+this.vermaj+this.vermin+this.os).toLowerCase();&#61496;
}

4 / Modifier les pages du site toujours dans le bloc-notes de Windows, cliquer sur le menu Fichier et choisir Ouvrir.
Dans la liste Type de fichiers, sélectionner Tous les fichiers et double-cliquer sur l'icône de la page d'accueil du site (normalement nommée index.html).
Le code HTML de la page s'affiche alors dans le Bloc-Notes,
repérer la ligne contenant la balise </HEAD> et insérer quelques lignes vides juste avant,
taper alors le code suivant dans l'espace ainsi libéré (en respectant bien les espaces&#61614;) :

<SCRIPT&#61614;LANGUAGE="JavaScript"SRC="navigateur.js"></SCRIPT>
<SCRIPT&#61614;LANGUAGE="JavaScript"TYPE="text/javascript">
var&#61614;nav&#61614;=&#61614;newNavigateur(navigator.userAgent);
document.write("<LINKREL='stylesheet'HREF='styles/"+nav.style+".css'
TYPE='text/css'>");</SCRIPT>

Répéter cette étape pour chacune des pages HTML du site, quand tout est terminé, télécharger tous les fichiers du site chez l'hébergeur avec un logiciel de FTP.
Navigateurs supportant les feuilles de style:
• Microsoft Internet Explorer 3.0 (partiellement)
• Microsoft Internet Explorer 4.x, 5.x , 6.x, 7.x
• Netscape Navigator 4.x, 6.x, 7.x
• Mozilla x.x
• Firefox x.x
• Opéra 5.x, 6.x, 7.x

Salut,

hem... il date de Mathusalem ton article !

Pour qu'un site s'affiche sur tous les navigateurs il suffit (heureusement) de le coder en respectant les standards (même si de vieux navigateurs comme IE6 nécessitent parfois quelques corrections).

Peut-être que tu pourrais commencer par ce petit tutoriel pour voir le principe puis jeter un coup d'œil aux gabarits de mise en page pour démarrer sur une bonne base.

Au fil des questionnements que tu pourras avoir n'hésite pas à faire une recherche dans les nombreux articles de http://www.alsacreations.com/ puis, si tu n'as pas trouvé de réponse, sur ce forum.

Agghhhh, des TAG en majuscule

Et il n'est pas nécessaire de recourir à JavaScript pour qu'un site soit compatible avec l'ensemble des navigateurs du marché.

En outre, copier et coller des bouts de code trouvés çà et là sur le Web sans prendre la peine de le comprendre n'est pas la meilleure solution pour progresser dans la maîtrise de la conception Web.
Modifié par Victor BRITO (04 Sep 2010 - 15:43)