Quirks or Strict: a Quick Way to Tell


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.)

, , , , , ,

3 responses to “Quirks or Strict: a Quick Way to Tell”

  1. Hi! Addition for Firefox users: in the last versions of the Webdeveloper Toolbar, Chris Pederick has added a new “Standards Compliant / Quirks Mode” icon, on the right side just besides the error console button. That’s quick and easy too: if you see the red cross, you know something is quirking. 😉