Device Filters
You would obviously have come across the “Browser
Compatibility” issues many times while designing a webpage. For example,
assigning a CSS class to any control may render well with IE but it may not get
rendered that perfect way in Mozilla; and if you fix for Mozilla then IE rendering
may get affected. But, we not only need to manage in between IE and Mozilla,
but we also need to think about other browsers as well like Opera, Safari and
Netscape etc, etc.
Here is one trick how you can you apply “Browser Specific”
CSS to a control. That is, while assigning CssClass or Class to any control you
can just prefix the browser name followed by colon to specify the Browser
Specific CSS Class.
For Example, look at the below snippet,
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
<style type="text/css">
.IELabelCss
{
color:Red;
}
.MozillaLabelCss
{
color:Green;
}
.SafariLabelCss
{
color:Black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="Label1"
Text="This is a test"
IE:CssClass="IELabelCss"
Mozilla:CssClass="MozillaLabelCss"
Safari:CssClass="SafariLabelCss">
</asp:Label>
</div>
</form>
</body>
</html>
In above example, I have specified different
Browser Specific CssClass to have different text colors to render in IE,
Mozilla and Safari for a label control. In the same way, you can define Browser
specific CssClass by prefixing the Browser name followed by colon before the
CssClass/Class Property. This would be more helpful while we are having trouble
in setting margin/padding specially while using DIVs against different
browsers.
You can also specify different Browser specific
property values also. For Example,
<asp:Label runat="server" ID="Label2"
IE:Text="IE will render this Text"
Mozilla:Text="Mozilla will render this Text"
</asp:Label>
In above example, different text properties are
defined for IE and Mozilla.
Hope, the trick would help to others who are
looking for “Cross Browser Compatibility”.