Dynamic Style Sheets in ASP (Article)

Category:
ASP, HTML and XML
Type:
Snippets
Difficulty:
Intermediate

Author: Don

Version Compatibility: ASP

Instructions: Copy the declarations and code below and paste directly into your VB project.

Style sheets are a valuable tool for a developer when it comes to cross-browser webpage development. Most developers will use a style sheet when developing a website to allow for less code and quicker changes. Also if the need arises (usually does) they'll use multiple style sheets to handle browser compatibilities. This is an effective method and it does work well. The problem is consistency. There are a lot of different browsers with a lot of different versions on the web. The last thing any developer needs to do is maintain a directory full of style sheets. Also think of the wasted space. Approximately 90% of those style sheets are all the same. Each sheet will make a minor change to a single setting and then good old duplication. Wasn't it nicer with a single style sheet? Well it's still possible.

A single style sheet. A single active server page style sheet. I couldn't believe it when it came to me. A simple, dynamic and completely customizable method of altering styles of a website based on the browser type or passed parameters. Yes, parameters. Dynamically change the colors of the page based on values set in the parent page, stored in a database or even provided by the client. The possibilities are only limited to what you can do with an active server page.

Making a dynamic style sheet is as simple as making an active server page. I usually use a file named "style.asp". It gets the point across about what its function is. Inside simply make a style sheet as you would normally. I add my own little functions to help on distinguishing from different browsers and the changing of variables. I have attached a basic example which you can build upon.

Please enjoy and give me you feed back for further features.

Example:

 

default.asp
-----------
<html>
  <head>
    <title>Dynamic Style Sheets</title>
    <link rel="stylesheet" href="style.asp?color=DEDEDE" type="text/css" />
  </head>
  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <span class="fontstyle1">Font Styling</span>
  </body>
</html>
style.asp
---------
<%
  option explicit

  '--------------------------------------------------------------
 
  '- Name: iif
  '- Description: Instaneous IF...THEN statement   
  '-     Example: iif(isnull(variable),"",variable)
  '-------------------------------------------------------------
  Function iif(ByVal i,ByVal j,ByVal k)
    if i Then iif = j Else iif = k
  End Function

  '--------------------------------
  '-        Name: IsIE
  '- Description: Returns a boolean response of true if the 
  '- client browser is IE
  '-     Example: if IsIE then
  '--------------------------------------------------------------  Public Function IsIE()
    Dim var
    var = LCase(Request.ServerVariables("HTTP_USER_AGENT"))
    If InStr(1, var, "msie", vbTextCompare) Then
      IsIE = True
    End If
  End Function
%>

.fontstyle1
{
  font-family: arial;
  font-size: <%=iif(IsIE,20,25) %>pt;
  font-weight: 800;
  color: #<%=request.querystring("color") %>;
}