1 - Vérifier la compatibilité
2 - Navigateurs Internet Explorer, Firefox et autres
3 - Comprendre le rendu selon le navigateur
1 - Vérifier la compatibilité
Que signifie "obtenir un code compatible" ?
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...
2 - Navigateurs Internet Explorer, Firefox et autres
Comment faire pour vérifier rapidement si tout le contenu de mes pages sera
visible dans Internet Explorer et dans les autres navigateurs?
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:
- Mozilla Firefox:
https://www.mozilla.org/fr/firefox/new/
- Opera:
https://www.opera.com/fr/download
- Google Chrome:
https://www.google.ch/chrome?hl=fr
- Microft Edge:
https://www.microsoft.com/fr-fr/edge
- 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: https://lynx.fr.softonic.com/
Attention, un grand nombre de visiteurs utilisent leur téléphone pour accéder à Internet. Vous devez donc vérifier systématiquement chacune de vos pages dans un petit écran, soit en utilisant un mobile ou un portable, soit en réduisant autant que possible la taille de l'écran sur votre ordinateur.
Finalement, pour connaitre les tendances d'utilisation des navigateurs:
https://www.w3schools.com/browsers/browsers_stats.asp
3 - Comprendre le rendu selon le navigateur
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?
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:
https://www.siteduzero.com/tutoriel-3-12585-introduction.html
https://openweb.eu.org/articles/lacher_prise
Comment identifier et résoudre les erreurs:
https://www.alsacreations.com/actu/lire/194-mthodologie-pour-rsoudre-les-problmes-daffichage-en-css.html