Como hacer Server Controls Compatible con navegadores usando ASP.NET

Introducción

En el desarrollo web moderno, tenemos que comprobar la compatibilidad del navegador para nuestras páginas web. Esto puede incluir el cambio de los estilos CSS para los problemas de diseño. Mediante ASP.NET se puede comprobar la compatibilidad del navegador sin necesidad de escribir una sola línea de código para los controles de servidor (server control).

Vamos a ver algunos ejemplos de código:Si vamos a definir las clases CSS como:

.IEStyle{color:Red;}

.FFStyle{color:Blue;}

.DefaultStyle{color:Black;}

Crea un control Label en tu pagina.

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."  

/>

Solo asegúrese de correr las paginas en diferentes navegadores y mira los cambios a continuacion:

Output:

IE  : You are in Internet explorer.

FF : You are in Firefox.

Others : You are in other browser.

Pude probar lo mismo con un control TextBox.

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" />

Podemos usar esta configuración para todos los controles de servidor

Para agregar diferentes archivos css para navegadores diferentes usa lo siguiente:

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

NOTA: No hay intellisense disponible para el ejemplo anterior en Visual Studio