Many people forget that ASP isn't just for making dynamic HTML pages.
ASP can be used to create pages of all kinds, or even binary data, like
images. Some examples have used XML, audio playlists, text files, GIFs,
and JPGs - literally anything with a MIME type that the browser
recognizes.
The code needed to make this happen is really quite simple. It takes
only one line to change the HTTP header to produce a different MIME
type, and thus force the web browser to interpret the file differently.
One application for this ability is to create a style sheet using ASP.
Response.ContentType = "text/css"
It's pretty easy in fact, to combine this technique with browser
detection, producing a style sheet that will work in any browser.
'Detect Client Browser Environment
Dim strUserAgent ' browser type capture
Dim IE5Plus, IE55Plus, css2compatible ' general purpose capabilities
Dim NS, NS4, NS6, IE, IE4, IE5, IE6 ' Browser Boolean Constants
Dim Opera, Opera5 ' Browser Boolean Constants
Dim OtherBrowser ' obsolete browser flags
strUserAgent = UCase(CStr(Request.ServerVariables("HTTP_USER_AGENT")))
'Explorer
IE = FALSE
IE4 = FALSE
IE5 = FALSE
IE6 = FALSE
If InStr(strUserAgent, "MSIE") Then
IE = TRUE
End If
If InStr(strUserAgent, "MSIE 4") Then
IE4 = TRUE
ElseIf InStr(strUserAgent, "MSIE 5") Then
IE5 = TRUE
ElseIf InStr(strUserAgent, "MSIE 6") Then
IE6 = TRUE
End If
'Opera
Opera = FALSE
Opera5 = FALSE
If InStr(strUserAgent, "Opera") Then
Opera = TRUE
End If
If InStr(strUserAgent, "Opera 5") _
Or InStr(strUserAgent, "Opera/5") Then
Opera5 = TRUE
End If
'Netscape
NS = FALSE
NS4 = FALSE
NS6 = FALSE
If InStr(strUserAgent, "Netscape6") Then
NS6 = TRUE
ElseIf InStr(strUserAgent, "Mozilla/4") AND Not (IE OR Opera) Then
NS4 = TRUE
End If
'This may not be 100% accurate; there are a lot of browsers
'based on the Mozilla core
If NS6 OR NS4 OR (InStr(strUserAgent, "Mozilla") _
AND Not (IE OR Opera)) Then
NS = TRUE
End If
'If the document looses the Loose DTD instead of Transitional or
'Strict then set css2compatible to FALSE for IE6 instead
If Opera5 Or IE6 Or NS6 Then
css2compatible = TRUE
Else
css2compatible = FALSE
End If
OtherBrowser = FALSE
If Not (IE OR NS4 OR NS6 OR Opera) Then
OtherBrowser = TRUE
End If
If InStr(strUserAgent, "MSIE 5") _
Or InStr(strUserAgent, "MSIE 6") Then
IE5Plus = TRUE
Else
IE5Plus = FALSE
End If
Now that we have tools to detect the type of browser, it is very simple
to customize the output of the style sheet. We start by changing the ASP
content type to that of a CSS style sheet. Then we include the browser
detection code in BrowserDetect.asp. With these two preliminary steps
complete, we just use simple IF...THen code to specify where and when
a given style command should be part of our definition.
<% Response.ContentType = "text/css" %>
<!--#include file="BrowserDetect.asp"-->
#SampleBox {
<% If Not NS4 Then %>
font-family: Tahoma, Arial, sans-serif;
font-size: 10pt;
<% Else %>
fontfamily: Tahoma, Arial, sans-serif;
fontsize: 10pt;
<% End If %>
<% If css2compatible Then %>
/* in css2 standard the width of the box does
not include its padding, borders, or margins */
width: 230px;
height: 80px;
padding: 10px;
<% Else %>
/* in older browsers, padding in considered
part of a box's width and height */
width: 250px;
height: 100px;
padding: 10px;
<% End If %>
}
The above code accounts for two circumstances in which you'd wnt to customize CSS output, but there could be many more. The first is that one corrects for improperly implemented style commands in Netscape 4, which doesn't use the hyphen in font commands as it should. The second accounts for a rather critical clarification of the way padding should be implemented that was not corrected until version 6 or IE and Netscape.
It is important for me to note that in IE6 there will be one other peice of code that will affect how this style sheet is rendered. Because the padding change is such a radical one, Microsoft has decided that the new padding standard will only apply if you specify the use of one of the document type definitions (or DTDs) that comply with HTML 4.01. The default will be Frameset if you don't specify one, so using this code without providing either a Loose or Strict DTD will cause your boxes to appear oddly in IE6. To correct this, either remove IE6 from the css2compatible test in BrowserDetect.asp, or provide the following line of code at the top of your web pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
That's about it. Simply include a link to the stylesheet in the HTML file and you'll have a style sheet that will customize itself to the browser of any specific user of the site.
Wasn't that easy? You can view the sample output by following the link below. Check it out in diffferent browsers to see the different results you'll get in them. You could even view the stylesheet itself at its URL to see the actual code produced when your browser loads the file.
For once I seem to have written something that doesn't require a great deal of elaboration. The concept is simple, and yet this concept has applications which can become very complex. For example, you could pass specific attributes to your style sheet using the Request.QueryString object, making it a one-stop style shop for your entire web site, while still being able to produce customized styles for various pages and parts of the site.
I should mention some of the benefits of doing things this way. Firstly, by putting the ASP in your style sheet, you can avoid having obnoxious and cumbersome code in your web application; normally you'd have to use CLASS or ID attribute name changes to accomplish the same cross-browser results we get here. Also, your style sheet will contain only the code that it needs at any one time, reducing the risk that your style commands will conflict with one another and produce unfavorable results.
