Introduction
In modern web development, we need to check the browser compatibility for our web pages. This can include changing the css classes, style to fix the 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:
<div style="BORDER-BOTTOM:#7f9db9 1px solid;BORDER-LEFT:#7f9db9 1px solid;OVERFLOW-Y:auto;BORDER-TOP:#7f9db9 1px solid;BORDER-RIGHT:#7f9db9 1px solid;" class="reCodeBlock"><div style="BACKGROUND-COLOR:#fff;"><span><code style="COLOR:#000;"><asp:TextBox ID=</code><code style="COLOR:blue;">"TestTextBox"</code> <code style="COLOR:#000;">runat=</code><code style="COLOR:blue;">"server"</code> <code style="COLOR:#000;">ie:Text=</code><code style="COLOR:blue;">"You are in Internet explorer."</code> </span></div><div style="BACKGROUND-COLOR:#f8f8f8;"><span><code style="COLOR:#000;">mozilla:Text=</code><code style="COLOR:blue;">"You are in Firefox."</code> <code style="COLOR:#000;">Text=</code><code style="COLOR:blue;">"You are in other browser."</code> <code style="COLOR:#000;">ie:CssClass=</code><code style="COLOR:blue;">"IEStyle"</code> </span></div><div style="BACKGROUND-COLOR:#fff;"><span><code style="COLOR:#000;">mozilla:CssClass=</code><code style="COLOR:blue;">"FFStyle"</code> </span></div><div style="BACKGROUND-COLOR:#f8f8f8;"><span><code style="COLOR:#000;">CssClass=</code><code style="COLOR:blue;">"DefaultStyle"</code> <code style="COLOR:#000;">/></code></span></div></div><p> </p>
We can use these setting for all server controls.
And for loading different css files for different browsers you can 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
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.