Here is a very nice visualization of support for the different HTML5 and CSS3 properties among various browsers. The visualization allows you to also look at different years from 2008-2010 which gives a great demonstration about how quickly browser vendors are finally moving to implement these standards.

Recently, since I can’t stand reading articles on websites with bad type and flashing articles everywhere, I’ve taken to actually saving the pages and writing some quick CSS rules to reformat the text in to something readable. As it turns out, there are some other people as crazy as me that took the time to create a bookmarklet to reformat web pages. Readability has been tested on several major websites and really helps out. It doesn’t always work, but works quite well most of the time. You can read more about the bookmarklet on the lab.arc90.com website.

The other day I ran in to a bug in IE 6 that I had never encountered before. I had a left-floated content box with a margin of 105px on the left. Everything worked fine in the good browsers as usual, but when I checked IE 6, I noticed that the margin was off. No real surprise there. Upon further inspection, I noticed that the margin was more than just off, it was exactly double the actual margin.

After doing some research, I discovered that the bug has been well documented as the “Doubled Float-Margin Bug.” Position Is Everything has a good explanation:

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

As it turns out, I didn’t even need to use their recommended fix for the bug. I was able to ax it by just adjusting which elements had the float and margins.

Position Is Everything also contains an entire section IE only bugs. I know this is going to be an invaluable reference for me when I’m trying to track down odd behavior that I’m sure is a bug and need an easy fix.

Apple has just released the 10.4.11 update for Mac OS X Tiger, which has two interesting tidbits. First of all, it lists “Improves compatibility when using OpenType fonts in QuarkExpress.” I would be really interested in knowing more about exactly what has changed here. Unfortunately, given how tight-lipped Apple usually is about these types of things, I doubt I’ll find out.

The second item pertains to Safari 3. Starting with this update, Safari 3 will be the default browser. Now, this is really great, but it introduces some problems with my workflow. If I install this update, how am I going to be able to continue to test my designs in Safari 2.x?

As it turns out, Michel Fortin has gone through the trouble of creating standalone versions of every Safari installment. So go ahead, jump on that update from Apple, then grab a standalone copy of Safari 2.

Khaled Abou Alfa has a nice summary of how the font rendering looks on the different browsers (I believe this is all on Windows):

• Font Rendering

The way that Firefox renders text on Windows is embarrassing. It just looks terrible. Using Alfa’s example, here is what the text looks like in Firefox:

Ouch. It hurts my eyes.