Share via

How to Make Server Controls Browser Compatible Using ASP.NET

  • Article

Introduction

In modern web development, it is necessary to handle web pages slightly differently depending on the client browser in order to obtain a consistent result. This can include changing the css styles for design issues. Using ASP.NET we can check the browser compatibility without writing a single line of code for the server controls.

Let's check out some code samples:
If we will define css classes like:
.IEStyle{color:Red;}
.FFStyle{color:Blue;}
.DefaultStyle{color:Black;}

Create a Label control in your page.
Label control:

<asp:Label ID="lblTest" runat="server" ie:CssClass="IEStyle"  
mozilla:CssClass="FFStyle" CssClass="DefaultStyle" ie:Text="You are in Internet   
explorer." mozilla:Text="You are in  Firefox." Text="You are in  other browser."   
/>

Just make page run in the different browser and see the changes as below:

Output:
IE  : You are in Internet explorer.
FF : You are in Firefox.
Others : You are in other browser.
 

You can try the same with the TextBox control.
TextBox Control:

<asp:TextBox ID="TestTextBox" runat="server" ie:Text="You are in Internet explorer."  mozilla:Text="You are in Firefox." Text="You are in other browser." ie:CssClass="IEStyle"  mozilla:CssClass="FFStyle" CssClass="DefaultStyle" /> 

We can use these setting for all server controls.

For adding different css files for different browsers use the following:

<link runat="server" href="~/Styles/Site.css" mozilla:href="~/MOZStyleSheet.css" ie:href="~/IEStyleSheet.css" rel="stylesheet" type="text/css" />

NOTE: There is no Intellisense available for above in Visual Studio.

See Also