Quirks or Strict: a Quick Way to Tell

nickfitz — Sun, 04 Jun 2006 18:17:12 +0000

If you’re working with (X)HTML and CSS you’ll be aware – or you need to be aware – that browsers render pages differently depending on whether they are in Strict or Quirks mode. (There are explanations of what these terms mean from Microsoft and Mozilla.) It can be useful to have a way of making certain which mode you’re in when tracking down inconsistencies in browser behaviour.

A quick and easy way to tell is to type the following snippet of JavaScript into the location bar:

javascript:alert(document.compatMode);

which will pop up a box stating either “BackCompat” for Quirks mode, or “CSS1Compat” for Strict mode.

If you’re using Firefox and have the Bookmarks toolbar visible, you can drag the following link on to it to create a handy little button you can use to check which rendering mode the browser is in on any page you visit. In Internet Explorer, right-click on the link and select “Add to Favorites…” to achieve the same thing. (You’ll get a warning that the link “may not be safe”; at that point you have to decide how much you trust me. Believe me, it’s safe.)
Rendering mode

I find this tremendously useful for doing checks on pages, particularly when editing pages by hand, where a simple typo might throw a page into Quirks mode, with resultant frustration as CSS which previously worked suddenly goes completely to pot.

(Note that the “CSS1Compat” actually means “CSS2Compat” in browsers with support for CSS 2.1.)

Just a Coder » JavaScript

Quirks or Strict: a Quick Way to Tell