But what has really helped is not waiting until after the site is built to check it in IE. Just check it after you build a section of the page. The nav looks great in Firefox? Check it in IE before you start on the slideshow. Sidebar works in Chrome? Check it in IE before you start work on the main content. Development became a ton less stressful once I started to do this because now I was making tiny adjustments over the course of the entire build instead of a huge amount of bugs that I have to figure out because nothing is positioned right in IE 7.

Apparently IE 6 still has a few years to go before it’s completely dead but at least we have IE 9 to look forward to, right? And I’ve found that the more I learn and better I get at structuring my HTML, the less problems I have with my sites and any version of IE. I’ve seen some people advising that you should build your site in IE and then it’s easier to fix what’s not working in Firefox or Webkit, but almost every web designer and developer I know wants to spend the least amount of time with IE open as possible, so I don’t think that necessary. Plus, I think life’s a lot easier if you don’t have to have every site look the same down to the pixel in each browser. Very few people are going to visit you site in different browsers and notice any differences. And if they do, they should probably get a life.

I’ve been using Firefox 4 a lot and, yes, it crashes on me more than I’d like, but it’s a beta version. Judging by past performance, I’m pretty sure that the final release version will be stable and won’t crash anymore than any other browser. Chrome’s a great browser and, in my eyes at least, is the only real challenger to Firefox as the browser of choice for developers or Internet “power users”. And, yes, Chrome’s fast, but so is Opera 11 and Firefox 4 beta 8 is too. I think we’re getting to the point where the differences aren’t going to be noticeable to most people.

As much as I like Chrome, and I use it a fair bit, there’s always a little thought nagging me from the back of my mind. This is a browser put out by a corporation that thrives on gathering information. I don’t think that Google would spy on Chrome users, but you never know what a browser is sending back to it’s maker. And with technologies like Google Docs and even the Chrome OS, there’s always the possibility that Google might go the Microsoft way, with applications that only work in their browser. Google’s never given me any reason to think they would do this, at least not to the level that Microsoft has, but the possibility is always there.

My point? Mozilla makes Firefox because they want to make a great browser. That’s it. And they’ve done it, too. Firefox changed the web and forced companies like Microsoft to step up their game and actually put out a good browser. As developers, we know 99% of the time, our website is going to display the way we want in Firefox. And everything that Mozilla puts into Firefox is there because it makes it a better browser. I’m sure that part of the reason Chrome pushed JavaScript engine speed was because of all the JS heavy technology Google produces.

Look, I’m a big Google app user, I love Gmail, Google Docs and Google Reader. I use Chrome a lot for web surfer. But I always go back to Firefox, especially for web development, because I love Firebug. In the end, here’s the only thing that matters, Mozilla seems like an amazing company, they make great stuff and there’s no reason they make things like Firefox and Thunderbird other than making a better alternative to what was out there. I know it’s the “cool” thing now to rip on Mozilla and Firefox, but imagine a web without them.

A few weeks ago, I was messing around, doing a tutorial that used JavaScript and the canvas tag, creating the canvas with createElement(). I was working in the developer version of Chrome and couldn’t get it to work. Of course, I figured there had to be something wrong with my code, so I spent a while going through it, line by line, but I couldn’t find anything. Finally, I decided to check it in Firefox and bang, it worked. I checked it on another computer and it didn’t work then either, so I knew it had to be a bug in the browser. And now, after the latest update, createElement works fine, so whatever was wrong has been figured out.

And then last week, I don’t know why, but on both my home computer and my work one, Chrome would crash on start up. I took a re-install to fix it but I’m pretty sure one of the options I’d turn in the about:flags menu was causing it. Not a big deal in the long run, but it can waste time if you’re using it for development.

The moral of the story? I still use Firefox 3.6 as my main browser for development because it’s stable and, all things considering, it’s still a damn good browser. Plus, I’m a big Firebug fan and while there’s the alpha version for Firefox 4, browser crashes can really get on your nerves when you’re in the zone.

It’s not that I think Safari is a bad browser, I’ve used it on Macs and I’ve liked it. It’s just that I’ve never used any piece of Apple software on a PC and found it to be an enjoyable experience. iTunes is a bloated piece of software that needs to be rebuilt completely and Safari is a resource hog to the point of being almost unusable. I was using Safari the other day just for a change and having 5 tabs open used up nearly 500 mb of memory.

Chrome usage share is about double Safari’s and could become a real threat to both Firefox and Internet Explorer. Safari’s usage has stayed pretty much the same for the last couple of years. Add that to the fact that Apple doesn’t seem to be committed to making Safari on Windows run the best it can and it’s time for them to just give up on developing the PC version anymore.

I would think with one of Apple’s main goals being to get PC users to switch over to their computers, they’d want to use Safari to show people how great their software is, but I can’t see too many being impressed after using it. Plus, Apple’s annoying habit of trying to install software you didn’t ask for when Safari updates isn’t winning people over either.

Webkit has become the favorite of developers over the last couple of months, I think for a couple of reasons. First, the two major browsers using Webkit, Chrome and Safari are pushing forward and both have fast JS engines, Chrome especially. Second, a lot of web designers use a Mac and a fair amount of them use Safari as their main browser, so of course you’re going to use the browser you’re comfortable with when you’re building something.

But here’s the thing, most of the people on web, by a vast majority, don’t use Webkit. I switch back and forth between Firefox and Chrome and I try to get everyone I know to use one of them. But the fact is, no matter how great your thing is in Webkit, if it doesn’t work in even Firefox, then it’s useless. At least until the other browsers catch up. At work, my bosses only care that it works right in IE and then Firefox because those are the browsers the clients use and a majority of clients don’t care that there’s more than one browser out there, which is a unfortunate fact. I check them in Chrome and Safari but I’ve never been asked about it.

So really, if your effect or transition or design only works in Webkit then how many people are going to see it? If it’s just an experiment that you made and it’s really only for other designers and developers to look at, then it doesn’t matter. But if it’s something that you think has real commercial value, then you’ll either have to find a way to make it work another way using something like jQuery or you’ll have to wait for the other browsers to catch up. Personally, I wish the CSS3 3D transforms worked in every browser and not just Webkit.

I’m not saying that we shouldn’t be making things that only work in one browser, especially if we’re just doing it show off what the browser or we can do. I’ve made things that only work in Webkit or worse, only work in Firefox 4 beta. But usually those are just to show what the future is going to hold for us. Webkit is great and hopefully IE catches up soon and I’m sure they eventually will. But don’t be a Webkit snob, it’s almost as bad as being an Apple snob.

I’m not in any way saying IE9 is going to be a bad browser, the small amount of time I’ve spent on it shows me that. But it is in no way pushing the technology ahead, this browser is all about catching up. I will give Microsoft some credit, instead of doing things their normal way, where they push ahead doing what they want and how they want, they seem to have listened to people and, like Mozilla, went with the Chrome style of browser design. This was a great idea and it can’t really be seen as an act of copying, when a car company gets a good idea, you expect all the others to add it to their cars.

But after watching the IE9/Bing demo, I realized something. IE9 isn’t about winning over people like you and me, developers and designers that know the ins and outs of every browser. It was about not losing the average web surfer as the web becomes full of web apps like Gmail. Microsoft couldn’t let it get to the point where IE couldn’t render HTML5 sites like all the other major browsers, especially with HTML5 becoming the new buzzword for clients that have no idea what their talking about.

I’ve seen the question asked, “Why doesn’t Microsoft just switch to Webkit?” Because IE is designed to run with Microsoft technology, why else do you think companies are hanging on to IE6? It’s because custom programs they;ve had made for them will only work right in an IE browser. Hopefully IE9 is the browser that let’s them both run their programs and render the web properly.

In the end, I do think this is a giant leap forward for the web. Eventually, we’ll be able to build a website and not have to check in Internet Explorer, filled with dread. Nothing can ruin your day quicker than seeing an image 300 pixels left of where it’s displaying in every other browser and having no idea why.

I guess Firefox has just been around long enough that it’s not the cutting edge anymore, even if it’s the reason Internet Explorer doesn’t completely control the world. But it’s never sucked and I don’t think it ever will. The people behind it don’t seem to be the people that would allow that. As far as Chrome goes, it’s a good browser that does one thing great, it’s fast. But aren’t we at the point now where the differences are so small that it doesn’t really matter anymore?

Browsers are weird things, in a way. There are people that will swear Opera is the best out there, others love Safari (none of them Windows users). Chrome seems to be getting most of it’s users from Firefox which might be the reason FF’s growth stopped, although IE is still the main one out there. Why? Because most people don’t care what browser they use and probably don’t even know others exist.

So, who thinks Firefox sucks? Probably just “savvy” developers who think that other people really care what browser they use. The same kind of people that rip on what programming language you use or what OS is running on your computer. Once Internet Explorer 9 comes out, I don’t think it’s going to matter what browser people really use, except when it comes to the really cutting edge stuff, like what you can do with SVG and Firefox or some of the CSS3 stuff that’s Webkit only.

I remember years ago, back during the browser wars, which were explained to me by my more nerdier friends, I was told Netscape was better and that’s what I used. Until, of course, a few years later when I was using IE6 because that’s what came on my computer and I was like a vast majority of people at the time and didn’t know there was other browsers or that there was any difference between them. And then, somehow, I discovered Firefox 1.5 and everything changed.

When I started web design in school, the IE7 beta was out and my teachers were excited for it because it was going to be so much better than IE6 but, of course, it wasn’t really that much better. And IE8 came out and was a little bit better, but now we just have to spend more time making sure that a website works in more than one version of IE (I stopped caring about IE6 over 6 months ago with the full support of my boss).

But, if Windows 7 is going to take over for XP next year in the corporate world, we might just be entering a world where Internet Explorer actually displays a website the same as the other major browsers. Think about that. I’m not talking about CSS3 transitions or animations, but just basic positioning. I don’t think I’ve ever made a site that didn’t require me to at least fix some minor issues with IE7.

IE9 won’t be the best browser out there, but it will, guaranteed, be the most used because the most people use Windows and most of them use IE. But at least it’s not going to suck and be a generation behind. We don’t need IE to innovate, we just need it to work, that’s what Webkit and Firefox are for.

Speaking of Firefox, Firefox 4 beta 3 has won me back. For a while now, I’d started using Chrome more and more but with this latest beta, I’ve gone back to FF. It’s just as faster and it’s just as powerful under the hood. Plus, I’m sure every browser will have something like Tab Candy, which is coming with the fourth beta I think.

Here’s my version of what Paul Rouget made without the video.

How does it work? Like most CSS3 animations, it’s easy once you’ve figured it out. First off, the HTML:

The only thing here that’s important to the animation is this line: <div id=”intro” onclick=”document.body.classList.remove(‘intro’)”>. This is what triggers the animation when the right box is clicked. It does this by removing the class “intro” that’s assigned to the body tag and then the elements of the page are animated to their new position on the page. Here’s the CSS:

Most of this is styling, which we don’t need to worry about here. We’ll look at just the #logo div because they all behave the same. If you look at the CSS for #logo, you’ll see its final positioning on the page. But there’s also body.intro #logo. Here, we’re using the transform property to animate the positioning of the #logo div. Using translate, we set the initial position to -200px which will take it off the viewable part of the page. And when the #intro div is clicked and the “intro” class is removed from the body tag, the #logo div is animated to its permanent position using the -moz-transition-duration property. All the different elements come in in a staggered effect using the -moz-transition-delay property.

And that’s it. Something that people will use Flash to get the same effect can now be done using just HTML, CSS and the tiniest amount of JavaScript. Right now this only works in Firefox 4, but it’s designed to display properly in all other browsers, just without the animation or, in some cases, the rounded corners.

Poke around in the demo and look at the Mozilla one, which adds SVG masks to the mix. Getting on board with techniques like this as early as possible is going to be the right move, especially since HTML5 is the latest buzzword clients are bringing up when talking about websites. And I’m a fan of adding in extra things like this for people that use newer browsers, as long as it still displays properly in older ones.

First, for the HTML all you need is this:

If you really wanted to, you could even just use JavaScript to add the div to the page, but this is good enough for what we want to do here. Next, just a little CSS to make the map look nice:

Now for the JavaScript. First we need to like to the Google Maps API:

Now we have to check that geolocation is actually available with the browser the visitor is using:

So far, I’ve only been able to get this to work in Firefox 3.6, it’s supposed to work in Chrome but it hasn’t been working for me. Next we need this line:

What’s happening here? We’re using the built in HTML5 getCurrentPosition function and passing in a function called hasPosition, which we have to create now, above this line.

And you should get this.

Here’s the entire code: