Depuis plusieurs semaines, je reçois quelques remarques sur la compatibilité pourrie de ce site avec les vieux navigateurs (on m’a parlé de IE7 (!), Firefox 3.6 (!) et Opera > 10.x sur Windows Phone).

Déjà : sous Firefox 3.6 ça devrait être remis en ordre, idem pour Opera >9.x (sur PC) : ça ne venait pas du CSS mais du HTML5.
Les balises <header>, <section>, <article> etc. ne sont pas reconnues par Firefox 3.6 et il les interprète n’importe comment.
La solution est triviale : ajouter un « display:block » à ces éléments, et tout rentre dans l’ordre.

Mon site est de nouveau navigable sur les vieux Firefox et les vieux Opera :

Avant : avant.png
Après : apres.png
Concernant IE, c’est définitivement non : ce navigateur n’utilise pas les mêmes standard que mon site et les autres navigateurs (qui utilisent du HTML/CSS), il est donc normal que ça ne marche pas.

Pour les navigateurs sur Windows Phone, je n’ai pas de quoi vérifier (pas de Windows Phone), désolé…

Enfin, je me permet de râler contre les vieilles versions de logiciels : n’utilisez pas les vieilles versions de navigateur ! Je sais que certains sont à l’école ou au travail où les responsables du service informatique n’ont pas toujours de temps de mettre à jour tous les logiciels, mais dans ce cas je ne saurais trop vous conseiller d’utiliser une clé USB avec un navigateur portable dessus : Firefox Portable ou Opera Portable par exemple. En prime vos marques pages, votre historique et vos extensions seront toujours là.
Le lancement des programmes depuis une clé USB est lui aussi interdit ? Utilisez le navigateur portable depuis le disque dur, ça marche aussi.

Bref, aucune excuse selon moi pour utiliser de vieilles versions de navigateurs et c’est aussi pour ça que je n’en fait pas plus que ça de moi même pour rendre mon site web compatible.
C’est aussi pour vous pousser à mettre à jour vos logiciels, c’est important.

25 commentaires

gravatar
Areop-Enap a dit :

Ouais, a l'école nous on a firefox 3.6 ... C'est assez chiant mais bon, sous linux il suffit de télécharger firefox, de l'extraire et de lancer firefox a partir de l’exécutable dans ce dossier ^^' Ça marche nickel. M'enfin je me demande pourquoi les mecs du service info ne mettent jamais à jour les logiciels, surtout les gratuits (c'est tellement compliqué ?)

gravatar
Gabbro a dit :

Il n'y avait pas que les vieux navigateurs qui ne marchaient pas : konqueror sous khtml 4.8 (moins d'un an) avais les même problèmes d'affichage.
Qui sont maintenant réglés.

gravatar
tcit a dit :

Les soucis que je t'avais remonté pour Windows Phone sont réglés, à la fois pour Opera Mobile et pour - bouh - Internet Explorer.

gravatar
Gilles a dit :

'fin mettre à jour pour des TRES vieux navigateurs, tu as du mérite...
Et pour info, j'ai bossé dans une boîte avec des terminaux : pas de port USB et pas de disque dur et IE6 \O/!
Enfin, en fait, disque dur du serveur sur lequel on se connectait (un Windows) donc j'avais FF en portable mais c'était parce que ce n'était pas verrouillé à 100% donc il y a des cas où on n'a pas le choix :/

gravatar
Gunera a dit :

Le lecteur de flux Akrégator 4.8.5 avait également un mauvais affichage de ce site.
Merci d'avoir réglé ce petit problème.

gravatar
Le Hollandais Volant a dit :

Eh ben, ce correctif a du succès :-)

@Areop-Enap :


c'est tellement compliqué ?



@qwerty :


C'est donc si simple que ça ?



J’ai ri en lisant vos deux commentaires, l’un sous l’autre :-D.
Vous êtes forts ;-).

@qwerty : oui, visiblement… Par défaut, les navigateurs doivent manifestement considérer les balises inconnues comme de type « inline », d’où la nécessité de les mettre en « block »…

@Areop-Enap : avec le rythme de sortie des versions de logiciels, ça serait un miracle que tous les PC soient à jours tout le temps.
À moins qu’ils utilisent des scripts pour exécuter la même opération sur tous les PC du parc informatique, une fois par semaine/mois.

Sous Linux c’est beaucoup plus simple : le script de mise à jour logicielle peut se lancer de façon automatique (le WE par exemple), et la mise à jour installe les mises à jour de tous les logiciels sur l’ordi + l’OS.

Un autre soucis sont les logiciels un peu moins grand public (solidworks ou geogebra pour les écoles par exemple) : une mise à jour du système peut les rendre inutilisable. C’est pour ça — malgré les risques de sécurité — les entreprises ou les écoles ne mettent pas à jour, ce qui est très con, à la fois pour nous (vieilles versions) que pour eux (risque de sécurité réellement là).


@djibey : ouais, j’ai vu !
Perso j’utilise plutôt le pack IE-collection : http://www.webupd8.org/2009/03/install-all-internet-explorer-versions.html
de IE1 à IE8 !
Très fun, et la fenêtre de IE 5.5 m’a presque fait verser une larme de nostalgie, en repensant à ce que j’utilisais au collège il y a… plus de 10 ans…


@Gilles : IE6 perso j’ai laissé tomber depuis bien longtemps :D. Tanpis pour ceux qui le subissent, mais y’a des limites quand même…
J’avoue que si ça n’avait pas été aussi rapide à corriger pour Fx3.6, j’aurais laissé tomber…

gravatar
Antoine a dit :

Pour IE y'a un truc très simple... C'est même pas une question de "standards" comme tu le dit, c'est juste qu'à l'époque de IE, ses éléments n'existaient, et IE ne reconnaît que les éléments qu'il connaît, et donc, qui existaient à son époque
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
<![endif]-->

gravatar
Yannick a dit :

C'est déjà très bien d'avoir pu corriger ça en une ligne pour les utilisateurs de Firefox 3.6.
Parce que parmi les utilisateurs de Firefox/Iceweasel 3.6, si je ne me trompe pas, on trouve encore les utilisateurs de Debian Stable, il me semble, non ?
(bon, bien sûr, on peut le mettre à jour via le sources.list, mais si on veut rester dans l'idée du Stable sans modifs, c'est encore une vieille version).

gravatar
Le Hollandais Volant a dit :

@Yannick : sur les 41% des visites se faisant sous Firefox,
les stats trouvent ça :
FX 16 : 75% de l’utilisation de Firefox
FX 17 : 5%
FX 14 : <2%

FX 3.6.x : <0,5%

En fait, j’ai tristement plus de visites sous IE 6.0 qu’avec FX 3.6.x…

Pour Debian, il me semble aussi ouais, et c’est bien triste.

gravatar
Guenhwyvar a dit :

Y'a pas un fichier javascript pour rendre compatibles les vieux navigateurs avec le HTML 5 ?

@Le Hollandais Volant :


Par défaut, les navigateurs doivent manifestement considérer les balises inconnues comme de type « inline », d’où la nécessité de les mettre en « block »…


À mon avis, les navigateurs ignorent les balises inconnues, tout simplement (ce qui revient au même, certes).

gravatar
Le Hollandais Volant a dit :

@Guenhwyvar : ignorer c'est ce que fait IE : même en appliquant du style, ça ne fait rien...

Mais le xHTML permet normalement d'ajouter ses propres balises, du moment qu'on les stylise correctement le navigateur est censé les afficher. Le HTML 5 je ne sais pas.

gravatar
Fred a dit :

@Guenhwyvar : Modernizr + polyfills (http://modernizr.com/docs/#polyfills) est pas mal utilisé je crois. De manière générale quand on utilise des styles tout fait (bootstrap, html5 boilerplate), je crois que la compatibilité est assez étendue.
Par contre quand on part de zéro avec ses CSS à la main, ça doit être une grosse galère. Des outils comme normalize.css permettent de ne pas repartir de zéro justement.

Sinon, le problème d'utiliser de vieux navigateurs au travail n'est pas toujours que "les responsables du service informatique n’ont pas toujours de temps de mettre à jour tous les logiciels". J'avais travaillé dans une banque, il n'y avait qu'IE6, et installer de nouveaux logiciels ou insérer une clé usb dans le PC était probablement un bon moyen pour se faire virer, et à raison, question de sécurité.

Par contre je trouve ça normal de ne pas se fouler pour supporter les vieux navigateurs : faire le contraire ralentit leur disparition et c'est un cercle vicieux où les dev web auront de plus en plus de boulot. Par contre, se baser sur le user agent pour bloquer l'accès aux sites est très dommage, il ne faut pas tomber dans ce travers là.

gravatar
Tester a dit :

Lol ces nouvelles balises header footer nav article & co. On dirait des tiroirs dans un classeur de bureau ! Perso je suis un fervent partisan du bordel organisé alors ces conneries là c'est pas demain la veille que je les utiliserais.
A part tuer la compatibilité avec des versions plus anciennes ça n'apporte strictement rien...connerie pour étudiant bien peigné ces balises.

gravatar
Le Hollandais Volant a dit :

@Tester : ouais, tu peux faire un site uniquement avec des Span et des Div.
Ca sera valide W3 et compatible. Que demander de plus ?

Le HTML est un outil passionnant. Compliqué, mais c'est passionnant quand même.
Faire un site en Div/Span ? même pas drôle pour moi, pour qui ce site est une passion et non u' métier.

gravatar
Tester a dit :

Ps : firefox s'en fout des balises. Tu peux lui mettre <bla></bla> il interprètera toujours le style en display:inline (la valeur par défaut) sans se soucier de la balise. Seulement à la différence notamment de IE qui exclu tout ce qui n'est pas conforme à ses propres édictions, firefox tient compte des paramètres introduits dans l'attribut style et c'est la raison pour laquelle ton display:block sur les nouvelles balises html5 de mes couilles en fusion sont interprétées nonobstant.

gravatar
Strahdivarius a dit :

@Areop-Enap :
Alors oui, c'est compliqué de mettre à jour un butineur en entreprise...

Par exemple, prenons une grande banque (je vous laisse le choix, mais considérez pour l'exercice qu'on parle d'un parc de 100 000 postes et plus, dans quelques dizaines de pays).

Le principal problème se pose avec les applications intranet ou internet utilisées, qui doivent fonctionner avec tous les butineurs utilisés et leurs diverses versions déployées.

Si on parle d'IE, on peut trouver IE6, IE7, IE8 sous WinXP, IE8, IE9, IE10 sous Seven.
Donc déjà 5 versions potentielles, avec des différences plus ou moins grandes sur le respect des standards, mises à jour au niveau sécurité tous les 2 mois environ.
FF n'est pas mieux loti, car il n'est pas possible de le laisser se mettre à jour tout seul, pour diverses raisons (bande passante par exemple, tout les sites n'ont pas une connexion rapide). La version "entreprise" permet de répondre en partie aux problèmes, en se ramenant à une mise à jour périodique comme IE.

Comme beaucoup d'applications ont été développées il y a un certain temps, leur respect des normes est relatif.
Et même pour des applications plus standard, encore faut il les faire évoluer au gré des versions, pour supporter les nouvelles vesions de butineurs.
Il m'est déjà arrivé de voir une application ne plus fonctionner suite à une mise à jour de sécurité sur le butineur (là, il faut écarteler le développeur de l'application, quand même).

En grande entreprise, le maître mot reste : tant que ça marche, il n'y a pas de raison de changer, parce que le changement coûte cher.

Le seul moment où tout peut être remis en question, c'est lors d'une mutation technologique qui impose le changement, que l'utilisateur le veuille ou non.
IE6 va disparaître avec WinXP, par exemple. L'ajout d'une nouvelle application Web peut aussi imposer la mise en place sur une partie du parc d'un butineur dernier cri (ex: disposer d'un butineur supportant le format SVG, ce qui élimine IE8).

Quand on ajoute tout ce qui peut se greffer en plus sur le butineur, le cauchemar continue : par exemple, toute modification d'une page de connexion pour la faire fonctionner avec un butineur demandera sans doute à revoir les procédures d'authentification automatique par carte à puce.

Le pire, ce sont les périodes de transition : là où je suis actuellement, les applications web doivent fonctionner sans erreurs avec IE6, IE8, IE9, FF 8 ; d'ici un an, IE6 et IE8 devraient sortir de l'équation, mais FF aura été mis à jour sur je ne sais quelle version, et quelqu'un aura certainement réussi à demander (et obtenu) qu'un service passe sur IE 10...

gravatar
petitkoalak a dit :

Pour la mise à jour de logiciel en entreprise ce n'est pas si simple que ça, il y a encore pas mal de boite qui tourne sous Windows xp avec son navigateur par défaut : IE6 . Pour la mise a jour c'est facile on télécharge, on installe et hop c'est plié pour les établissement scolaires et petites entreprises c'est presque pareil en un peu plus dur puisqu'il faut s'assurer de ts les paramètres et assurer la formation des employés/profs pas doués (eh oui). C'est un peu contraignant mais les mecs qui s'occupent des parcs informatiques ne sont pas des pros et il faut le dire, ils un peu la flemme . Enfin on arrive aux moyennes et grosses entreprises qui sont encore très majoritairement sous xp alors quelles ont des responsables informatiques qualifiés (elles tournent majoritairement sur les dernières versions de ie compatible xp ceci dit). Pourquoi ? Parce que la migration d'un OS a un autre nécessite une énergie et un temps faramineux, faire un backup de ttes les donnees, paramètres, sessions utilisateurs, etc puis l'upgrade (automatisé via des script custom) et enfin la restaurations des données et paramètres et sessions s'en suit dune formation obligatoire pour ts les employés c'est un boulot monstre alors si vous rencontrez des ie7 ou ie8 vous plaignez pas trop ;)

J'ai oublié de parler de la période de test logiciel et materiel. Je pense que le prochain upgrade se fera sur win7 sachant que le passage a Vista a été annuler en attendant un upgrade matériel

On va bien rigoler quand mme michu va passer a win8 c'est moi qui vous le dit :P

gravatar
petitkoalak a dit :

Bon j'ai été grillé... juste une question : c'est quoi un butineur ?

gravatar
Le Hollandais Volant a dit :

@petitkoalak : butineur, c'est le nom officiel d'un navigateur.
Comme "ruban adhésif" est le mon officiel désignant le Scotch.

"Navigateur" vient en fait du nom du logiciel "netscape navigator", ce qui en fait donc un nom propre passé dans le langage courant. Le nom commun officiel qui a été choisi fut butineur.

gravatar
Guenhwyvar a dit :

@petitkoalak : C'est pourtant simple : un butineur (ou brouteur), c'est ce qui sert à visiter une page sur la toile en entrant son adresse réticulaire ! :D

gravatar
Nintendo Fan a dit :

Je consulte ton site avec le navigateur maison de la Wii U et tout marche nickel !
Nintendo a fait (ou a commandé) un navigateur bien sympathique et rapide !
Un stick analogique pour se déplacer dans la page web, l'autre pour le zoom: j'adore ! (mais j'adore aussi les FPS au pad)
Et il ya l'écran tactile du gamepad !
Bref plus besoin d'acheter une tablette !
Le seul bémol que je vois pour l'instant est la prise en charge du Mp4 mais pas du Webm !

gravatar
Pignaki a dit :

J'ai rapidement regardé les commentaires pour voir si quelqu'un avait répondu mais je n'ai pas l'impression :

Sous Windows Phone 7.x (avec Internet Explorer donc), l'entête de la page se mélange un peu les pinceaux et la barre latérale se place en dessous du contenu principal, mais ça reste très lisible !

Je rappelle que cette version de WP n'accepte pas de butineur alternatif... *sob*

Les commentaires sont fermés pour cet article