Interaction design • webdevelopment • web art • photography

January 2004

integrating javascript into stylesheets

Ben Nolan's non-link element hovering trick for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself:

body {
  background: url("
      document.body.onload = function(){
        ...custom js here...
By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [via webgraphics]

Ruben wrote on 2004/01/07:
It is really interesting indead. I already read the discussion thread in the forum of, see:

The interesting part is that it is somehow specified in the W3 specs of CSS2, see:

Richard Soderberg wrote on 2004/01/13:
The spec also specifies that "Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)".

It seems IE is ignoring this directive, which I think is right.

Richard+Soderberg wrote on 2004/01/13:
IE is right, that is. Not the directive. I think the directive is shor-sighted and limiting -- but in the face of embedding active content in CSS, well, maybe I can see their point of view.

bob wrote on 2006/05/27:

A to Z of World wrote on 2007/01/15:
I did try it and indeed is handy. But as expected I'm not finding a situation to put it in real time usage as I rarely need something which works only with IE :)

Derek wrote on 2008/01/18:
i cant seem to make it work for the way i thought of. I was trying to embed onmouseover and onmouseout functions to work. Anyone is willing to give me insight?Just send me an email, thank you