Seventh Octave

We're Starters. We write about culture, design and the business of software.

We believe software should be beautiful and inspired. Follow us as we build @TechOctave.

The Truth about Cross Browser Development and 3 Secrets to better Compatibility TVD Oct 22

2 comments Latest by TVD

People like me make Cross Browser development look easy. We tout cross browser jQuery Dashboard Gauges and easy compatibility testing online, but what we don't tell you is that Cross Browser development is hard! Really hard!

The perfect lie is pretending that it's not. Well, I confess, it's not! So today, I'm gonna give all my secrets away:

Secrets, Waking Up (Album), OneRepublic

Secret #1: Use jQuery

jQuery gives you a lot of power! But, I encourage you to see jQuery for more than just add-ons and plugins. The truth is jQuery abstracts away cross browser JavaScript issues so you can focus on development.

Since the rise of jQuery, many developers either don't remember or are too young to remember the days of JavaScript compatibility hell. There are still many applications in production that were coded specifically to IE6. This happens when you use non-standard objects supplied by IE or any other browser for this matter.

jQuery alleviates this problem by giving you common functionality and then it worries about what function to call for each browser. Pure Awesome! There's a reason I liken Passenger for Nginx to jQuery! Ponies and Rainbows anyone?

Super High-fidelity Batman Utility Belt

Firebug is a Firefox add-on. Get it! Get it right now! It's my #1 tool for debugging AJAX issues. It's also great for examining XHTML injection at run-time and trouble shooting CSS layout issues.

Secret #2: Write CSS and XHTML against Firefox

Firefox is not only the best browser. Firefox is also the closest browser to implement web standards completely and correctly. What this means is if you code your CSS and XHTML to Firefox, you guarantee almost 99% cross browser compatibility.

Use XHTML 1.0 Strict as much as possible, but don't be afraid to use XHTML 1.0 Transitional when the business case calls for it. And don't be too hard on yourself. Eventually, you're going to need a Tweet Button or a Facebook Like Button that is not standards compliant. Let it go!

Then you check and tweak for the other major browsers: Safari, Chrome, Opera and IE. The caveat, however, is most of your tweaks will be against IE. That said, the recent versions of IE have come a long way towards standards compliance.

Super High-fidelity Batman Utility Belt

Firefox.

Secret #3: Test Often and Test Religiously

Don't go too long without running your code through the W3C Markup Validation Service. The trick is the more you validate during markup design and during development, the easier it is to remain standards compliant.

I can't overstate that enough - test often and test religiously! And for Pete's sake, make sure you test in all the major browsers: Firefox, Safari, Chrome, Opera and IE7+.

Super High-fidelity Batman Utility Belt

Firefox Web Developer is another great Firefox add-on. Use Firefox Web Developer to make sure you are always in Standards Compliance Mode. Use the same tool to validate your XHTML markup against the W3C Markup Validation Service. Also use it to keep constant tabs on whether you are in Standards Compliance Mode.

If you enjoyed this post, subscribe for updates (it's free).

Email Address:

2 comments so far

Guybrush 16 Nov 10

Firefox used to be the best browser, 2 years ago. Now Chrome far supersedes FF. Just read the comic to see why... http://www.google.com/googlebooks/chrome/

TVD 25 Dec 10

@Guybrush The comic was entertaining, albeit a bit long. Chrome is faster at rendering. But, to say Chrome "far supersedes" Firefox shows your lack of understanding about Cross Browser development. I practice developing UI/UX before I start coding. Being in the trenches, I test against Firefox, Safari, IE7+, Opera and Chrome. The results are that Chrome still does not render CSS or process JavaScript in a standard and consistent manner. I advocate this process because I ship product. After years in the field, I'm adept at knowing what can work and what won't work. As it stands, Firefox still is the most consistent at rendering standards based CSS and Javascript. As a web developer, it would be nothing short of madness to code against Chrome or any other browser. You'd be setting yourself up for a maintenance and development nightmare. Chrome may be faster at rendering. But when it comes to rendering properly, Firefox remains my most trusted friend.

Comments are closed