web-dev-qa-db-fra.com

Comment savoir si un navigateur est en mode "bizarreries"?

Supposons que vous ayez une page avec un doctype et un balisage HTML relativement stricts qui sont presque conformes, mais qui manquent peut-être de quelques manières stupides, peut-être à cause du contenu utilisateur qui est hors de votre contrôle ... disons que vous travaillez sur un contenu système de gestion ou un thème pour un système de gestion de contenu où vous contrôlez une structure de base et avez besoin de Javascript, mais vous n'êtes pas responsable de tout le reste qui va dans les pages.

Comment savoir (ou: qu'est-ce qui va déterminer) quand le navigateur décide de passer en mode "bizarreries" plutôt que d'utiliser son moteur plus conforme aux standards?

Je cherche des réponses pour chacun des principaux navigateurs, car IE, Chrome, Safari et Firefox géreront bien sûr tous différemment. Une seule erreur suffit-elle pour la forcer ou avez-vous une certaine latitude?

126
Joel Coehoorn

Dans Firefox et Opera vous pouvez déterminer si votre navigateur est en "mode excentrique" en vérifiant les informations de la page.

En utilisant document.compatMode, vous indiquera le mode dans lequel vous vous trouvez avec la plupart des navigateurs.

Dans Chrome, Safari et IE, exécutez ce javascript dans la barre d'adresse:

 javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

(notez que vous devrez retaper le javascript: portion après avoir été collée dans votre barre d'adresse, en raison de récents changements de sécurité)

154
Chris Ballance

Comme vous pouvez interroger le mode de rendu en JavaScript, vous pouvez avoir un Bookmarklet qui vous indiquera quel mode de rendu une page utilise.

J'ai trouvé ce bookmarklet en mode de rend qui fonctionne bien pour moi:

javascript:m=(document.compatMode=='CSS1Compat')?'Standards':'Quirks';window.alert('You%20are%20in%20'%20+%20m%20+%20'%20mode.');
19
Dave Webb

La réponse complète à votre question spécifique actuelle: "Une seule erreur suffit-elle pour la forcer ou avez-vous une certaine latitude? est que cela dépend totalement de l'erreur. Par exemple,

<!-- Comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

forcera le mode bizarreries en IE 6 & 7 malgré pas vraiment une erreur (ils lancent juste un total bancal lorsque la toute première ligne du fichier n'est pas une déclaration). Une liste rapide des types/bizarreries peuvent être trouvées ici

Essayez de coller la ligne suivante dans votre code HTML pour les tests (très mauvais javascript, je passe ici - désolé ... assurez-vous que cela ne soit jamais mis en ligne :)

<a href="javascript:alert(document.compatMode);">What mode am I?</a>
11
Steerpike

Selon http://www.quirksmode.org/css/quirksmode.html : "Le problème était que certaines pages écrites en mode quirks avaient des doctypes. Par conséquent, chaque navigateur a sa propre liste de doctypes qui Déclenchez le mode excentrique. Voir ce tableau de comparaison du navigateur pour un aperçu de ces listes: http://hsivonen.iki.fi/doctype/ "

J'espère que cela t'aides

4

Si vous dites IE qu'il doit être strict (via doctype), il ne changera pas d'avis à mi-chemin de la page.

3
i_am_jorf

Si je comprends bien le mode bizarreries, une page qui ne valide pas par rapport à son doctype déclaré ne suffit pas pour déclencher le mode bizarreries. Il ne s'affiche tout simplement pas correctement.

La meilleure ressource que j'ai trouvée pour déterminer comment différents navigateurs gèrent chaque doctype est ici .

2
Bill the Lizard

Pour Firefox avec la barre d'outils pour développeurs Web, vous pouvez regarder le trio d'icônes à droite de la barre. Celui de gauche vous indique dans quel mode vous êtes.

2
Arieleo

Dans IE vous le verrez dans les outils de développement (en appuyant sur F12), il le dit dans le menu: Mode Document: ... Et vous pouvez également y forcer un mode différent.

2
Ronen Festinger

dans la page html5, écrivez "<!DOCTYPE html> "commencer par la page peut changer en document.compatMode = 'CSS1Compat'

0
Miro