Creating Dynamic Style Sheets Using ASP - Browser Detection

(Page 2 of 3 )

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, Opera, Opera5 ' Browser Boolean Constants
Dim OtherBrowser ' obsolete browser flags

strUserAgent = LCase(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

Generating the CSS
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 invlude 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.

Next: IE 6 >>
 

More ASP Articles
More By Thomas Carpe

Comments On: Creating Dynamic Style Sheets Using ASP

>>> Be the FIRST to comment on this article!