Tuesday, June 19, 2007 11:20 PM
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.