Article

CodeCamp Iasi 2013

After a very successful 2012 session about JavaScript (“JavaScript, from dark ages to renaissance, the web apps revolution”) this year I wanted to continue where I stopped with Angular.JS and single page application design. There was already a presentation about single page application design with some other framework so this year I will approach the other end of the story “Designing RESTfull WebServices and Web APIs”

Codecamp Iasi presentation

Codecamp Iasi presentation

Especially for single page applications but also for web and mobile web applications REST based web services are indispensable and all do the flexibility of REST based web services is high so is the number of architecturally wrong decision one can make when designing such an API. In a sense it feels a lot like JavaScript in the fact that everybody has the feeling that it knows the domain or does not have to dig deep into it just because it sounds very simple.

In this years session I will try to go over the most important rules and best practices when designing such services. Hopefully It will be a session just as interesting as the last one.

If interested see you in Iasi on 20th of April, New York room from 10:00 – 10:45.

Article

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/

  • Comments Off on IE7 Bug, dynamically loaded css files including @import fails to load imports
  • Filed under: Uncategorized, Web