Update: For a select few

IE6 is being phased out with a mandatory push from Microsoft, requiring all computers to upgrade to IE7.

The article from Microsoft mentions several ways you can disable the WGA-free update, so the war might not be over. But in my opinion, this is a major step forward.

While it pains me to do so, the following warning is needed:

This entry best viewed in Firefox 3

Since Mozilla released the Firefox 3 Beta (Code Name: Minefield) there have been a rash of blog posts regarding the many new features, increased security, and enhanced UI. However, one thing I have yet to see is what I am really need to know: how does this affect web developers?

When I heard that Safari was releasing a PC version of their browser, I was overjoyed... Now I don't need to boot up my Mac to test sites in Safari, right? Well, as we all know, the answer to that very naive assumption is a resounding "Not even close" - We now have just one more browser we need to test in. (Note: Safari did clean up its act a bit since release, but it's still not exactly the same as its Mac counterpart, and thus is simply more work.)

I had my apprehensions when I heard Firefox was jumping up a full version... I was determined to not make the same foolish mistake twice... So I did my research.

Good news? It passes the Acid2 test!

From left to right: Firefox 2, Firefox 3, Internet Explorer 7. Click for larger image.

Looks like we aren't going to have to test in both Firefox 2 and 3*.

* That is, unless you are using the newly-proprietary/implemented enhancements, such as getElementsByClassName ALSO While it is fantastic that the newest Firefox fixes CSS issues, it's not retroactive, so visitors still using FF2 will still have the same problems as before. I recommend waiting until usage is below 5% to completely phase it out.

So, here are what I consider to be the most important things for us Web Designer/Developers to be aware of.

1) Full-Page Zoom

This new scaling scales everything on the page (a la Opera and IE7), not just text. I wouldn't say this means that we can stop using em's for text sizing, but it's good to see that accessibility is beginning to become more supported by the software we use, so it isn't dependant on the designer.

Left: Firefox 2 Zoom, Right: Firefox 3 Zoom. Click for larger image.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=4821

2) Animated PNG (APNG) Support

While I don't look forward to seeing alpha-transparent rotating "Email Me" graphics all over the place like it's 1998 again, I am very pleased to see APNG finally getting implemented. While it wont become a standard for quite a while, it's a step in the right direction. One thing to note is that if your browser does not support APNG (but does support PNG) it will simply render the first frame of the PNG.

Left: Animated GIF, Right: Animated PNG
Use the links below to change background color (JavaScript Required)
Green | Pink | Red | Blue | Black | Orange | White
Image Credits go to http://www.gamani.com/apng.htm

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=257197

3) Support for arbitrary protocols

This will allow you to map protocols such as mailto:nobody@nowhere.com (Which will use Gmail) or validate:http://www.phazm.com/ (Which will use the W3C validation service) to a proprietary handler, which will allow you to select it instead of only using the default.

UI for notification/accepting Protocol Handlers. Click for larger image.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=372441

4) getElementsByClassName

This has been available for some time using some frameworks, but now it's in the DOM! Now we will be able to loop through all elements with a specific class on our document. The original specification is in the HTML 5 working draft. (link: http://www.whatwg.org/specs/web-apps/current-work/#getelementsbyclassname).

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=357450

5) Support for offline web apps

The support has been added to allow web applications to be run offline. Unfortunately, it will require the apps to accommodate this new system, and thus far, there has been no word from Google saying they intend to code Gmail or any of their other apps to be used offline, but I'm sure it will come in time.

Demo: http://starkravingfinkle.org/blog/2007/02/firefox-3-offline-app-demo/
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=367447

Other useful additions:

Now properly supported:

• display: inline-table
• display: inline-block

Added support for:

• onCut
• onCopy
• onPaste
• onBeforeCut
• onBeforeCopy
• onBeforePaste

demo: https://bugzilla.mozilla.org/attachment.cgi?id=272228
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=280959

contentEditable

contentEditable allows you to do inline editing of text.

demo: https://bugzilla.mozilla.org/attachment.cgi?id=157048
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=237964

Resizable=noyes

With Firefox 3 , the window.open property "resizable=no" is ignored, so all pop up windows will now be resizable.

Click here to open a window with resizable=no
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=177838

Long Tool tips

Now, instead of having one huge line for a tool tip, they will wrap over several lines.

To test, hover over this
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=218223

Printing & Absolute Position

Containers that span multiple pages and are absolutely positioned will now correctly wrap to the next page instead of just being cut off.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=154892

A few notes:

By default, you will not be able to run any extensions that haven't been updated to be used with Firefox 3 . However, if you go into about:config, right click, then go to 'New' => 'Boolean' - Enter, "extensions.checkCompatibility" and hit 'OK' then click "false" and restart, you will be able to use the extensions that don't break.
WARNING: Some extensions will actually crash Firefox 3, so if that happens, start up in safe mode with all extensions disabled, then either uninstall the extension(s) that are breaking it, or go set checkCompatibility to "true."

This is somewhat unrelated, but I don't want to make a new blog entry for it, and it is pretty useful: You can use RAMBack in Firefox 3 to free up a bunch of memory that it uses.

Thanks for listening

If you found this helpful or informative, I would really appreciate it if you left a comment... it gets so lonely at nights!

A digg wouldn't hurt either...

The fact is, IE6 is not that hard to code for, as long as you have a good understanding of Semantic XHTML, you shouldn't have much of a problem. In this post, I'm going to outline some of the steps you can take to reduce the time it takes to develop your pages for Internet Explorer 6.

The Stats

According to TheCounter.com, IE6 is at 50%, the next largest being IE7 at 24% and following that is FF, at 13%.

Bar graph showing top 3 browsers. -- Image courtesy of TheCounter.com

Of course, these results will differ from your own website, which is a much better reference. For instance, according to Phazm.com's statistics, IE7 is (very) slightly more used than IE6 -- 24.7% to 24.5%.

Either way you look at it, Internet Explorer 6 still constitutes a very large portion of visits. I don't know why anyone would suggest abandoning 25-50% of their traffic, but if you ask me, it's not a good decision. Read below for some tips on speeding up the entire process.

Reset Your CSS

There are two main differing behaviors in browsers: Their default rendering of HTML elements, and how they handle CSS. To start with, I recommend you always (or whenever possible) use a CSS Reset. Resetting the CSS takes away one of the differing behaviors between multiple browsers. For example, IE6 and Firefox both give <p> tags a default margin, however, that margin is slightly different between both browsers. When you eliminate that behavior, and set everything to have no default(browser) styling, you make your job a whole lot easier. Eric Meyer has created a fantastic CSS Reset which you can find here.

There are several ways you can use this CSS. I prefer to import it within my main/global CSS File.

@import url("reset.css");

Simply put this at the top of the CSS file that is linked on every page on your site, and it will set nearly everything back to have no styling whatsoever. Obviously, there are downsides to doing this. The first is that you really need to start from a clean slate, because any elements that depend on the default margin of a header tag are going to break. The other downside is having to re-declare styles, such as making a list have bullets, making text within italic, and so on.

Conditional Comments

Using conditional comments, most (if not all) CSS hacks can be avoided. Because we only have to worry about the rendering of the CSS, and not the default styling (due to using the CSS Reset) this can actually go quite fast.

Now, some say that you shouldn't use a conditional comment, due to it being proprietary Microsoft code, but I disagree. Not only does your page still validate, other browsers simply ignore the code - I have never had an instance where a properly formatted conditional comment went awry in any browser.

Here is the syntax for creating a conditional comment:

<!--[if (condition) IE (version)]>
Code to run
<![endif]-->

Possible conditions/operators:

• lt = Less Than
• lte =Less Than or Equal To
• gt = greater than
• gte = Greater Than or Equal To
• ! = Not

Using the above operators, if you want to have a stylesheet for all Internet Explorers below IE7, you would put the following in your code within the tags:

<!--[if lt IE 7]>
<link rel="stylesheet" href="LegacyBrowser.css" type="text/CSS" />
<![endif]-->

This will call a separate CSS file, called LegacyBrowser.css, which will only affect IE versions below IE7.

Styling the Page

Now, get your page working in Firefox. Once you have done that (completely) you open up your page in IE6, and start creating over-ride classes as necessary. If .imagedisplay is 3 pixels too far to the left, simply add in your LegacyBrowser.css:

.imagedisplay { margin-right : -3px; }

or something similar, to get the desired effect.

Note that if you have already specified margin-right, you may need to add !important to the mix, like so:

.imagedisplay { margin-right : -3px !important; }

This is a very loose example, and in most cases you will simply replace a margin/padding with a slightly increased or decreased value, and use !important.

In this way, you can avoid using CSS Hacks that could possibly break in future browsers, and you give yourself more control over how your page displays in Internet Explorer.

Feedback

I would love your comments regarding this topic. Do you agree that IE6 is still prevalent enough to be worth the additional coding time, or do you think it is a waste of time to cater to a dying browser? Let me know!