New blog, first posting

Yet another blog about webdevelopment! My main purpose is to store all my tips & tricks for myself, but you never know if someone else might find them useful.

Being a webstandards supporter, I’ve built this site according to the XHTML and CSS standards as defined by the World Wide Web Consortium.

In order to realize the design I’ve applied some very useful techniques that give webdevelopers & webdesigners a little more freedom.

PNG Transparency

The first trick I used is cross-browser PNG transparency. Firefox, Opera and Internet Explorer 7 support this feature, Internet Explorer 6 needs a workaround.

Firefox, Opera and Internet Explorer 7 understand this piece of CSS:

element.class {
	background: transparent url("picture.png") no-repeat left top;
}

The same can be accomplished in Internet Explorer 6 by using a filter:

element.class {
	background: transparent;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader src='picture.png',sizingMethod='scale');
}

This only works in Internet Explorer 5 & 6, so I’ve put these filters in a separate stylesheet. By using conditional comments I can make sure this stylesheet is only loaded by Internet Explorer 6 and previous versions:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Replacing headers with anti-aliased text

Normal HTML headers are ugly beasts because they aren’t anti-aliased. A very good solution for this problem is to replace them with Flash objects. But because search engines like HTML headers you don’t want to rip them out of your page. That’s when Scalable Inman Flash Replacements (sIFR) comes into play. This is a JavaScript solution that replaces ordinary header tags with flash objects at pageload. All you need to do is include some JavaScript and CSS files, embed your font in a flash object and then tell the browser to replace some of these ugly headers:

sIFR.replaceElement("h2", named({sFlashSrc: "mybeautifulfont.swf", sColor: "#70593E", sWmode: "transparent"}));

… coolness!