Changer de feuille de style en fonction du navigateur

Bonjour à tous,

Premier post sur ce forum pour mon premier site en CSS.

Je vou explique la situation: j'ai crée un site en CSS, je suis sous dreamweaver mac avec Firefox. Or, je constate des différences d'affichage entre Explorer et Firefox (des décalages).

J'aimerai donc insérer un script détectant le navigateur de l'utilisateur et changeant la feuille de style en fonction du navi.

Une petite idée sur ce qui est possible de faire?

Cordialement,

Vermichou

L'adresse: http://michel.vermeulen1.free.fr/dag/

Bonjour,

vermichou a écrit :
J'aimerai donc insérer un script détectant le navigateur de l'utilisateur et changeant la feuille de style en fonction du navi.

Mauvaise idée.

Pour adresser des correctifs éventuels à des versions d'Internet Explorer, il y a le mécanisme des commentaires conditionnels, qui est de loin le plus fiable (et par ailleurs très simple à utiliser). À moins de savoir exactement ce que l'on fait, la marche à suivre est donc: appliquer si besoin des correctifs aux différentes versions d'IE via des commentaires conditionnels, et bien se garder d'utiliser la détection du navigateur, les hacks CSS, etc.

Pour les commentaires conditionnels, la FAQ en parle.

Sinon, deux remarques rapides sur le site:
- les titres en images sont sympathiques mais peu lisibles (l'ombre portée est trop marquée, et la couleur du texte est trop claire);
- par ailleurs, le code utilisé pour les insérer n'est pas terrible.
Exemple pour ce dernier point:

<p class="titre1" align="left"><img src="actus.gif" alt="Actus" height="60" width="123"></p>

Proposition de code plus adapté:

<h2>
	<img src="actus.gif" alt="Actus" height="60" width="123">
</h2>

De même pour l'en-tête on a:

  <img src="logo.gif" alt="logo" name="logo" id="logo" height="125" width="300">
  <img src="timbre.gif" alt="timbre" name="timbre" id="timbre" height="153" width="200">

alors qu'on gagnerait à avoir:

<h1>
	<img src="logo.gif" alt="DAG - Douai Acoustic Guitar - site web officiel" name="logo" id="logo" height="125" width="300" />
</h1>
<img src="timbre.gif" alt="" name="timbre" id="timbre" height="153" width="200" />

(Dit concrètement: on se fiche de savoir que la première image représente un logo... on aimerait plutôt savoir ce que dit le logo en question, la manière dont il situe l'identité du site. Quant à l'image du timbre, c'est de la décoration qui pourrait être passée en image de fond, ou alors on garde l'image dans le code HTML mais sans annoncer un texte alternatif «timbre» qui est loin de transmettre une information solide.)

Bonsoir,

Merci pour ta réponse, pour ce qui est des commentaires conditionnels, j'ai à peu près compris, je pense avoir résolu mon problème.

Pour ce qui est de mes balises, je ne comprends pas vraiment pourquoi ça ne marche pas? Je débute vraiment en CSS, j'ai encore un peu de mal avec les positionnements en float, les class...etc... et je commence juste à obtenir ce que je veux.

Une petite explication?

En tous cas, merci pour ton aide précieuse!

Cordialement,

Michel

vermichou a écrit :
Pour ce qui est de mes balises, je ne comprends pas vraiment pourquoi ça ne marche pas? Je débute vraiment en CSS, j'ai encore un peu de mal avec les positionnements en float, les class...etc... et je commence juste à obtenir ce que je veux.

Heu... pour rappel, les balises en question sont des balises HTML, pas CSS.

Je remarque juste que ton code HTML, même s'il est plutôt lisible, n'est pas très bien hiérarchisé (avec des titres de section h1, h2, h3... qui vont bien), et que la question du texte alternatif des images n'est pas vraiment maitrisée. Et donc je propose quelques corrections de balisage.

Théoriquement, si tu as un texte qui est un titre (c'est à dire notamment qu'il introduit un contenu), il n'y a aucune raison de le transcrire par un paragraphe simple de la manière suivante:

<p>Actus</p>

ou même de la manière suivante (qui ne change strictement rien au niveau sémantique):

<p class="titre1">Actus</p>

Si ça correspond à la structure de la page, tu devrais plutôt avoir: [code]<h2>Actus</p>[/h2] (ou h1 ou h3 ou h4... suivant le niveau dans l'architecture de l'information sur la page).

Pour le texte alternatif, il faut se poser la question: si l'image ne s'affiche pas et qu'à la place j'ai un texte simple, qu'est-ce que je veux comme texte?
- rien du tout parce que c'est juste de la déco ou une illustration non indispensable ou redisant ce qui est dit dans le texte accompagnant?
- une transcription du contenu texte porté par l'image?
- quelques mots explicitant la fonction du lien dans le cas d'une image bouton?
- etc.

À l'heure actuelle, si je lis le contenu de ta page ça commence ainsi:

a écrit :
logo timbre
- Accueil
- NGT
- Presse
- ...

Je ferme les yeux sur le gros défaut d'ergonomie et d'accessibilité que représente l'intitulé «NGT» (c'est quoi NGT?). On a déjà un déficit d'information, on devrait trouver le contenu suivant en début de document:

a écrit :
DAG - Douai Acoustic Guitar - Site web officiel
- Accueil
- Nuit de la guitare
- Presse
- ...

Bref, ces deux types de problème n'ont rien à voir (directement) avec la mise en page. Il s'agit de produire un contenu structuré en HTML qui soit correctement balisé, globalement accessible, etc.

Ok, je pense avoir compris...

Le problème est qu'avant de découvrir le CSS, sous dreamweaver, j'utilisais les layers qui vont bien, en positionnement absolu... donc je ne touchais absolument pas au code HTML, uniquement de l'édition graphique.

C'est donc en découvrant le CSS jour après jour que je découvre les balises HTML, les ALT dans les images...

Et jusque maintenant, je n'ai pas attaché d'importance à la signification de mes textes alternatifs, puisque tous les navigateurs chargent l'interface graphique, non?

Pour NGT, très franchement, je ne sais pas non plus ce que ça veut dire, j'ai eu une demande, et j'applique ce qu'on m'a demandé de faire dans la structure des pages...etc... mais c'est vrai que QUID DU NGT?

Cependant, je vais jeter un oeil à tout ça.

Merci,

Michel

vermichou a écrit :
Et jusque maintenant, je n'ai pas attaché d'importance à la signification de mes textes alternatifs, puisque tous les navigateurs chargent l'interface graphique, non?

Le texte alternatif d'une image est utile dans tous les cas où l'utilisateur ne peut pas percevoir l'image:
- lorsqu'on utilise un navigateur textuel tel que Lynx (cas certes très rare);
- lorsqu'on utilise un lecteur d'écran (par exemple pour les aveugles et malvoyants);
- lorsque l'image n'est tout simplement pas chargée (chemin erroné, image supprimée, serveur trop lent...);
- si l'utilisateur est un robot de moteur de recherche;
- etc.