"You unlock this door with the key of imagination. Beyond it is another dimension: a dimension of sound, a dimension of sight, a dimension of mind. You're moving into a land of both shadow and substance, of things and ideas. You've just crossed over into..."

The Cross-Browser Compatibility Zone.

Tonight I want to cover cross-browser compatibility in Liferay, why I think you should develop on Firefox, and a few tricks to help those IE6 headaches.

If you've been lucky enough to not know what cross-browser compatibility is, it's the effect of a consistent visual and operative experience on a web site across multiple browsers. As of writing tonight's blog, these browsers usually include Microsoft Internet Explorer 7 and Mozilla Firefox 3, but may also include Apple Safari 4, the recently released Internet Explorer 8, Google Chrome 2, the older Internet Explorer 6, and very, very rarely, Opera 9. If the browser you're being asked to support didn't make this list, then you may want to double-check the time that you allotted yourself for this project, and the invoice you were planning to write (read: more cash).

In some cases, the work needed to get your site looking decent in that other browser isn't such a big deal, especially when many new browsers share the same rendering engines, thusly working and display things in the same way. In other *cough, corporate, cough* cases, it's a nightmare that you can't ever wake up from, a day terror which feeds on the life between sunrise and sunset; in any case, medication is usually involved.

Your first prescription: Liferay

Liferay boasts two fantastic, out-of-the-box cross-browser compatibility tools; Browser Selectors, and easy-to-use 24-bit PNG support for Internet Explorer 6.

See, in Liferay, Browser Selectors are classnames that allow you to style for specific browsers and even specific versions of a browser in CSS. For example, if I wanted to write customized styles for a portlet in only Internet Explorer browsers, but not other browsers like Firefox, Safari, etc, then I could write .ie .portlet { border: 1px solid black; } and only Internet Explorer browsers would get the 1px black border. In another example, writing .ie6 .portlet{ color: red; } would color the text of portlets red in Internet Explorer 6 specifically, but not IE7 or IE8. The ability to style for a certain browser or a certain browser version gives you a relieving edge in your daily web development, especially when just one browser needs just a little cleanup to match the rest of the flock.

By the way, you can learn more about Browser Selectors by reading Nate Cavanaugh's awesome blog on the subject.

Liferay also includes a script for simulating 24-bit PNG support in Internet Explorer 6, "fixing" the broken alpha-channel transparency via javascript. You can take advantage of this feature with your own images in Liferay by adding the classname png to any 24-bit png image that you are using, or even an element that uses a 24-bit PNG as a background image like <img src="alpha.png" class="png" />

Doctors orders: Develop with Firefox

The best browser to develop your web site on is Firefox, and for three reasons which I'll list for you now.

• 1. Firefox's rendering engine, Gecko, gives you the most encompassing impression of what your site will look like on all browsers. More often than in any other browser, a good looking page in Firefox usually means a good looking page elsewhere.
• 2. Writing well-formed, standards-compliant HTML code will produce the best viewing results the most often in Firefox. Therefore, much like the first reason, if it's written right, and it looks right, then odds are it is right.
• 3. Firefox offers hundreds of developer extensions that can save hours of development time per project, three of which I absolutely recommend and will highlight for you now.
  • 1. Firebug lets you debug, edit, and monitor any of a page's CSS, HTML, DOM, and JavaScript. It also gives you a very handy-dandy JavaScript console for logging errors and sandboxing.
  • 2. Pixel Perfect, which is an extension within Firebug, lets you place graphics (eg: your designer's PNG file) on top of the actual page which is great for a namesaking pixel perfect design.
  • 3. FireShot lets you capture, edit, exports, even annotate screenshots of a web page. This becomes extremely useful when you need to double check your work back in Photoshop

A deeper diagnosis: The grayer foxes, v3.0.13, v2.0.0.20 and elder.

Whoa, am I suggesting that you support multiple versions of Firefox? Well, no, but in the interests of being thorough, I want to cover cross-browser compatibility within multiple versions of a single browser, and I'm going to start with Firefox. While this might seem niche, Firefox can honestly surprise you from time to time. See, each new version of Firefox unfortunately does a better job at making your poorly written, poorly styled HTML look good. Adding that align="center" property to some DIV tags might not look as awful as it should in Firefox 3.5, but it will still reek in Firefox 3.0.12 - this really happened to me in the last few weeks.

I've found that using PortableApps's portable Firefox is the easiest way to manage my older releases without complicating the Add/Remove section of my Control Panel.

To allow multiple versions of Firefox to run on your machine then you'll need to configure just one INI file. Once you've installed portable Firefox version X, navigate into the \FirefoxPortable\Other\Source\ directory and find the FirefoxPortable.ini file, then copy it to the root \FirefoxPortable\ directory alongside the FirefoxPortable.exe application. Now, edit this INI file and change the value of AllowMultipleInstances from false to true. Do this for any versions of Firefox you want to run alongside your latest copy.

Walking with crutches: Internet Explorer

I'm avoiding the IE word, aren't I? Don't I know that supporting Internet Explorer 6 is a huge waste of time?

Why, yes. Yes, I do.

Really, IE6's existence has more to do with insufficiently funded IT departments than any actual user preference. It's old and it needs to go the way of the rickroll. This month IE6 will be 8 years old, that's in a time when Firefox and Safari updates come less than 8 months apart. Do you get me, man? Get off your iPhone and pay attention - IE6 came out before your very first iPod. Newer browsers and even newer versions of Internet Explorer have shown us how beautiful and immerse the web experience can be, but comparing these new browser experiences to IE6 is like comparing the Ford GT to the Ford Model T.

"What do you mean, I can't get those rounded edges and drop shadows in IE6? Why, I just saw it in Safari!"

Yes, the chasm between 2001's Internet Explorer 6 and 2009's Internet Explorer 8 (even 2006's Internet Explorer 7) hasn't stopped a vast corporate clientele from requesting tomorrow's features on yesterday's technology. Some of this work involves adjusting and adding to your CSS to account for the display inadequacies found in IE6, and some of this work gets crazy when IE6 offers numerous display and laying bugs, no true 24-bit png support, and not anything remotely CSS3. In any case, there are a few tools to make your life just a little easier.

IETester with Debugbar is an "all-in-two-in-one" solution for IE testing, because, face it, you're going to need to fix something in IE. IETester is free and gives you a web multi-browser that you can use to test pages against the rendering and javascript engines of IE6, IE7, and IE8 on Windows XP, Windows Vista, and Windows 7. Debugbar boasts a DOM inspector, an HTTP inspector, and a Javascript Inspector with console much like Firebug or IE's developer tools, but it also requires you to buy a license within 60 days for about $85. That's pricey, but fair if the browser you have to support is IE6, and you can forward the cost to the client.

Drew Diller's javascript fix for 24-bit PNG support in IE6 is a miracle when it works, and it usually does. With it, you can use PNGs as the SRC of an image tag or as the background image property in CSS. Unlike the popular AlphaImageLoader, Drew's 24-bit PNG fix supports background-position and background-repeat. Plus he's a nice guy, seriously.

Drew Diller didn't stop there; he also has a javascript fix for rounded corners in IE6 and IE7, but not IE8 (I know, that seems backwards, right? Oh wait, we're talking about Internet Explorer). For reals though, you can get rounded edges, and they usually look really good. How, you ask? Web developers, take note of this answer; it comes in handy.

Magic.

And don't Forget!

"Nothing works faster or stronger on muscle pain and headaches than Motrin® IB. Reach for genuine Motrin® IB at the first sign of discomfort, and get back in the game of..."

Cross-Browser Compatibility.