 Retrouvez cet article dans : Linux Pratique 41
Vous avez certainement eu l'occasion de vous rendre compte au fil du développement de vos pages Web, que l'affichage est parfait sous Firefox, mais que lorsque vous testez la même page sous Internet Explorer, tout est soudain remis en question : des éléments qui n'apparaissent pas, des blocs décalés, etc. Commence alors une longue réflexion, suivie de divers tâtonnements, pour obtenir un résultat impeccable sous les 2 navigateurs... Et pourquoi ne pas simplement proposer au visiteur la feuille de style adéquate à son navigateur Web ?
Comment identifier le navigateur Web du visiteur ?
C'est Javascript qui va nous venir en aide ici. En effet, la propriété Window.navigator se réfère à un objet Navigator qui contient des informations sur le navigateur Web, telles que la version et la liste des formats de données qu'il peut afficher. L'objet Navigator a 5 propriétés principales qui permettent de récupérer des informations sur le navigateur utilisé :
appNameÂ: permet en théorie de récupérer le nom du navigateur utilisé ; ceci retourne " Microsoft Internet Explorer " ou " Netscape ". Mais attention, certains navigateurs, comme Opera peuvent passer pour d'autres selon le réglage de leurs préférences. En outre, si le navigateur utilisé est Firefox,appNameretourne également Netscape (alors qu'ils ont tous deux des comportements très différents). Pour plus de précision, on préférera utiliseruserAgent.appVersion: permet de préciser le numéro de version et/ou d'autres informations sur la version du navigateur (notez qu'il s'agit là d'un numéro de version " interne ", qui peut ne pas correspondre au numéro de version présenté à l'utilisateur...).userAgent: chaîne que le navigateur envoie dans l'en-tête HTTP USER-AGENT. Cette propriété permet de confirmer (ou d'infirmer) la valeur retournée par appName, car elle contient toutes les informations deappNameetappVersion.appCodeName: retourne le nom de code du navigateur.platformÂ: retourne la plate-forme matérielle sur laquelle est installé le navigateur (Win32, Linux i686, etc.)
Pour simplement afficher à l'écran le nom du navigateur :
<script language="javascript"> document.write ( "<b>Votre navigateur est : </b>"+ navigator.appName + navigator.appVersion + navigator.userAgent); </script>
Vous pouvez également afficher ces informations dans de petites fenêtres d'alerte (Fig. 1), via le script suivant :
<script type="text/javascript"> var nomnav = navigator.appName; alert(navigator.appName); alert(navigator.appVersion); alert(navigator.userAgent); </script>
 
Fig. 1 : Une petite boîte de dialogue apparaît. Elle contient les informations retournées par la propriété navigator.userAgent (navigateur : Firefox 2.0).
Comment intégrer le script sur mon site Web ?
Au final, tout ceci peut servir à orienter le visiteur vers telle ou telle page, ou plutôt à activer la feuille de style adéquate, en fonction du navigateur qu'il utilise. C'est ce à quoi nous allons nous intéresser ici...
Voici, à titre d'exemple, un petit script simple, destiné à faire appliquer une feuille de styles spécifique au navigateur de Microsoft :
<script type="text/javascript">
var nomnav = navigator.appName;
if (nomnav == 'Microsoft Internet Explorer') {
   document.write("<link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" href=\"styles_ie.css\" />");
} else {
   document.write("<link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" href=\"styles_ff.css\" />");
}
</script>
Tout d'abord, le script identifie le navigateur du visiteur et le stocke dans une variable nommée nomnav. Puis, on enchaîne sur une instruction conditionnelle : si la chaîne de caractères retournée par la propriété navigator.appName contient " Microsoft Internet Explorer ", alors c'est la feuille de styles nommée styles_ie.css qui sera utilisée pour l'affichage de la page. Sinon, pour tous les autres navigateurs, c'est styles.css qui sera utilisée.
Ce script est à positionner dans l'en-tête (balise <head>) de la page Web. Bien entendu, votre en-tête ne doit pas contenir de balise <link>, puisque celle-ci est définie grâce à notre script !
Observez sur les figures 2 et 3, les résultats obtenus sous Firefox et Internet Explorer.
Pour finir
Pensez également aux utilisateurs qui ont désactivé Javascript ! Vous pouvez ajouter à leur intention, sur une page d'accueil préalable, des liens qui les dirigeront sur l'une ou l'autre page de votre site (liée à la CSS adéquate) en fonction de leur navigateur, comme ceci :
<noscript>    <p>Cliquez sur le lien qui correspond à votre navigateur Web :</p>    <a href="#">Microsoft Internet Explorer</a>,    <a href="#">Autre (Firefox, Opera, etc.)</a> </noscript>
Fig. 2 : Le script identifie le navigateur Firefox, c'est donc la feuille de styles correspondante qui est utilisée...
Fig. 3 : Ici, le script a identifié le navigateur Internet Explorer.
 Retrouvez cet article dans : Linux Pratique 41
