ASP 101 - Active Server Pages 101 - Web01
The Place ASP Developers Go!



Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates
ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
What is Adovbs.inc and Why Do I Need It?
An Overview of ASP.NET
Connections, Commands, And Procedures

QUICK TIP:
Variable Name Prefixes
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


Creating Dynamic Style Sheets Using ASP

Thomas C. Carpe

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.

<link rel="stylesheet" type="text/css" href="../../../articles/thomas/dynamicstylesheets/SampleStyle.html" />

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.

Here's the code. Enjoy!

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.

Related Info:


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers