Remus

IE7 Bug, dynamically loaded css files including @import fails to load imports

Consider the following scenario:

- html page: 
  - head
      <link type="text/css" rel="stylesheet" media="all" href="css/red.css" id="cssLink"/>
  - script
      function changeRed() {		
		var cssFile = document.getElementById('cssLink');
		if( cssFile ) {
			cssFile.href = 'css/red.css';	
		}
      }

      function changeBlue() {		
		var cssFile = document.getElementById('cssLink');
		if( cssFile ) {
			cssFile.href = 'css/blue.css';	
		}
      }
  - body
  	<div id="testZone">
	<div id="red">
		<h1>This should be red</h1>
 		<p>"Cogito ergo sum"</p>		
 	</div>	
 	<div id="blue">
		<h1>This should be blue</h1>
 		<p>"Cogito ergo sum"</p>		
 	</div>
	</div>

And the following css files:

- red.css

@import url(redminor.css);
div#testZone {
	background-color:white;
	margin: 20px;
	border:3px solid red;
	padding:20px;	
}

- redminor.css

div#red { display:block;}
#red h1 { color:red; }
#red p { color: red;}

div#blue { display: none;}

- blue.css

@import url(blueminor.css);
div#testZone {
	background-color:white;
	margin: 20px;
	border:3px solid blue;
	padding:20px;	
}

- blueminor.css

div#blue { display:block;}
#blue h1 { color:blue; }
#blue p { color: blue;}

div#red { display: none;}

At page load the red css is applied by default, which works as expected in all browsers.

When the changeRed() or changeBlue() functions are invoked, the behavior is the expected one in: IE6, FF 1.5-20, Opera 9, but in IE7 only the blue.css or red.css rules get’s applied the ones from the imported css files (blueminor.css or redminor.css) are ignored.

The import works since at page load IE7 applies correctly the rules defined in the imported styles.

Also as a workaround, if I dynamically remove the cssLink element from the DOM, and then I re-create it works correctly in all browsers including IE7.

So if you do this instead things will work as supposed:

function replaceRed() {		
	var cssFile = document.getElementById('cssLink');
	var par = cssFile.parentNode;
	par.removeChild(cssFile);
	cssFile = document.createElement('LINK');
	cssFile.type = 'text/css';
	cssFile.id = 'cssLink';
	cssFile.media = 'all';
	cssFile.rel = 'stylesheet';
	cssFile.href = 'css/red.css';
	par.appendChild(cssFile);
}

function replaceBlue() {		
	var cssFile = document.getElementById('cssLink');
	var par = cssFile.parentNode;
	par.removeChild(cssFile);
	cssFile = document.createElement('LINK');
	cssFile.type = 'text/css';
	cssFile.id = 'cssLink';
	cssFile.media = 'all';
	cssFile.rel = 'stylesheet';
	cssFile.href = 'css/blue.css';
	par.appendChild(cssFile);
}	

Download the test case: http://remus.pereni.org/fisiere/div/iebug/iebug.zip

View the test case: http://remus.pereni.org/fisiere/div/iebug/

May 19th, 2007

Java on Rails or Java on Sails?

Unless you where living under a rock, you have heard about Ruby on Rails, its basically a full web stack for writing real-word applications with joy and less code, how they put it, and most definitely the application that made Ruby a star.The basic idea was to use OO, and the cool new technologies work for you, in a transparent manner, hiding the complexity in convention over configuration, a very simple idea that makes a lot of sense.

Since that idea works quite well, powerful technology combined with simplicity its always a winner receipt, the Python guys did their version of Python on Rails, Turbo Gears. Even if it makes sense, despite the 45 Java based Web related frameworks, today I noticed that we have our own version, first release milestone, of Java on Rails, called Sails. It comes well equipped, with a Blog, a Community and Eclipse plugins.

I like the idea a lot, so its there on the list of things to investigate, right near Shale, and Seam. I think we are developing our own version of Kmania (from KDE) but it starts with S (Struts, Shale, Seam, Sails), hm.

December 2nd, 2005

Doing a Content Inventory

"I've spoken with enterprises in the Fortune 100 who find themselves sitting on top of 6 years' worth of Web content trapped in static HTML files. They know they need to get this stuff into database and redesign their site into a template-driven system. But their first question is inevitably, "So, uh, where do we start?"

June 19th, 2002

Seven tricks that Web users don’t know

"Web developers have all sorts of browsing tricks that they have gained from years of experience, to the point where they can't even imagine not knowing them -- right-clicking to open a new browser window, for instance, or using the arrow keys to navigate a list. To Web veterans, these things are so familiar that they seem obvious. The fact that many people don't know these tricks -- and can get completely stuck as a result -- comes as a shock. This article describes seven Web site features that typical non-technical users aren't familiar with, based on data collected from the author's own usability studies." Carolyn Snyder

This is something you will always have to remind yourself, so, worth reading it.

June 13th, 2002