FAQ Expression Web, SharePoint Designer et FrontPage

 Questions, aides et astuces, provenant au départ du forum microsoft.public.fr.frontpage.

Compatibilité

Sauter la navigation

 

 
 
 1 - Vérifier la compatibilité
 2 - Navigateurs Internet Explorer, Firefox et autres
 3 - Comprendre le rendu selon le navigateur
 

1 - Vérifier la compatibilité

Question 1 Que signifie "obtenir un code compatible" ?

Réponse 1 Un code compatible, c'est surtout un code sans erreur. Il commence alors par la version du langage utilisé, la commande doctype (voir la rubrique Accessibilité #7).

Ensuite pour vérifier le code dans Expression Web et SharePoint Designer, il faut utiliser le menu Outils - Rapports de compatibilité, en y sélectionnant les versions les plus récentes, comme XHTML 1.0 Strict et CSS 2.1.

De plus, lorsqu'une page est affichée en mode Code, deux icônes apparaissent au besoin dans la barre d'état pour indiquer des erreurs de code ou de compatibilité. Cliquez sur ces icônes pour atteindre l'erreur, puis immobilisez la souris sur le texte souligné en rouge ou coloré en jaune pour en connaitre la raison. Utilisez la touche F9 pour atteindre l'erreur suivante...

Retour au début

2 - Navigateurs Internet Explorer, Firefox et autres

Question 2 Comment faire pour vérifier rapidement si tout le contenu de mes pages sera visible dans Internet Explorer et dans les autres navigateurs?

Réponse 2 En général, on considère qu'une page sans erreur de code et qui suit les règles d'accessibilité devrait être visible correctement dans la plupart des navigateurs. De plus, l'utilisation des feuilles de style peut aider beaucoup en simplifiant le code utilisé.

Avec FrontPage, vous pouvez lui demander de n'afficher que les commandes visibles selon d'anciennes versions de deux navigateurs: au menu Outils, Options de page, onglet Compatibilité (ou, avec FrontPage 2003: onglet Opérations d'auteur). Dans la liste des navigateurs, choisir l'option "Internet Explorer et Netscape Navigator". Dans la même fenêtre, vous pourrez aussi préciser la version de ces navigateurs.

Mais de préférence, installez différents navigateurs sur votre poste. Les dernières versions sont disponibles directement sur le site des fabricants.
Pour Internet Explorer:
http://www.microsoft.com/downloads/results.aspx?pocId=6&freetext=internet%20explorer&DisplayLang=fr

Pour les tests dans différents navigateurs, ajoutez aussi Mozilla Firefox:
http://www.mozilla-europe.org/fr/  ou
http://www.mozilla-europe.org/fr/products/firefox/

Ainsi que celui Opera: http://www.opera-fr.com/telechargements/

Et Google Chrome: http://www.google.ch/chrome?hl=fr

Sans oublier le navigateur texte Lynx, afin de vérifier ce qui est lisible dans vos pages par un robot de moteur de recherche et par un logiciel de lecture à haute voix des pages Web. Pour l'installer sous Windows, voir la section Download au bas de cette page:
http://csant.info/lynx.htm
 
Lynx sous d'autres systèmes d'exploitation:
http://lynx.isc.org/lynx2.8.7

Finalement, pour connaitre les tendances d'utilisation des navigateurs:
http://www.w3schools.com/browsers/browsers_stats.asp

Retour au début

3 - Comprendre le rendu selon le navigateur

Question 3 Dans une page, j'ai une succession de couches bien ancrées, en position absolue, centrées à l'intérieur d'un cadre. C'est parfait sous Internet Explorer, sauf que l'une des couches, une seule, est trop large et déborde avec Mozilla et Safari. Y a-t-il un document quelque part qui indique les différences entre navigateurs?

Réponse 3 Dans le principe des styles CSS, on fait appel à la notion de "boite" qui aurait une marge intérieure (le padding), un contenu (à l'intérieur du padding), une bordure (border) et une marge extérieure (le margin). Avec Internet Explorer, la largeur de la boite est celle du contenu plus le padding. Mais, dans les normes du W3C, la largeur de la boite est plutôt celle du contenu seul. Avec Mozilla, Safari, Opera et les autres se conformant à ces normes, on a donc un écart dès qu'on met du padding (pourtant requis à cause de la bordure).

Comment s'en sortir?
1ère solution: spécifier avec quelle version du HTML ou de XHTML a été faite la page. En effet, il existe plusieurs versions de ces langages, en mode transitional ou strict. Si Internet Explorer reconnaît que la page est en HTML strict, il se conforme à la définition W3C des boites et se comporte donc comme les autres navigateurs. Pour spécifier qu'on est en "strict", il faut ajouter la ligne de code suivante en haut de page, avant la balise <html>:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mais attention, à ce moment là, plus question d'utiliser des balises <font> par exemple qui n'existent pas en HTML strict. Pour plus d'infos, voir la page Accessibilité - question 7.

2ème solution: utiliser un subterfuge dans la feuille de style pour donner une largeur différente à la boite selon que la page est lue avec Internet Explorer ou avec un autre navigateur. par exemple pour une boite qui a un id "boite", on va rédiger comme ça la feuille de style:
   #boite {padding: 25px; width: 550px; _width: 600px}
Mozilla et consorts ne vont pas comprendre l'instruction précédée du soulignement et mettront donc une largeur de 550px au contenu de la boite. Tandis que Internet Explorer (toutes versions) va retenir l'instruction avec le soulignement (il faut qu'elle soit placée après l'autre) et donner une largeur de 600px au contenu + padding, ce qui fait un rendu identique à celui des autres navigateurs.

Pour plus d'infos sur le rendu selon le navigateur:
http://www.siteduzero.com/tutoriel-3-12585-introduction.html
http://openweb.eu.org/articles/lacher_prise

Comment identifier et résoudre les erreurs:
http://www.alsacreations.com/actu/lire/194-mthodologie-pour-rsoudre-les-problmes-daffichage-en-css.html 

Et utiliser SuperPreview dans Expression Web 3 pour comparer l'apparence d'une page dans Internet Explorer avec
http://msdn.microsoft.com/FR-FR/library/ee371310(v=Expression.30).aspx 

Retour au début