Loading CSS Stylesheets Dynamically (Browser Evalution)

Cascading Stylesheets is an amazing tool in the arsenal of any web developer, designer or anyone who wants a simple way of stylizing and customizing their web site or a web page without tedious and inefficient table approach. Unfortunately the way that page renders depends on the way the browser interprets css styles. IE (internet explorer) and Firefox (Mozilla Firefox) for instance render information differently.

Myself, being a web programmer/developer I ran into the difficulty of making my css look consistent across browsers mostly because of the different

Tag rendering. So I finally reached the conclusion that it doesn't take much memory to load different css when the page first loads ,and the trip to a server wouldn't be that much expensive. So without any other boring stories here is one of the ways to determine what browser the user is using and loading the appropriate css. (demonstrated in C#.net ).

1.) In the section of your asp/aspx/ html page give your css stylesheet an id like so:

link id="myLinkstyle" runat="server" rel="Stylesheet" type="text/css">

Also make sure that you put runat="server". That will give you the opportunity to figure out the browser user is using from code behind the aspx page.

2.) In the Code behind, in your aspx.cs page or master.cs depending on design of your site enter the following code in your page_load method.

C#

protected void Page_Load(object sender, EventArgs e)

{

System.Web.HttpBrowserCapabilities browser = Request.Browser;

if (browser.Browser.ToLower() == "ie")

myLinkstyle.Href = "CSS/IEStyles.css";

else

myLinkstyle.Href = "CSS/OtherBrowserStyle.css";

}

That is the simplest thing you can do. The first line System.Web.HttpBrowserCapabilities browser = Request.Browser; just creates a browser object and assigns it to the request.browser property.

then if (browser.Browser.ToLower() == "ie") checks to see if the browser is of type IE. In that case it loads the IEstyles css other wise some other style.css

That is it.

The Request.Browser object has crapload of different properties with which you can make dynamic loading of javascript, css and other external

documents as customized as you want to. For instance you could get the type of the browser or its version by saying browser.GetType() or browser.Version.

Ok, Hope this short how to Tutorial helps someone. If you find any mistakes I made, please comment.