Geeks With Blogs
Mehfuz Hossain Learning and sharing.

Sometimes it is necessary that we do some special tactics to make a  particular CSS work in diiferent browser . For example , the following css.

.logo

{

background-image:none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="##BASE_PATH##images/logo.png", sizingMethod="crop");

}

This is needed only for IE6 to make alpha blending work.Now, if the logo is used as a background image, then we will see no logo in Firefox unless we do some css hacks. Ironic !

Rather, using the hacks stuff for aiming at different browsers , which is, in a way cumbersome and not always side effect free, i belive that it's a good idea to create a css handler that will  prepare a combined output depending on browser needs.

 

 

The basic concept is to use a hander class that will stand as an intermidiate processor , which actually get all the css files , depending on the browser on which the app is running it combines them and finally and emits the content to the client.

Here, i need to tell that emiting the content type is a must, although IE is smart enough to recongize the output as CSS by the reference type but firefox wont be able to recognize it at all.

Full Code.

<%

@ WebHandler Language="C#" Class="CSSHanler" %>

using

System;

using

System.Web;

using

System.IO;

public

class CSSHanler: IHttpHandler {

public void ProcessRequest (HttpContext context) {

string css = string.Empty;

//general css

string commonCss = GetRawContent("default.css");

//the following line is useful if you need full path access in css , for ex. DXImageTransform full url.

commonCss = commonCss.Replace(

"##BASE_PATH##", "http://geekswithblogs.net/");;

css = commonCss;

css +=

"\r\n";

if (context.Request.Browser.IsBrowser("IE"))

{

string ieCss = GetRawContent("defaultIE.css");

ieCss = ieCss.Replace(

"##BASE_PATH##", "http://geekswithblogs.net/");

css += ieCss;

css +=

"\r\n";

}

// TOOD : add other browser checks as well.

context.Response.ContentType =

"text/css"; // Must for FireFox

context.Response.ContentEncoding = System.Text.

Encoding.UTF8;

context.Response.Write(css);

context.Response.End();

}

public string GetRawContent(string fileName)

{

TextReader configPath = new StreamReader(System.AppDomain.CurrentDomain.BaseDirectory + "YourDirectory\\" + fileName);

string content = configPath.ReadToEnd();

configPath.Close();

return content;

}

public bool IsReusable {

get {

return false;

}

}

}

To start off, you just to  add the reference in your Default.aspx or Default.master which looks like:

<link rel="stylesheet" href="<%=YOURSITEPREFIX%>CSSHandler.ashx" type="text/css" media="screen" />

And,Replace the site prefix to whatever you want.And that's it, you are ready to throw your hacks away.

 

Posted on Tuesday, June 19, 2007 11:20 PM | Back to top


Comments on this post: Separate Browser Specific CSS

# re: Separate Browser Specific CSS
Requesting Gravatar...
Just one more thing you need to do is cache the response otherwise the handler will be hit everytime the page is requested. Put something like the following at the end:

response.Cache.SetCacheability(HttpCacheability.Public);
response.Cache.SetExpires(DateTime.Now.AddHours(24)); // 1 Day Caching.
Left by Kazi Manzur Rashid on Jun 21, 2007 4:40 AM

# re: Separate Browser Specific CSS
Requesting Gravatar...
Thanks!, yes it should be i will add that too.
Left by Mehfuz Hossain on Jun 21, 2007 10:24 AM

# Separate Browser specific CSS with Generic Handler
Requesting Gravatar...
You've been kicked (a good thing) - Trackback from DotNetKicks.com
Left by DotNetKicks.com on Jun 22, 2007 5:12 AM

# re: Separate Browser Specific CSS
Requesting Gravatar...
This is cool. One change I would suggest is replacing the hardcoded string for the base website ("http://geekswithblogs.net/") with Request.ApplicationPath.
Left by jrummell on Jun 28, 2007 6:34 PM

# re: Separate Browser Specific CSS
Requesting Gravatar...
Yes, Thats, true, you can either replace that with AppPath, or, in real life solution, you can keep a site prefix key in web.config that will hold the base site url.
Left by Mehfuz Hossain on Jun 28, 2007 10:49 PM

# re: Separate Browser Specific CSS
Requesting Gravatar...
I'm trying to use your magnificent piece of code, and it's working with IE.. but not with FireFox.. it's frustrating. Can i e-mail you the code I made and maybe you can help me out?!

Thanks!
Left by Puck on Aug 07, 2009 7:48 AM

Your comment:
 (will show your gravatar)


Copyright © Mehfuz Hossain | Powered by: GeeksWithBlogs.net | Join free