Bloggy Hell

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

Hey Myles! Your site’s broken! Au contraire my good friend! Today is CSS naked day - a day to celebrate standards based web. Best practice says that a site should still be usable without all of the eye-candy, so today is the day to put you money where your mouth is (I hope you know where it’s been) and show your site in all of it’s nekkid glory.

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

I have just finished reading the two A List Apart articles (by Aaron Gustafsen and Eric Meyer) on the concept of using browser meta tags to specifically target browsers. Go and read the articles to get the full story, but the basic premise it to devise a meta tag that stipulates which browser version the site is targeted at, eg:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

It’s an interesting concept to say the least, and I’m quite torn - the standards-nazi in me wants to yell from the roof tops how stupid an idea it is. The time-poor developer in me is jumping for joy, because I could target a specific set of browsers and KNOW that is would forever more work in said browsers.

The biggest problem I see is that browser vendors will need to ship multiple layout engines with each release - the number of which grows at a rate of n. So after a couple of releases, imagine how big the binary installs (and source code) would be? Just as an example, Firefox 2.0.x is currently up to point release 12 - that is 12 difference rendering engines since mid-last year.

Couldn’t the browser developers use a decision tree approach to minimise the codebase? No, not really, as this would potentially add bugs into previous versions - that is programming 101. This would break the previous renderer, defeating the purpose of this idea.

I really see this as THE show stopper. Why are the browser makers going to add to their work load? They are stuggling to build to the standards specification as it is. Programming is hard, this just makes it harder.

Having said that, if the browser makes can work a way around this issue, it does fix the problem, which is one that I’ve been piping up about for ages (I thought I’d written a blog post about it, but apparently not). When IE 7 came out, the goal posts moved - sure IE 6 was broken, but at least we had had 5 years of understanding HOW it was broken. Now all of a sudden, this new browser comes out and things change (exactly the issue causing this kafuffle). Firefox releases a new browser every couple of months - sure they are point releases, but there are still rendering bug fixes in there - so the goal posts are just moving they are being flung at a rate of knots.

I’m not saying that the browser developers should go dormant as Microsoft did, but maybe, just maybe being able to lock down a target to work against would make our lives a little more pleasant? I know the open source world has issues with the concept of “stable” code, but this effectively gives us web developers a “stable” baseline to work with - yes there will be bugs, but at least, if we work around the bugs, the hacks won’t break in future versions.

To those that argue this would encourage lazy programmers, maybe, but there are still a lot of people out there that are using tables and spacer gifs to mark up their websites - there will always be slackers, but there will also be those who strive for more. Why should those that are pushing the envelope be punished by a browser upgrade?

Will there still be a problem after February 12?

According to this article, a forced IE 7.0 rollout will occurring about three weeks. So the only people using IE 6.0 will be places that forcibly deny the update (it’s opt-out, not opt-in as it was before). One could argue that such a mechanism, as meta tag switch would have meant that the long suffering IT staff charged with blocking Windows update would have been able to strike that task off their list, as IE 7.0 would drop back to IE 6.0 mode for these users. Therefore, the question should be would this technique ALLEVIATE the problem?

Things the need to happen to make it work:

1. We need to still be able to use standard mode. If we don’t specify a meta tag, it should default to the latest and greatest rendering engine
2. The browser vendors need to work out a good way of serving up multiple version of their engines that don’t conflict with each other - maybe some sort of download on demand thing?
3. If a browser finds a site targeted at a newer version it doesn’t know about, it should try to render it anyway - it is up to the web developers to make sure it degrades nicely (they have to at the moment).
4. The browser vendors still need to care about standards - they still have to play nice, because this fix doesn’t improved CROSS-BROWSER compatibility.

As long as we, as web developers and they, as browser developers still strive for the holy grail, and they can work out how to have multiple rendering engines coincide with out out having to maintain a separate 500Gb harddrive just to contain them, it might not be as bad an idea as everyone initially thinks it is…

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

Was it good for you?

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

“Hey Myles!” I hear you ask, “What’s with the bland website? It was so colourful before”.

Well my fine feathered friends, today is CSS Naked Day an exhibit of what what happens when you correctly separate content from presentation. YOu SHOULD still be able to make sense of what a website is trying to say without relying on CSS to pretty things up. How do I rate?
If it has freaked you out to much, it’ll be back to normal tomorrow.

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

First of all, I know that IE 7 supports transparent PNGs out of the box, but it would seem the uptake isn’t as grand as everyone was hoping - out of readers of Bloggy Hell this month, 23% viewed with IE 6 and 2% viewed with IE 7 and the 88 Miles statistics show something pretty similar, so IE 6 support is still a requirement for most web developers.

Background:

PNGs support 128bit transparency, meaning you can using many levels of opaqueness, avoiding ugly “jaggies” that are so common with GIF images. GIFs only support 1 bit, which means only one colour can be transparent - too bad if you are anti-aliasing the image.

However, Internet Explorer 6 doesn’t support transparency without some IE only hacks. Most versions of the hack presented use inline CSS styles or JavaScript, which I always found as an unacceptable solution. The following works with foreground and background images (mostly), doesn’t use JavaScript, allows you to separate you presentation (CSS), behaviour (JavaScript) and content layers (HTML) and is standards compliant!.

1. Assign a class or id name to all the PNG images you need to convert.

<img src="my_png.png" alt="This image should be transparent" class="my_png" />

2. Create a separate IE only stylesheet.

1
2
3
4
5
6

img.my_png {
    width: 16px;
    height: 16px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png');
    padding-left: 16px;
}

The crazy, non-standard filter command does the magic - it tells IE that the image needs to be made transparent. There are a couple of notes here though, you MUST include a width and height that matches the source image. It doesn’t matter if you include it in the html tag or the CSS - I put it in the CSS because that is where I think it belongs. The padding-left must be the same as the width - this is REALLY important. What this hack does is overlay the “new” png over the top of the old one, without using padding-left to push the old image out of the way, you would see the old image underneath the new image, rendering the effect useless. By moving it over out of view, you will only be able to see the tranparent PNG.

3. Drop in the IE only conditional statement

<!--[if lt IE 7]>

<link href="ie.css" media="screen" rel="Stylesheet" type="text/css"></link>
< ![endif]-->

This is pretty standard - ie.css is the stylesheet we just created.

As I mentioned at the beginning, this technique works for background images too, except for one small issue - if the element with the background image has text in it, the text disappears, because of the padding-left modifier. It is actually a really simple fix, just change the CSS to say the following:

1
2
3
4
5
6

img.my_png {
    width: 16px;
    height: 16px;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png');
}

This will turn off the non-transparent background PNG and replace it with the transparent version. It won’t work with a repeating background image though, but hey, you can’t have it all. If you want to see this method in action, go to 88 Miles - all of the buttons use it.