In addition to this Resources section I also have an About section where you can learn more about me and about my site, and a Blogs section where you can find my three blogs.
QuirksMode.org contains free explanation and test pages about JavaScript and CSS. The problem is that there are so many pages. On this page you find a quick overview of all these resources, aimed at helping you find your way in them.
The Resources section of my site contains about 120 technical pages and is divided into two subsections: JavaScript and CSS. There is no overarching logic in these sections; essentially I write pages about subjects that interest me, and if I feel something is boring, I don't write about it. Therefore this site is not complete, nor will it ever be.
The table below contains links to the most important resource pages on this site. I advise new visitors to start with one of these, not only to get a good introduction in the various topics, but also to get used to the style and structure of this site.
JavaScript |
|
| Introduction to JavaScript | This page gives an introduction to JavaScript. It's the best place to start if you're completely new to JavaScript. |
| Book: ppk on JavaScript | To learn more about JavaScript you could also buy and read my book. |
| Object detection | If a browser doesn't support a certain method or property, you have to code around this problem. However, how do you find out whether the browser of your visitors supports the method or property? By detecting whether the object exists. This page explains this important principle. |
| JavaScript Table of Contents | The complete list of all JavaScript pages on this site. |
| W3C DOM Compatibility Tables | The most popular resource on this site. Which browsers support which parts of the W3C DOM specification? |
| W3C DOM introduction | What is the W3C DOM? |
| Introduction to Events | Start here to learn more about JavaScript events and event handling. |
CSS |
|
| CSS Table of Contents | The complete list of all CSS pages on this site. Includes a compatibility table. |
| Quirks Mode and Strict Mode | What are CSS Quirks and Strict Mode? What are the differences in the various browsers? |
Most JavaScript pages contain an example script that creates the effect discussed on the page. If you follow the instructions on the page and copy the code, the script should work. Of course the structure or interaction of your web pages may differ from mine; in that case you'll have to tweak the script a bit.
Note that you're supposed to copy the code that's shown on the rendered page, and not the code you find in the HTML source code. There are usually some subtle differences between the two.
The most important one is that every page that has an example script also has an init()
function that starts up the script. This is part of the overall structure of this site, and it's not
something you can use on your own sites.
Every script has to be initialised when the page has been completely loaded. This is the job of the
onload event handler, and therefore most example scripts contain a function that should be run
onload.
However, in addition to starting up the example scripts, the onload event handler I use on this site has many more jobs, for instance importing the header and preparing the way for the main navigation script.
When it has performed these general tasks it searches for an init() function, and if it finds on it executes it. For that
reason every page that contains an example script also contains an init() function. You usually
don't want to copy this script to your own site, though; instead you'll probably want to write your own
window.onload routine that initialises your script.
In theory every script on this site should work in the modern browsers detailed below. In practice most scripts are slightly buggy in one or more browsers; you can always find detailed compatibility information on the page.
Until about 2003 I was very strict in testing everything I wrote in as many browsers as I could lay hands on; and that included browsers that were already decrepit by that time (Netscape 3, for instance). Therefore, on many pages, archived or active, you'll find outdated browser compatibility notes about, say, Hotjava 3 or Opera 4. I wrote these notes long ago, and even though they're not really important in modern web development, I leave them where they are. After all, it is possible that someone is looking for information about these old browsers.
Later I changed this policy. Nowadays I test my pages only in the modern browsers; ie. those browsers that support most of CSS 1 and the W3C DOM. These browsers are:
If a script or CSS declaration doesn't work in one of these browsers, you'll generally find a compatibility note to that effect. Note that iCab and Konqueror are second-line browsers: I don't always test everything in them.
When a new browser version is released, I don't immediately test it. Instead, I generally wait until I can test a few new versions (say, the new Firefox and the new Opera) before I go through all compatibility tables and test pages on this site. Therefore the compatibility tables may be slightly outdated.
QuirksMode.org is first and foremost a repository of browser incompatibility information in CSS and JavaScript. As such, it is browser agnostic. I do not evangelize for or against any browser; all of them are judged solely on their (lack of) merits.
When I started working as a web developer, the browser market was rather evenly divided between Netscape and Explorer 3 and 4. Any site I created had to work in these four browsers, which shaped my thinking about browser compatibility.
My strictest principle, both in my commercial work and on this site, has remained that I only write about or use CSS or JavaScript techniques that work in at least two browsers. That used to mean that I didn't write about Microsoft extensions in Explorer Windows, and now it increasingly starts to mean I don't write about Mozilla extensions.
This site contains about equal numbers of active and archived pages. The difference is simple: active pages are maintained while archived ones aren't.
If you drop me a line about an error in one of the active pages, I'll eventually react. (It might take quite a while because usually I'm working on several projects at once, and I generally go through my feedback only once or twice a month. Nonetheless, in principle I'll read and react to your mail.)
On the other hand, if you write about archived pages I'll delete your mail because these pages aren't maintained any more.
I started writing JavaScript pages in 1998, and CSS in 2001. One of the consequences of this venerable antiquity is that there are plenty of pages I haven't updated in years. Some of the information on this site is decidedly out of date. Some pages, like the Placing JavaScript one, were originally created in 1998, and in general you'll find few JavaScript pages that have been created after 2004.
The problem is: I just don't have the time to maintain all 200 or so pages on this site. That's why I've instated the strict archiving policy I outlined above. Especially during the 2006 redesign I archived many JavaScript pages that deal with, for instance, Netscape 4-specific code.
In short, the archiving system is installed solely for my convenience: it saves me a lot of work.
How do you find out if a page is archived or active? Go through these rules of thumb: