CSS cross browsers/platforms best practise

When you are creating a site, you are creating an experience and you want that experience to be consistent regardless time and location at which your users access.

Do it right at the beginning

Before you start flying your fingers on the keyboard to experience the ultimate fun of coding, you need to realize where you are going. Do it smart. Like every other project, there should always be a destination, an end goal, and the code should be written in a way that’s human readable and traceable. You never know when you will have to pick up where it is left. And just like another game, you need to know what and who you are dealing with.

This is what makes up the Internet user demographics. According to Google trend, over 50% of people browses the web on Internet Explore although it has been slowly declining. We are not going to go off topic to talk about why. This is just the reality. Within the 50% IE 7 and IE 8 users make up the majority. Firefox user represents about 25%, Safari, Chrome and Opera make up the rest.

It makes intuitive sense to develop for IE. Unfortunately as soon as your start to code for IE you start digging yourself a grave. IE was developed by Microsoft back in the 80’s. Over the decades during the Age of the MS Empire, there were not so many problems about IE for its user population was too big even the Internet King of Law W3C cannot pressure MS to adapt the HTML standards. Firefox on the other hand is developed by developers around the world with respect to the W3C standard. Even it has only been three and a half generations but it appears to be the next star amount Internet browsers. With everything following the W3C standard, coding for Firefox will not produce unexpected result while that often happens for IE tend to be a more forgiving browser. What it means is that IE makes assumptions and its own decision when syntax errors appear in the code to generate readable outcome. That is nice but that is not the right thing to do while Firefox tends to be more strict and that’s the way coding should be. Coding is a beautiful art of science, like traditional C and Basic language, there is no A-. You either get an A or a B. In addition, with a lot of codes are populated by coding IDE nowadays and how much compiler has improved to facilitate debugging. It is much easier to code strictly and properly.

It is easy to foresee the benefit of coding with standard, but as IE and Firefox are battling for market share neck in neck, as developers we have to make sure the work can be presented across platform.

Anther reason to begin with Firefox is that most browsers support a conditional statement to load CSS style sheet for IE and non-IE browsers. Further more you can specify CSS style sheet for different version of IEs. Apparently the IE family is isolated from the rest of the world.

Though out my experience, if the website looks okay in Firefox, it looks consistent in Safari and Chrome in most cases. If you use ‘floating’ in your CSS you may want to watch out in Chrome. On personal computers most Firefox, Safari and Chrome automatic update themselves to the latest version so if your target audiences are the general public you do not usually have to worry about consistency across versions in those browsers.

One big mistake I used to make is to go full speed with Firefox till the site is done, and then turn my head to IE when the site is done. That is ok if you are site is not too large and you know every single line of your code. A better approach is to go bit by bit. Always start with Firefox, once you are happy with the result, switch to IE (if you happen to target end users who run IE on their machines). Between IE 8 and Firefox there won’t be many surprises, but do have to pay attention to IE 7 and IE 6.

Another right thing to do is to know the different between IE and Firefox on rendering CSS. Rather than trying to play with the code and hope that it works the next you’re your press the REFRESH button which not any better than throwing one stone to the water in a time to learn the depth of the ocean. Spend time to find out what causes the differences. You save a lot of time for you next project.

Many of us use UI frameworks and libraries such as JQuery theme roller and Yahoo! UI. They are nice because they give developer a lot of power to implement functional yet flexible UI in a short time. The code has been well tested and works across platform and browsers. If you have not tried another of the frameworks and you are looking for one that is easy to learn yet with a lot of potential, I recommend JQuery UI. It works nicely with JQuery which is an extremely powerful Web 2.0 framework. For more details visit the JQuery UI website.

Disaster rescue

If you have gone too far to start over again to make it right form the beginning or you just take over a project from another developer that graduation from university for dinosaurs who just happened to take the job after reading Web Development for Dummies. The website looks prefect on IE but upside down and all font types become Arabic in Firefox. You need to sit back and come up a rescue plan.

There are idiots out there don’t know how to code in decent style but are so good at asking the clients for money and left the poor performance website half hanging. Remember, not matter how bad a coders is, nobody can cheat the browser, because 1 can never be 0 in the world of computer science. What you can do is,

1. Know the problem. Listen to your client and ask if anything is uncertain. You are already in a grave, don’t dig deeper.
2. Find out what the proper result should look like. If you don’t have the visual imagination, draw it out.
3. Think of how you will code to produce the wanted result in both HTML and CSS. Draw a DOM map. A DOM map is a diagram that shows how HTML elements in a document are organized. And then take the naming convention including the DOM id, class from the original document and mark corresponding elements on the new DOM map.
4. Reorganize the DOM if necessary, but before you do that, run a quick search on the Javascript to see if the keyword “parent” is used. If so, the change on the DOM may affect the Javascript. Some Javascript frameworks have additional selectors, for example, jQuery allow selection of odd and even rows from a list. Keep track of the changes to the DOM and apply proper adjustment to the Javascript. If the site behaves unexpectedly, roll back. Change the Javascript as you change the DOM.
5. Hook the CSS back to the DOM. Make changes to the styles.

The bottom line of this approach is to do one aspect in a time. If the DOM is properly organized, outcome is not going to be too far away from the desired result. Keep all the ids and classes because they are very likely being used as identifiers by the Javascript. Until HTML5 and CSS 3 become the new standards, enjoy coding.