JavaScript and Cross Browser Compatibility

JavaScript and Cross Browser Compatibility

I promised my readers that i will be writing an article on JS and cross browser compatibility issues. JS is one of the major cause of cross browser compatibility issues. You must be thinking that why in the world there are any issues with JS as now even mobile phones are JS compatible and runs JavaScript smoothly. Well the main problem is not with your JS the main issue is with your firewall and/or your antivirus, as they will block any JS that want to run its services on your local machine. For those who dont know already “JS runs and compiles on client machine” means it is compiled on your local machine not like other server side languages those are compiled on the web server and thus it is the main injection point for Viruses and Worms to enter your computer and affects your normal computer use. I myself am looking for a FF plugin that will when installed on your local machine will inject CSS files through JS in your computer and will let me style my own FaceBook page wow… great idea 🙂 but this means that through JS anything can happen, it can do good to the webpages you visit and can also harm your computer at the same time. Well 90% of the times JS is used for forms validation, like in an email field you might enter your name by mistake and once you click submit it will display that your imput is not valid, if JS is not used the whole procedure gets too troublsome, like it will first send the email to website server where it might be checked for the correct input and once it is rejected will be then sent back to your computer so that you can retype it. So in that case its better to use JS rather than using server side validation. If your website layout is dependent on your JS then that might lead you into trouble, so avoid using JS and try to use CSS which is the cleaner way of applying style to your data.

From my experience Cross browser compatibility issues arise from either of the following properties of CSS if not correctly specified;

  • Float
  • Display
  • margin
  • padding
  • not redefining all the HTML TAGS specifically body, paragraph, lists, horizontal rules and more
  • width, please specify each and every tag width no matter if it needs one or not
  • clear
  • there might be other properties also which effects the browser compatibility of a site but these are the main causes, although i believe that it completely depends on the style your CSS and HTML are defined.

The best way to avoid cross browser compatibility is to define margin, padding, width for each and every tag that you use in your code, so it will be in your control how they will be positioned rather than the defaults, as Internet Explorer might interpret your code differently than FireFox or other browsers and thus on one browser your website might look cool while on others it looks crappy.

For best practices don’t ever use inline CSS as it will make your website heavy, always try to link to your CSS in all your files so that it wont have to load each time when user clicks on a particular page..