Underspecified CSS: Bad practice

April 20th, 2007

Underspecified CSS is the name I am giving this sort of code:

h2 span
{
	color: black;
}

I'll show you why this code is the bane of large sites.

Read full entry »

Introducing DynamicStyle.js – modify arbitrary global CSS

September 27th, 2006

While working on a project for school, I discovered that there was no easy way to add, modify, and remove global CSS. There are three well-known ways of dynamically modifying the CSS in a page: 1) Set the style of individual named elements, 2) set the class of the <body> element to invoke CSS predefined for the circumstance, or 3) add or remove links to existing stylesheets. None of these address the issue of adding arbitrary global CSS at an arbitrary time.

After several attempts (including modifying the contents of a text node inside a <style> node), I found a working solution using data: protocol URLs in <link> nodes. Here, for your coding pleasure, is DynamicStyle-0.4.js:

The DynamicStyle library is ridiculously easy to use, since initialization and cleanup are handled automatically. Here are some sample calls to the DynamicStyle library:

DynamicStyle.setStyle('search-hilite', 'span.search-1 { background-color: yellow; }');
DynamicStyle.getStyle('search-hilite');
DynamicStyle.removeStyle('search-hilite');

The code is available under both the Creative Commons Attribution Share-Alike license and the GPL.

Update: Newer versions and change log.

Keep those fullstops out of filepaths

June 24th, 2005

I discovered an interesting bug in Firefox today. While working up a layout for a new design, I created a directory with the design version number in it, "1.5". Upon viewing the page in Firefox, I discovered that the relatively linked stylesheet was not being applied. Amazingly it worked as expected in IE. (Well, except for the box model, and the margin:auto, etc.) I half-heartedly searched google and del.icio.us for similar issues. I reinstalled firefox and disabled some extensions. I did a virus scan (some other programs had been acting up). No dice.

And then I did what I should have done in the first place: I blamed myself, not the program -- and replaced the period with an underscore. Everything works fine now. Except IE, needless to say.