Develop ASP.NET Application with Cross Browser Compatibility

If you are planning to design web application then you need to take care about cross browser compatibility. This is taken care by the many components but some components like asp:menu does not support cross browser compatibility. Here are some tips to do the same.

1.    Simple Coding

      Keep your layout simple at design time. The more complex CSS and markup left the room for wrong thing. If your design has more floating sidebar boxes then you will be in the trouble down the line. Do not use too many nested elements, use the right element for the right task. Use ul and li element to create menu, do not use a table or a series of p element. HTML should be used for contents not for style and place all visual formatting in CSS file.

2.    Code Validation

      We should validate the HTML and CSS file through validators before uploading the site. It’s not guarantee, the valid code will support for all browsers. The invalid code can produce unpredictable problems. Here are some links to validate HTML & CSS file.

   

     HTML Validator:  http://validator.w3.org/

     CSS Validator:    http://jigsaw.w3.org/css-validator/

3.    Avoid using Browser Quirks mode

      Many browsers have feature quirks mode. This allows older website to work with modern browsers. The quirks mode can create problems if we are building a modern standard site. This mode will render a page in its own unique, non standard way. A browser switches to its quirks mode if we do not include the “DOCTYPE” in web page.

    So we should avoid the quirks mode and make sure each page has included the “DOCTYPE”.

4.    Test in Firefox First

     The web developers have a tendency to develop the site in one browser and test in the same and then test in the other browsers. They try to fix the necessary issues if any at the end of the job. That’s a good approach, because it’s an easy way to test in one browser and plan for others.

     It’s recommended to develop and test the site in the Firefox first. If it’s working well in Firefox then it will probably look the same in Safari and Opera because Firefox is a very developer friendly.

5.    Test in as many browsers as possible

      It’s important to test the web site across a wide range of browsers because all modern browsers have their rendering quirks. Here is list of popular browser

     a)    Firefox

     b)    Internet Explorer (6,7,8,9,10)

     c)    Opera

     d)    Netscape

     e)    Safari 

6.    Fix IE Issues by conditional statements

Conditional comments are well known to work around for the IE browsers. We need to make a workaround for IE 6 & 7 as follows.

<!--[if IE 6]>

<script type=”text/javascript”

       Var IE6=true;

</script>

<![endif]-->

<!--[if IE 7]>

<script type=”text/javascript”

       Var IE7=true;

</script>

<![endif]-->

<!--[if !IE 7]>

<p>This message is only displayed in browsers other than IE7.</p>

<![endif]-->

<!--[if lt IE 8]>

<p>Display the message when the page is opening in the browsers earlier than IE8.</p>

<![endif]-->

<!--[if gte IE 7]>

<p> Display the message when the page is opening in the browsers greater than IE7.</p>

<![endif]-->

<!--[if gte IE 9]>

<script type=”text/javascript”

       Var IE9plus=true;

</script>

<![endif]-->

       Conditional Comments Syntax Table

Item	Example	Comment
!	[if !IE]	The NOT operator. This is placed immediately in front of the operator or expression.
lt	[if lt IE 5.5]	The less-than operator “<”. Returns true if the first argument is less than the second argument.
lte	[if lte IE 6]	The less-than or equal operator “<=”. Returns true if the first argument is less than or equal to the second argument.
gt	[if gt IE 5]	The greater-than operator “>”. Returns true if the first argument is greater than the second argument.
gte	[if gte IE 7]	The greater-than or equal operator “>=”. Returns true if the first argument is greater than or equal to the second argument.
( )	[if !(IE 7)]	Expression operators. Used in conjunction with boolean operators to create more complex expressions.
&	[if (gt IE 5)&(lt IE 7)]	The AND operator “&” . Returns true if all expressions evaluate to true
|	[if (IE 6)|(IE 7)]	The OR operator “|”. Returns true if any of the expressions evaluates to true.

7.    Provide The Fallbacks

 Most web browsers support Java Script, Flash and images. It is a good practice to provide the fallbacks, if client’s browser does not support these features like flash navigation menus are unusable on the browsers those does not support flash. We need to user the fallbacks as follows.

JavaScript: Try to avoid using JavaScript for essential functionality. Using it to make things easier or faster. Use the noscript element to provide a non-JS alternative (or display a message asking the visitor to turn on JavaScript).

Flash Movies: Don't use Flash for site navigation, if you do, provide a non-Flash alternative.

Images: Make sure that each img tag contains an alt attribute describing the image.

8.    Code By Hand

      Many developers use the HTML/ CSS editors like Dreamweaver. If you do not have much exposure in HTML & CSS then using editor can save lot of time. But it does not give you the full control over it.

     If you do the coding by hand that way it will give you full control and can easily fine tune the code if necessary.