Luke Smith

First of all, thank you very much for the comprehensive article
http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets

I've recently gone down this road and discovered the following things that
may be useful to include in your findings.  All are regarding Safari 3.0.4
(523.12.2) on Mac OS X 10.4.  As expected, I was unable to get Safari 2 to
be even the slightest bit compliant.

Safari 3 dynamic style notes:

* appending/inserting a dynamically created style element into the body will
not update the page styles.
* style elements added to the body do have .sheet and the corresponding API
(insertRule, etc), but inserting rules causes no change.
* style elements added to the body do increase the length of
document.styleSheets
* style elements added to the head affect the page styles and can be
modified with expected results

Style elements added to the body cause the expected style change (as do
future rule addition/modification) in FireFox2 and Opera 9.  I believe they
also do for IE6/7, but I can't recall accurately.

I did only a brief test in Safari 3 for Windows using the code that worked
for FF2, Opera, and IE6/7.  It failed, but I did not research why or attempt
to find a solution.

[Ed. It works in Safari 3.0.4 on windows]

Here's the final code that satisfied FF2, Opera 9, IE6, and IE7 for
reference:
   var rule;
   var incompatible = false;

   var setWidth = function (w) {
       if (!rule && !incompatible) {
           var s = document.createElement('style');
           s.type = 'text/css';
           document.getElementsByTagName('head').item(0).appendChild(s);
           if (s.styleSheet && s.styleSheet.addRule) {
               s.styleSheet.addRule(".box","width:auto");
               rule = s.styleSheet.rules[s.styleSheet.rules.length-1];
           } else if (s.sheet && s.sheet.insertRule) {
               s.sheet.insertRule(".box {}",0);
               rule = s.sheet.cssRules[s.sheet.cssRules.length-1];
           } else {
               incompatible = true;
           }
       }

       if (rule) {
           rule.style.width = w+"px";
       }
   };

   document.getElementById('doit').onclick = function () {
       setWidth(100);
   };

   document.getElementById('doit2').onclick = function () {
       setWidth(200);
   };

Affecting a div.box with some default styles set by another stylesheet.

FYI,
Luke Smith