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.

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 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.

And something like RGBa makes building sites 100% easier. Need a bit of transparency on that div in the top corner? One little bit of CSS and it’s done. So how do we do it? Well, for the most part, if someone wants to use CSS to give a div a background color or set the color of some text, you would use the hex color, ie. #FF0000, for red. But CSS also allows you to set the color using rgb, which gives you more control over your color, rgb(255,0,0) would give you red. And CSS3 adds one little thing to that and let’s us control the alpha of an element: rgba(0,255,0,0.5) would show something with half transparency. That’s it, just adding that one number on the end will let us control that. But what about opacity:0.5;? Well, let’s say you just want the background set to half transparency and the text to display normally. If you set the whole div to opacity:0.5; then everything in the div will be half transparent. But if you set the background:rgba(0,255,00,0.5); then you get a half transparent green background with normal text.

Here’s an example of what you can do. The HTML:

Now the CSS. I’ve added a webkit transition to show what you can do to highlight elements during the :hover state. Here’s the CSS:

I’ve added in the regular RGB color setting so that Internet Explorer has something to display. This is just another one of those things that are great to use but you have to be careful because no version of IE supports it. Hopefully IE9 will and then we can start developing sites for all browsers that don’t require as much hacking as they do now. One thing I’d like to see added in a future version of CSS is something like URLa(background.jpg, 0.5) where we could control the transparency of the background image and use smaller images for patterns.

First, the Firefox way:

Simple, type of gradient, the start position, the start color, end color. Then I put in no-repeat and set the background color for longer pages. The Webkit syntax took a bit of figuring out but the same effect can be created:

Whoa, a lot more is going on here, but once you know what’s happening it’s not that complicated. First we set the gradient type, then the start position where I’ve set it to 50% of the width and 50% of the height of the page. Next the start radius, which I’ve set to 0. Then the end point, which is also 50% 50%. This causes the gradient to travel towards every side of the page. Next, the end radius, which you set to how big you want your gradient to be. And finally, your start and end colors.

Pretty simple once you know what to do, but I think I’m partial to the Firefox syntax and, hopefully soon, there will be a standard way to write this and it will work in Internet Explorer.

Here’s the great thing about it, you can just add a gradient to the background of any element on your site without having to worry about image sizes. The code for gradients it this:

I was messing around with gradients and I wanted to add one to the background of the body of a test page I was build. So I put:

You’d think this would add a gradient to the body background and you could move on to the next thing. I was surprised to find that it did this:

The gradient is only the size of the content! Add more content and it stretches out. This isn’t something that I can see being useful for a website and, amazingly, I couldn’t find anything on the web about people using CSS3 gradients for the body background. Every example I found just showed little squares of blue to red gradients. I messed around for a while and finally had an idea. What if I applied the background to the html tag? Here’s what you get:

Now the gradient stretches to the height of the whole page. Now, if you’re going to do this, you have to add a couple of things on to the end of your CSS3 mark up:

If you don’t add the no-repeat, the gradient will repeat on long pages and if you don’t set the background color, I set it to the bottom color on the gradient, the background color will be white on long pages after the gradient ends.

As usual, this won’t work in any version Internet Explorer that’s out right now and it doesn’t seem to be working in the IE9 preview, so if you’re going to use this, you’ll still have to do it the old way if you want IE users to have the same experience on your website. But that won’t be that big of a deal, if like me, you usually have seperate CSS stylesheets for IE7 and IE8.

Every once in a while, I’d give something else a chance, Opera or Safari. Neither, for different reasons, ever really caught on with me. I would last maybe a week uses them but would always go back to Firefox. Then in 2008, Google released Chrome. At first, my reaction was “Great, another browser.” I really wondered what Google could offer that the other’s weren’t already. I gave it a shot and at first, I wasn’t impressed. It didn’t seem any faster than Firefox and it was bare bones, seriously bare bones. Then I discovered Chrome Experiments. I was impressed but while it was pretty cool what Chrome’s V8 JavaScript engine could do, it wasn’t enough for me to change. But something was happening to Firefox, it took up to 5 minutes to start up sometimes, it would crash and it would take forever to load some web pages. So I gave Chrome another try. And I kept using Chrome until Firefox 3.5 came out, which was supposed to fix most of the bugs that annoyed me.

Now I still use Firefox for when I’m building and testing a web site but I kept using Chrome for just surfing the web. In the long run, it is faster and with sites like Facebook and, of course, Google Docs, it loads faster and crashes a lot less. But that’s not the reason I want the other browsers to be like Chrome, it’s the JavaScript engine. Lately, I’ve started looking to jQuery in order to make some of the sites I build more dynamic. First of all, I know this stuff isn’t going to work that great in Internet Explorer and you just have to accept that. But a navigation I was working on today worked amazingly in Chrome but was jumpy and awkward in Firefox. Yesterday, I read an article at Webdesigner Depot on some annoying CSS3 bugs in Firefox.

So why will everything be better when the other browsers catch up to Chrome? With the web slowly moving towards HTML5 and CSS3 and the use of JavaScript to create dynamic sites, right now, to get the best experience, you have to use Chrome. Firefox just can’t render the JavaScript fast enough in a lot of cases and most of it just doesn’t work in IE7 or IE8. At first, Chrome’s bare bones design wasn’t a positive to me, but now I see that it’s the other browsers that have become bloated and that’s causing them to slow down. I get excited to think what I can make using CSS3 but then I have to slow myself done and ask, “If I make that, will it been seen by enough people to make it worth it?” I know that Firefox will catch up but will Microsoft advance Internet Explorer enough for web designers and developers to really use the tools out there? Or will Chrome just be always ahead, showing us the future?

Why am I so excited? It’s probably the little things, like being able to rotate elements or add gradients with out using images. Anytime you can use code to build an element and not use an image, the file size is going to be smaller and the page is going to load faster. I love building sites with CSS and rarely do I go back to the designer I’m working with and say “I can’t do that.” I enjoy the challenge, but most of the time, when there something that I can’t build, it’s something that I’ll be able to do with CSS3. I’m excited because this is going to open up new design possibilities that we haven’t be able to do yet. HTML5 will change the functionality of the web, but CCS3 will change the face of it.

Today I came across a link to 50 Awesome Animations made with CSS3 and although most of them only work in Safari and Chrome, it’s pretty exciting to see what can be done with CSS3. Some of them need Javascript, which is something I’m not too thrilled about. Why? Because one of the main complaints against Flash is it being a CPU hog and the cause of this a majority of the time is bad coding. And the amount of bad Javascript code out there dwarfs bad ActionScript code, so if CSS3 increases the amount of JS out there, I’m really hoping Microsoft steals V8, Chrome’s JS rendering engine! It’s open-source, but it would be more fun for everyone if MS stole it.

But once again, like my post about HTML5, we are going to have to wait for Microsoft to support CSS3 before we can really use it. Everything I read about CSS3 now tells you to make it look one way for supporting browsers and then another, less attractive way for IE. I don’t mind designs appearing a little different from browser to browser, but I have no interest in a site appearing completely different in one compared to the rest. Hopefully, with IE9 being released at the end of this year, Microsoft will add full CSS3 support and we can take the Internet to the next level, in terms of design.

The bottom line it this, CSS3 is going let us do things the either we weren’t able to do before or we needed something like Flash to create. It’s going to take some time, but over the next couple of years, what we are going to be able to do with a “static” web page is going to be amazing. The future is here, the rest of the Internet just needs to catch up!