Cross Browser Issues

As you look back into the nineties and compare that with the present day world, what do you think has been the major change/difference? Some of you might say that smartphones or laptops has been the change. But I hope that most of you would agree that Internet has changed our lives dramatically.

We can send emails, surf the net and buy whatever we want. In fact if you really see a smartphone without Internet/Data would just be a phone and not a “Smartphone”. Since most of the apps which make it “smart” need Internet in order to make the Applications work. You might still be able to use the app  and view the content because of Asynchronous Programming which I discussed in the previous post.  But unfortunately, if you need to receive new  content you really need Internet and it won’t come from thin air!

Nineties was the time when Internet first started coming into existence. And it took off from there on. Initially we had only the Internet Explorer for Windows and NetScape for other operating systems. But as time passed, the number of browsers in the market started increasing manifold. And now we have a multitude of options to choose from. To name a few-Mozilla FireFox, Opera, Google Chrome, Internet Explorer,Microsoft Edge, Safari. We are now not limited to the default browsers provided by the Operating System.  We have the freedom to choose what we want. That’s good right?? But, it is not a good thing for developers. They have to now test their website or web app across browsers and see whether they are rendering similar web pages. Earlier they would  have tested for two or three but now they have to test three times this number!

Now developers face situations where some feature may show up correctly on one browser, but may behave the opposite when tested on another browser. This has elevated a new problem called “Cross Browser Compatibility”. The task for a developer is to make his/her web page render similarly across all browsers.

Some of the reasons this incompatibility occurs is due to-

  1. Forgetting to mention <!DOCTYPE html> declaration on the beginning of the HTML document. Some browsers might automatically add that line of code, and some might not. Hence the difference. It’s always a good practice to add that line at the beginning of the document. This declaration denotes that we are confirming to HTML5 Specifications.
  2.  Not having CSS Reset Code. It resets the value of border, margin and padding to zero. Different browsers have default values for border, margin and padding unless specified otherwise. Mentioning the CSS Reset Code forces the browser to reset these values to zero.

      {

border:0;

padding:0;

margin:0;

}

3. For Certain CSS Properties, some browsers have a “prefixed” version of it. And in case it is not mentioned, that property will not render properly in the browser. For Example,

-moz : Mozilla Firefox

-ms: Microsoft

-o:Opera

-webkit: Safari and Chrome

These have to be prefixed against some properties in order to run correctly.

4. Not closing tags in HTML. HTML is a scripting language where everything is written between a start tag and an end tag

For Example

<body>

<h1>Hello</h1>

</body>

Inside the body tag we have an h1 tag which would display the Heading Hello. Sometimes developers forget to close the tag. Some Browsers may be forgiving and would automatically close tags for them. But, unfortunately most of them do not. And it is always a good practice to close the tags once you have started it.

So, That were some of the Incompatibility Issues which could be addressed if a good programming practice is followed. For Viewers Interested in this topic and would like to dive deeper, these links might help you:

https://en.wikipedia.org/wiki/List_of_web_browsers

http://www.thetoptens.com/best-web-browsers/

http://www.wisegeek.com/what-is-browser-compatibility.htm#didyouknowout

https://www.browseemall.com/Blog/index.php/2014/04/24/5-most-common-browser-compatibility-issues/

http://1stwebdesigner.com/cross-browser-compatibility/

 

Happy Reading!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s