VS2010 Changing style sheet based on the browser

Question

In Visual Studio 2010, is there a way of changing the Cascading Style sheet on the server-side based on the client browser? I want to create different style sheets for the different browsers (Firefox, Chrome, IE, Opera, Safari etc..) and specify which one to use from the master page.

Answer 1

Unsure if I follow fully but you can specify these in the App_browsers folder of your project.

Answer 2

Here's a good article on detecting browser type in asp.net:

http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx

Once you detect the browser type using for example, a switch statement on HttpContext.Current.Request.Browser.Type, you can easily insert a css reference into the page, with code such as:

HtmlLink cssLink = new HtmlLink();
cssLink.Attributes["type"] = "text/css";
cssLink.Attributes["rel"] = "stylesheet";

switch(HttpContext.Current.Request.Browser.Type)
{
    Case "Firefox":
        //use a certain path depending on browser type
        cssLink.Attributes["href"] = "firefox.css"; 
        break;
    Case "Internet Explorer"
        cssLink.Attributes["href"] = "IE.css";
        break;

    //and so on

}

Page.Header.Controls.Add(cssLink);

I don't know what the actual string values of Browser.Type will be for each browser. You'd have to test.

Even with the above, I'd still recommend using a single stylesheet for all browsers. With a little effort you can make a page render almost identically across all major browsers.

First I'd recommend starting with a reset CSS file such as the YUI 2 Reset or YUI 3 Reset. From there most styles will apply well and consistently across browsers. With all default styles reset you can build out your styles with complete control.