18073 sujets

Questions générales et questions de débutants

Compatibilité entre navigateurs - Modèles Microsoft et W3C CSS2

Bonjour à tous,

Quelqu'un pourrait-il me dire quelles règles appliquer pour développer un site HTML / PHP / CSS2 "compatible" IE5/6, FireFox, Netscape, Opéra, etc.

Mon modeste site : www.dolphin-zone.net hébergé sur ma machine avec easyphp1.8.

J'ai été faire un tour chez OpenWeb et j'ai essayé la technique "Hack Box" pour contourner le cas du modèle de boîtes propriétaire Microsoft : ça ne fonctionne pas avec IE6 ... J'ai aussi essayé plusieurs DTD sans succès ...

Pour être prosaïque, comment positionner simplement une boîte avec une section DIV, une classe .boite, et les propriétés :
- position,
- top,
- left,
- margin,
- et padding ???

exemple :

.boite
{
position : absolute;
top :50px;
left : 50px;
margin : 0px;
padding : 0px;
}

<DIV class="boite">

<p> ... </p>
<?php include("liens.php"); ?>
...

</DIV>

Suivant les navigateurs, cette boite ne va pas être placée au même endroit. Le modèle microsoft gère margin et padding différemment ça je l'ai bien compris mais même en mettant padding et margin à 0px (ce qui devrait résoudre le pb) le résultat n'est pas le même.

Je m'excuse par avance si cette question est trop triviale ou si elle a déjà été posée ...

Merci à tous pour vos réponses,

Bonne soirée,

Dolphin
la meilleur façon consiste (déjà à passer à wamp et délaisser ephp :d http://wampserver.com) et d'utiliser la var HTTP_USER_AGENT de php qui te renseigne sur le navigateur.

Dès lors tu pouras imposer une feuille de style pour le navigateur de ton choix ou une par défaut.

Non seulement tu évite les bou de fer à souder qui permette souvent grace à trois file la compatibilité mais en plus tu ouvre les perspective qu'offre uniquement certain navigateur.
Salut Dolphin..

En ce qui me concerne, je te répondrais que Netscape, Opéra et Mozilla sont tous des navigateurs qui respectent les standards et interprétent les instructions CSS plus ou moins (d'ailleurs beaucoup plus que moins) de la même façon.

Il n'y a vraiment que IE et son interprétation "personnelle" qui pose problème. La solution a préférer est donc la suivante : coder le plus proprement possible en évitant les instructions qui pourraient faire qu'IE les interprète à sa manière...

Je m'explique :
Par exemple il vaut mieux éviter de renseigner les propriétés width et padding à un bloc : il vaut mieux indiquer une marge externe pour le placer. Après, rien ne t'empêche de positionner tes éléments grâce à leurs propres marges ... Ce qui du coup, ne posera plus de problème.

Voilà...
Pour mieux comprendre le fonctionnement général et la façon de coder ça dans les règles de l'art, je te conseille
ceci : c'est un excellent investissement !

En attendant, amuse-toi bien ...
Smiley cligne

<Edit> N'oublie pas d'encadrer tes portions de code dans les balises prévues à cet effet Smiley murf </Edit>
Gectou4 a écrit :
la meilleur façon consiste (déjà à passer à wamp et délaisser ephp :d http://wampserver.com) et d'utiliser la var HTTP_USER_AGENT de php qui te renseigne sur le navigateur.

Dès lors tu pouras imposer une feuille de style pour le navigateur de ton choix ou une par défaut.


Boudiou non, il faut surtout pas recommander ce genre de bricolages !
Si on se met à faire une feuille de style pour chaque navigateur, on est pas sorti de l'auberge !

Et hop une version pour IE Win 5.0
Et une version pour IE Win 5.5+
Et une version pour IE Mac
Et une version pour Firefox
Et une version pour Konqueror
Et une version pour Safari
Et une version pour Opera
---
Et une version pour Opera Mobile, et une pour Minimo, et une version pour… Rhâaa au secours !!!


Bon, plus sérieusement,
Cygnus a écrit :
Il n'y a vraiment que IE et son interprétation "personnelle" qui pose problème. La solution a préférer est donc la suivante : coder le plus proprement possible en évitant les instructions qui pourraient faire qu'IE les interprète à sa manière...

+1
C'est la technique du plus petit dénominateur commun : on utilise ce qui passe bien partout, sans rajouter plein de hacks dans son code.

Ça demande un certain apprentissage. Il n'y a pas de solution miracle.

Pour commencer, sur le positionnement, va faire un tour sur OpenWeb, ils ont une série d'articles sur le positonnement CSS.
Pour la question du box-model, elle est très simple : utilises un Doctype correct et complet de type Strict ou Transitional, et ne mets pas de prologue XML à tes fichiers XHTML 1.0 servis en HTML (c'est à dire 99,9% des pages web en XHTML), car IE n'aime pas ce prologue et passe en mode Quirks.

Ce qui donne, pour du XHTML 1.0 Strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
</head>
J'allais te donner quelques liens, mais je me rends compte que je les ai déjà sur une page :

http://web.covertprestige.info/cours-html/

Ce sont les liens de « Pour aller plus loin »
Les cinq premier répondent à ta demande.
Les trois suivants te seront utiles si tu n'es pas familier de ces problèmes.
Ok. Merci pour ces réponses. Je vais regarder tout ça, mais ... même si il n'y a pas de solution miracle, comment fait-on avec une feuille de style CSS2 unique pour que IExx, Netscapexx etc interprète de la même manière des propriétés aussi basiques de positionnement de boites que { top, left } avec padding et margin à 0 ??? Même avec le plus petit dénominateur commun ces propriétés sont incontournables pour réaliser des pseudos frames ...

Pour l'instant j'ai implémenté deux feuilles de style avec le code suivant :

<?php
//============================================================
// Intégration des feuilles de style suivant le navigateur
//============================================================
// IE
if(ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]))
{
echo('<LINK rel="stylesheet" type="text/css" href="style/styles_ie.css">');
}
// Les autres navigateurs
else
{
echo('<LINK rel="stylesheet" type="text/css" href="style/styles_ff.css">');
}

?>

Certainement pas la meilleure solution, mais cela fonctionne pour IE et Firefox ... je vais maintenant déclarer une DTD strict comme proposé et faire valider mes sources par W3C ... mais je pense que cela ne suffira pas ...

Y a t-i d'autres solutions ? Bon ok je vais lire les articles proposés ...

Bonne soirée à tous et merci de vos réponses :o)
Salut,

Je te conseillerai plutôt de faire une (ou plusieurs) feuilles de styles pour TOUS les navigateurs, et une corrective pour IE, avec inclusion par commentaire conditionnel. Ca marche assez bien comme méthode.
Bonsoir,

Il me semblait que mon code visait à ça ? Une feuille pour IE avec l'implémentation du modèle "Microsoft" et une autre feuille pour les autres browser ... Y a t-il une autre méthode ?
Je ne trouve pas cette solution très élégante (plusieurs feuilles de style), j'aurais préféré utiliser le modèle "Hack Box" décrit sur OpenWeb mais cela ne fonctionne aparamment pas sur IE6 ...
Si quelqu'un à une autre méthode je suis preneur.

Bonne soirée à tous et merci pour vos réponses !
Dolphin a écrit :
Il me semblait que mon code visait à ça ? Une feuille pour IE avec l'implémentation du modèle "Microsoft" et une autre feuille pour les autres browser ... Y a t-il une autre méthode ?

IE est tout à fait capable de gérer le modèle de boîte W3C/Standard ! Il suffit de lui dire.

Il me semble que sur cette question, la partie concernant le doctype switching sur http://openweb.eu.org/articles/dimensions_boites_css/ est assez précise.

La partie suivante, qui expose un hack intitulé box-model hack concerne uniquement IE 5.5. As-tu réellement besoin d'un rendu optimal dans IE 5.5 ? À moins de savoir à l'avance que le site s'adressera à un public équipé de ce navigateur (par exemple pour une entreprise dotée d'un parc informatique vieillissant), c'est peu probable.


Bref, la question du modèle de boîte est très gérable, vu qu'on peut obtenir de tous les grands navigateurs du marché (les navigateurs Gecko, IE6, Safari, Opera) qu'ils utilisent le même modèle de boîte standard.

Je répète mon idée selon laquelle la solution qui consiste à faire deux feuilles de style séparées est à éviter autant que possible.
Bonsoir,

L'article de OpenWeb n'est pas si précis que ça. Comme tu le dis bien le Hack Box Model ne fonctionne que pour IE5.5 donc d'une utilité moyenne je suis ok.

De façon claire, le doctype switching s'est révêlé inéfficace pour des propriétés aussi simples que top, left avec margin et padding à 0 ... , pourtant je les ai tous testé (les DTD énnoncés dans l'article).

Désolé d'insister, mais par rapport à ton commentaire :

a écrit :

mpop à écrit
Bref, la question du modèle de boîte est très gérable, vu qu'on peut obtenir de tous les grands navigateurs du marché (les navigateurs Gecko, IE6, Safari, Opera) qu'ils utilisent le même modèle de boîte standard.


Tu dis donc que les grands navigateurs utilisent le "modèle de boîtes standard" ... Après avoir testé une classe CSS2 très simple avec les propriétés basiques citées ci-dessus, le résultat n'est pas identique sous IE6 et FireFox ... donc le modèle du W3C n'est pas interpreté de la même manière par ces deux navigateurs et ce quelque soit la DTD ........

Me trompe-je ? Quelle solution adopter à part deux feuilles de style différentes et l'utilisation de HTTP_USER_AGENT ?

Merci de vos réponses,

@++

Eric.
Dolphin a écrit :
Tu dis donc que les grands navigateurs utilisent le "modèle de boîtes standard" ... Après avoir testé une classe CSS2 très simple avec les propriétés basiques citées ci-dessus, le résultat n'est pas identique sous IE6 et FireFox ... donc le modèle du W3C n'est pas interpreté de la même manière par ces deux navigateurs et ce quelque soit la DTD ........

Me trompe-je ? Quelle solution adopter à part deux feuilles de style différentes et l'utilisation de HTTP_USER_AGENT ?

Je persiste et signe. Il y a peut-être des subtilités qui m'échappent, mais dans les grandes lignes le doctype switching marche correctement.

Tu aurais un exemple en ligne ? Parce que là, j'ai de plus en plus l'impression que l'on parle de choses différentes, et j'ai du mal à comprendre le problème que tu rencontre. Surtout quand tu dis
Dolphin a écrit :
le doctype switching s'est révêlé inéfficace pour des propriétés aussi simples que top, left avec margin et padding à 0

Je n'ai pas la foutue moindre idée de ce que ça peut vouloir dire ! Smiley decu
Bref j'ai l'impression de tourner en rond.

Donc, si tu as une page HTML/CSS, avec le même code quel que soit le navigateur (pour ne pas introduire de biais), et un problème observable, je suis preneur. Smiley smile
Dolphin a écrit :


Tu dis donc que les grands navigateurs utilisent le "modèle de boîtes standard" ... Après avoir testé une classe CSS2 très simple avec les propriétés basiques citées ci-dessus, le résultat n'est pas identique sous IE6 et FireFox ... donc le modèle du W3C n'est pas interpreté de la même manière par ces deux navigateurs et ce quelque soit la DTD ........

Me trompe-je ?

Salut,

Il y a de très fortes chances que oui !
Le simple fait que tu relies les problèmes de compatibilités uniquement à la question du modèle de boite est à cet égard révélateur.

1. IE6 tant qu'il ne bascule pas en mode quirck suit le box model standard.
(et le centrage par margin:auto; au passage).
2. Des source de bug pour IE il y en a d'autre notamment sur les éléments dotés ou non de haslayout. Et c'est dans ce cas un tout autre sujet !

Je t'invite donc à penser un peu moins au HTTP_USER_AGENT. Et m'associe à Mpop pour te demander du code un peu concret sur lequel on puisse se pencher Smiley cligne
Modifié par clb56 (26 May 2006 - 22:20)
Ok ! Merci de vos réponses.
Je vous envoie mes sources à tous les deux (index.php et les deux feuilles de styles).
Si j'utilise uniquement la feuille de style styles_ie.css le résultat n'est pas identique pour FireFox ...

Merci d'avance :o)

Eric.
Bon, je veux bien filer un coup de main, mais encore faut-il faire les choses correctement. Tu m'as envoyé des scripts PHP et les feuilles de style correspondantes, et je pourrais me débrouiller avec ça, en taillant dedans pour obtenir quelque chose de testable. Mais je pense plus pédagogique de te demander à toi de faire cet effort Smiley smile

Les fichiers PHP c'est bien gentil, mais ça n'a rien à voir avec le CSS. Ce qu'il nous faut, c'est un rendu HTML type, et la feuille de style correspondante.
Je précise tout de même que j'ai essayé de me dépatouiller avec ton index.php, mais qu'il me renvoie une série d'erreurs, toutes des erreurs d'inclusions.

Alors voilà ce que je te propose :
– tu teste ton site en PHP chez toi ou sur ton serveur ;
– tu enregistre ta page sous forme de page HTML ;
– tu ne garde que ta feuille de style utilisant le modèle de boîte standard ;
– tu oublie le HTTP_USER_AGENT, le but étant ici de tester les différences de rendu pour une même feuille de style standardisée ;
– maintenant que tu as un couple index.html+style.css, tu envoie le tout par mail, ou tu le mets sur un espace en ligne où il sera testable.

Allez, à plus tard Smiley cligne

PS : si tu veux vraiment bien faire les choses, tu peux aussi virer tous les éléments qui n'influent pas sur le bug constaté, pour épurer le code.
Modifié par mpop (27 May 2006 - 19:29)
Sujet clos
Aller à