This ambivalence is what still drives people, like myself, to keep writing about the infamous browser.

The tradeoff

The first premise we have to take into account is best summarized by this little website. There’s only two scenarios in which you can go to great lengths to make your website look (almost) exactly the same on IE6 and the rest:

• You have a very big budget, and a potentially huge IE6 audience. This is the case of websites like Facebook. If you read the Javascript and CSS of their widgets, you’ll know what I mean. The tradeoff here: money invested, poor markup and hacks all around
• Your website is just too simple. Why would you not try to fix a few CSS issues if your website is just too simple? If there’s no complex Javascript going on, and you have a nice little fixed-width website, there’s no reason why your site should look extremely different.

Mistake 1: make your site look like crap on IE6

The Universal Internet Explorer 6 CSS is the first big mistake I want to talk about. The idea here is that instead of wasting time on IE6 hacks, you just use a premade stylesheet, instead of disabling styling altogether. This is what A List Apart would look like if it was implemented.

This approach is flawed for a wide range of reasons:

• The idea behind this universal stylesheet is that disabling style would make your website look broken. However, your sites will look broken.
  • If you use a logo with a dark background, it’ll definitely not fit the white background the stylesheet imposes. The same goes for menus and any other graphical item that might not be ready for a white contrast.
  • If a prior version of your website or brand did work on IE6, and after a redesign you implement this, again, people will think something is really off.
  • There’s no “Universal JavaScript” solution. And as we all know, many of our scripts interact with the CSS present in the page. Disabling styling will also mean either disabling JavaScript or having to fix it for IE6 too, with the sort of hacks the universal stylesheet wanted to avoid in the first place (for example, conditional styling).
• It shouldn’t be black and white, there’s gray. At this time, most IE6 quirks have been perfectly documented. Most have very easy solutions: it’s almost a second-nature for me to add zoom: 1 to clear floats. Of course, making border-radius work on IE6 can be painful, but that’s exactly what you should be doing. Don’t go for all the small details: shadows, rounded corners, transparency. Or do it if the budget and time allows it. The key here is that you can still deliver your brand identity to IE6 without major efforts.

Developers strive to deliver an identity to all possible mediums. If they design custom iPhone versions, why can’t they streamline their stylesheet to make it look fairly good on IE? As an example, my website worked almost perfectly on IE6 with little work. However, when I triggered the rain in my clouds, it just crashed. As a result, I just disabled that particular effect.

Mistake 2: not explaining the user why IE6 is bad

As I was reading the comments on Jeffrey Zeldman’s post, I couldn’t help but be reminded of how condescending developers can be towards their users. The key here is that people will switch if they understand why.

Let’s look at some of the proposed solutions to make users switch.

• IE 6 Blocker overlay. Blocks content, doesn’t explain why the switch is encouraged
• Push up the web. Doesn’t block content, but doesn’t explain why the switch is encouraged and to top it off, it presents itself as sort of a deceiving “operating system important notice”.
• IE6Update takes the cake. Not only does it completely imitate a Microsoft warning in a deceptive way, but chances a very high that the user itself closed a similar message box a long time ago! Remember that Microsoft itself pushed the upgrade to IE7, even through the system automated updates. To top it off, this message doesn’t remotely explain how your website is better in a modern browser, so it’s an “easy close” for your average IE6 visitor.

The correct approach

1. Deliver the content
2. Make your website look OK on IE6, and somewhat similar.
3. Encourage the switch. If you’re looking for a universal solution for this, I would suggest placing a prominent link to PPK upgrade page. He presents the information in a very concise and reasonable way, that everyone can understand. The best idea, however, is to customize the message for your visitors. Explain why your website would be better in another browser. What they’re missing. How easier some tasks would become with better JavaScript widgets or how nicer the navigation could be.

This is an extract from Devthought header.php WordPress template file:

All you have to do is change the routes to match your files. If you’re not using wordpress, you’ll have to remove the get_stylesheet_directory* and get_template_directory* function calls and replace with your paths.

would produce a horrible result in IE, with noticeably lower quality in the resized version.

This is easily fixed in IE7 by applying the following property to the img tag:

img.thumb { -ms-interpolation-mode: bicubic; }

Go to this demo page for a Flickr picture example.

I’ll review the key new features of Safari 4 next.

Better browsing screen real state

They probably got the hint for this idea from Google Chrome. But I doubt Chrome for Mac can come with a half as nifty implementation. Each tab has a handle to regroup them into new windows, and the default behavior of dragging them is moving the window, which is nice.

No more about:blank for new tabs

This feature is called Top Sites.

Again, another feature that Chrome already has, although Firefox was playing with the idea before.

What sets Safari 4 apart is the implementation and style. It’s easy to trigger it whenever you like by clicking and the screenshots display takes up all the window space. The rounded display of the windows also helps you find the one you’re looking for more easily, definitely a nice optical trick.

Even better for us web developers

If you have used Webkit nightly you know what I’m talking about. Safari 4 includes the revamped developer tools that more or less offer what Firebug offers.

The CSS inspector now works exactly like Firebug’s. It displays all the declarations related to a particular element style, crossing out those that are overridden by another declaration. Hovering the element tags in the inspector adds a blue shade to the rendered element, a feature I’ve been long missing. It also seems to differentiate padding or margins in the shade.

The live DOM HTML element editing is much niftier than Firebug’s. It does syntax highlighting, and you just have to double click what you want to edit, and only a particular section will be selected. If you just want to edit an attribute, you can do that. The same applies for the node content.

What is the inspector still missing? A boxed representation of the element with the element, borders, padding and margins width, and a better location for the “Inspect Element” icon, which I use all the time. Highlighting of the element when an attribute or its content is altered, which is a very useful Firebug feature.

The conclusion

The performance has also been enhanced, which you can tell immediately. The Javascript engine is one of fastest out there, and it overall works excellently for a beta.

While it really doesn’t have any truly innovative features, I insist that Safari succeeds at integrating what it was missing with astounding elegance. That applies for the Dev tools, the new tab bar, the tab page placeholder, the history search, and much more.

Maybe Safari can now become both my development and browsing platform.

defaults write com.apple.Safari TargetedClicksCreateTabs -bool true

Via: p@rrish blog

If you’re an OS X user and a web developer, you know how difficult things can get to test your websites or scripts on Windows browsers. Some of the alternatives you might be familiar with are:

• Installing Windows XP and Parallels
• Installing Windows XP and VMWare Fusion
• Installing Darwine and IES4OSX

Each of them has its disadvantages. The first two involve purchasing software (and the OS, if you don’t have it), and the third can turn out to be slow, crash or provide a different browsing experience.

After watching the screencast by Jeff Couturier I finally achieved the cross-browser, cross-platform testing Nirvana. Here’s how

1. Install an IE8 Beta Windows XP VPC with VirtualBox (IE8). Follow the instructions here. Unlike the original article, we only set up one virtual machine for all our testing needs. You can use The Unarchiver in place of 7zip.
   
2. Install MultipleIE (IE3, IE4, IE5, IE5.5 and IE6)
3. For IE7, use IE8 Tools > Compatibility View option
4. Install Safari or Google Chrome (Webkit)
5. Install Firefox (Gecko)

For example, YAHOO.env.ua.gecko might contain a value of 1.7 or 1.8. If the engine is not present at all (i.e: you’re using MSIE), it evaluates to zero. This means that you can simply check like this if you want to detect any version of Gecko (Firefox):

if(YAHOO.env.ua.gecko)) do_something()

or like this if you need to target specific versions:

if(YAHOO.env.ua.gecko > 1.7) do_something()

The engine names are gecko, ie, opera, webkit, air and mobile. More information check the API

To have YAHOO.env make sure you’re including yahoo.js in your page

Thanks to the effort of many developers, documenting and gathering information about them, sometimes even providing workarounds, we’ve somehow managed to deal with them.

IE7, however, was supposed to solve all these bugs, and add those all missing features. Nothing could be farther from the truth. In this article I’ll highlight some of the new built-in annoyances.

PNG issue solved. Or not

Microsoft expert developers claimed in April 26, 2005 that “overall, transparent PNG support is looking quite solid in IE7, based on our tests“. I’ll show you now how solid it really is.

I recently published an article that went through the creation of a menu which used some 32Bit transparent pngs, and if the browser didn’t support them, it’d rely on gifs. As my personal computer is a MacBook PRO, I could only test it with Safari, Firefox, and my brother’s Internet Explorer 6. I trusted IE7 developers, and I assumed that PNG would work fine with that browser. Shortly after making it to the Digg homepage, I found out that my menu wasn’t working on IE7.

Thanks to this miraculous IE7 screenshots service, I could see myself what IE7 was showing to my visitors. (I’ve fixed this temporarily by also serving GIFs to Internet Explorer 7 after people noticing the black background, which explains why you can currently see this problem)

Yes, I can hear you scream. It’s not even the light blue color IE6 would display for a transparent PNGs. It’s black.

On a side note, you might have noted that the menus colors look differently.

A comment in the IEBlog suggested that setting the DPI to a value equal or higher than 120 resulted in this behavior. For the time being, I’ve resolved to switch back to transparent GIFs and curse IE7.

More CSS and rendering bugs

Although they’ve successfully fixed many bugs, it’s still quite evident that their browser is still far from perfect.

This is an interesting list of sites full of IE7 bugs:

• 43 Bugs in Internet Explorer 7
• 73 bugs from Peter Paul Koch’s Quirksmode.
• More bugs

Of course I haven’t verified all those myself, nor am I sure they have been fixed in the last release. But I’m certain that it’s not bug-free at all, not even its CSS support, as evidenced by many sites use of conditional comments to introduce IE7-specific CSS rules. Looking at Digg <head> we find an example of this:

What now?

If we check some browser usage stats, there’s no doubt that IE7 is already an important player. But IE6 still doubles its share, which only means that we not only have to support, struggle and deal with IE6 inefficiencies, but also with those that Microsoft has now introduced with IE7.

Maybe they’re still listening to our complaints, and IE7.5 will address these. I don’t really care about their products, but it’s still affecting the way we work. They’re seriously good at making everything harder everytime they release a new browser version. Yet another reason to encourage everyone switch.