Rendre son site 100% compatible avec tous les navigateurs ?

[Anonymous]

Salut, j'ai un problème sur mon site.
Je l'ai construit en prenant pour base Internet explorer 10, et le problème c'est que dès que j'affiche mon site dans Chrome ou Firefox, l'affichage n'est pas le même (boutons décalés, images absentes etc...)

existe t-il une manip pour rendre compatible son site avec tous les navigateurs ?

merci d'avance

 

[sonn]

XD tu viens de découvrir les joies du dvt web =D tu n'y couperas pas
sinon il existe des scripts qui corrige certains manque de IE mais c'est tout

 

[mipc]

oui les script JS et peut etre du CSS, qui vont déterminer les éléments à charger de la bonne facon en fonction du USER AGENT, je m'exeplique un user agent ça donne des informations suivantes:

-le système d'exploitation.
-le navigateur internet.
-la résolution écran utiliser(pratique pour s'adapter la taille du texte et/ou l'ergonomie du site en fonction de la résolution écran du visiteurs du site).

et surement d'autres.

y a surement sur le net des scripts tous fait qui permet de prendre en compte un aspect en fonction du user agent, attention le user agent est une information que l'utilisateur peux modifier à sa guise à par les webmaster et les gérant de moteur de recherche et les concurrents, et ceux qui utilise le partage de connexion de leurs téléphone portable pour surfer sur leur PC en vancance et ou dans le trains ou en voiture, peut de gens on besoin de modifier leurs user agent.

edit: voici un exemple de se que j'ai pu trouver:

http://agrumeprod.fr/simulation-mobile-pour-tester-votre-site-web
http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de ... obile.html
http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-l ... tions.html
http://www.commentcamarche.net/forum/affich-13889676-adapter-le-design ... navigateur
http://www.commentcamarche.net/forum/affich-12599471-adapter-deux-page ... avigateurs
http://www.commentcamarche.net/forum/affich-10004084-cmt-adapter-mon-s ... avigateurs
http://www.commentcamarche.net/forum/affich-5366554-mozilla-firefox-3- ... explorer-8

http://www.nanane.fr/2010/01/js-adapter-son-site-au-navigateur-de-lutilisateur/

http://www.siteduzero.com/forum-83-517011-p1-comment-adapter-un-site-w ... teurs.html

http://www.siteduzero.com/forum-83-568397-p1-comment-adapter-sont-site ... ernet.html

http://www.siteduzero.com/forum-83-556678-p1-adapter-son-site-html-css ... ateur.html

http://www.siteduzero.com/forum-83-246921-p1-adapter-le-site-a-la-fene ... ateur.html

http://www.lafermeduweb.net/billet/css3-media-queries-adapter-un-site- ... -1112.html

voila.

 

[zeb]

Il est plus simple (pour moi, par habitude) de coder sous FF proprement et d'adapter avec deux trois hacks a IE (la démarche est pas logique vis a vis du nombre d'utilisateur mais ça marche pour moi).
IE supporte un truc qui s'appelle les "commentaires conditionnels" (il me semble que c'est ce nom) qui te permet de mettre des feuille de style adapté aux versions de IE mais qui ne seront pas prises en compte par les vrais navigateurs (tous les autres)

<!--[if IE]>
  Ici votre code HTML réservé à IE.
<![endif]-->

Tu peux cibler des versions aussi :

<!--[if IE 7]> pour IE 7.0 <![endif]-->
<!--[if IE 8]> pour IE 8.0 <![endif]-->
<!--[if IE 9]> pour IE 9.0 <![endif]-->

Là c'est bien argumenté ;-)

De plus en CSS "!important" permet de définir des règles qui seront prise en compte par FF et Gecko like mais pas par IE (du moins les vieilles version il me semble).

balises {
  propriété : valeur [b]!important[/b];
}

propriété : valeur va être "ignoré"

Tu devrais trouver une foultitude de pages traitant de compatibilité navigateur sur le toile avec des hacks associés.
Il y a un pingouin qui en parle ici : Les hacks CSS pour Internet Explorer.

Si ton site est encore sans feuille de style avec le code descriptif mélangé au HTML t'est mort :wink:

 

[Leonick]

attention, avec les hack ie, car ça ne fonctionne pas avec les nouvelles versions.

 

[Anonymous]

Merci pour toutes vos réponses !
Vu que je vais devoir refaire tous les ajustements, vous me conseillez de me servir de quel navigateur comme base ? (pour ensuite adapter aux autres)

 

[mipc]

au lieu d'installer Chrome version normale, installe google chrome version DEV, google chrome parce que basé sur WEBKIT et qui dit WEBKIT dit un grand nombre de navigateur internet, et DEV car c'est la plus en amont technologiquement parlant sans trop de bugg.

version windows de google chrome DEV

 

[sonn]

firefox, le meuilleur pour le dévellopement à mes yeux chrome passe partout je croit et après tu joue à la roulette russe avec IE

 

[Anonymous]

mipc c'est vrai que chrome à l'air bien, c'est le navigateur que j'utilise au quotidien pour surfer donc ç'a m'arrange.
Par contre j'ai re-téléchargé chrome version DEV grâce au lien que tu as fourni, on me dit que l'installation s'est terminée; mais comment savoir si je suis bien sur la version DEV de chrome et pas sur la version classique ?

merci d'avance

 

[sonn]

bah aide/options, a propos/version ^^" cherche un peu dans tes menus

 

[mipc]

clé à mollet en haut à droite, puis "à propos de Google Chrome"!!!!

 

[zeb]

c'est le navigateur que j'utilise au quotidien pour surfer donc ç'a m'arrange.

Très mauvaise idée que d'utiliser ton navigateur "perso" pour le dev, car on a souvent quelques plugin a nous d'installé et on bidouille souvent la config.

L'idéal est (pour moi) d'avoir deux trois navigateurs "vierge" de toute configuration donc avec un comportement par défaut qui est celui que tu peut attendre de "monsieur tous le monde".
Si tu dev dans des conditions particulières il y a un risque.

Après si t'as qu'une seule machine sous la main genre windows / IE tu touche le maximum de monde mais avec la rapidité des changements de version de IE ces dernière années, tu est chocolat dans pas mal de cas (surtout qu'IE6 est encore pas mal utilisé au canada par exemple). Bref une petite VM genre VirtualBox aide aussi a s'installer 3/4 configurations permettant de déjà donner dans du sérieux niveau compatibilité et travail.

Maintenant il te faut aussi un navigateur "customisé" pour tout ce qui est optimisation et là FF avec sa bibliothèque de plugin SEO / dev dispo reste le meilleur outils je pense (bien plus que chrome qui n'a pas le même recul je pense)

 

[mipc]

pour ça y a les profiles, tu peux créer autant de profile que tu veux, de plus en mode de navigation privée la plus part des plugins sont désactivés!!!

pour chaque profile dans google chrome, tu peux associer ou pas un compte google.

 

[zeb]

pour ça y a les profiles.

Relis bien le pourquoi, tu va comprendre que créer un profile c'est personnaliser le navigateur ce qui reviens au contraire de l'effet recherché a savoir "configuration par défaut".
La personnalisation d'un outil logiciel ne te permet jamais de savoir si tu l’utilise "par défaut" ou en mode qui ressemble au "comme par défaut".
Maintenant c'est qu'un conseil pour avoir une certitude, chacun fait comme bon lui semble.

 

[mipc]

tu affirme un truc, mais tu ne prouve rien, prouve nous qu'un profile vierge, à un comportement très diffèrent en terme d'affichage, q'un google chrome vierge.

 

[zeb]

Tous simplement car suite a une instal tu n'a pas de profil donc "virginité obligatoire" (ça c'est une certitude).

Et qu'ensuite ce n'est plu pareil (donc pas par défaut) et qu'a moins que tu ai désassemblé le code source pour l'étudier tu est certains qu'on ne puisse pas affirmer que rien n'est changé.

Parallèlement, et c'est toi qui le dis (regarde bien ton message), tu dis que certains plugin sont désactivé donc tu admet de fait que l'action de créer un profil modifie la configuration. Modifier la configuration revenant a ne plu avoir la configuration par défaut (je détaille pour que tu comprenne bien). Et ça ne necessite donc pas de preuve c'est comme un axiome ... changement = différence.

Après c'est de la logique tu en fait ce que tu veux.

 

[mipc]

toi tu ne démontre pas capture d'écran à l'appuis, que graphiquement un profile vierge supplémentaire est graphiquement très diffèrent en terme d'affichage qu'une installe vierge de google chrome.

tu affirme un truc, mais tu ne prouve rien, prouve nous qu'un profile vierge, à un comportement très diffèrent en terme d'affichage, q'un google chrome vierge.

se que je veux, c'est pas des affirmations, se sont des faits avec des captures d'écran et des vidéo, en passant d'un ordinateur à un autre.

 

[lambi521]

@mipc: Zeb applique juste le principe de précaution, tu n'auras pas de version plus vierge qu'une nouvelle install, c'est juste logique et pas dur à comprendre.

Sinon pour répondre au topic, tu peux déjà tester ton site sur W3C validator, avoir un code source propre aide à avoir un bon affichage partout.

 

[zeb]

@mipc: Zeb applique juste le principe de précaution, tu n'auras pas de version plus vierge qu'une nouvelle install, c'est juste logique et pas dur à comprendre.

ça dépend pour qui.

@mpic : Mon conseil initial est de tester les sites avec des navigateur pas personnalisés. Je n'ai rien a te démontrer.

Après (3éme édition ) tu fait ce que tu veux, il est vrai que certaines personnalisations n'ont pas d'impact, d'autres plus, mais si tu veux avoir une certitude tu prend une instal vierge et tu l'as. Tous les autre cas seront des suppositions plus ou moins vérifiables.

Maintenant, perso j'ai pas de souci a ce niveau, j'ai des millions de pages sur la toile, j'ai eu en main de nombreux sites depuis la page perso à 30 visites par jour (genre tu sais quoi) et le site a 30 000 visites par jour et je donne juste mon avis, sur un point qui peut être utile. L'auteur du topic qui a des soucis en fera ce qu'il veux.

 

[mipc]

de toute façon personnellement j'ai plusieurs ordinateurs(cinq), donc le serveur, qui ont des navigateurs vierge sans profile, pour la bonne et simple raison que ses navigateurs là ne sont pas utilise du moins pour le SERVEUR, et sur les ordinateurs ou je code j'ai sous la main IE9.0 en vierge et SAFARI(WEBKIT)(en vierge), donc j'ai suffisamment d'ordinateur pour tester et suffisamment de navigateur, sans compte les machines sous ANDROID et les ordinateurs qui sont à PARIS et à Toulouse et Rouen au quel j'ai accès.

si non y a des sites qui permettent de se données une idée de l'aspect du site sur diffèrent browser internet, certaines sont gratuit.

 

[spout]

Je vois que personne ne l'a mentionné, une des première chose à faire c'est d'avoir un reset CSS:
http://www.alsacreations.com/astuce/lire/36-reset-css.html
http://meyerweb.com/eric/tools/css/reset/