RSS 2.0
Journal / Blog
Saturday, November 11, 2006
The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining a Media Type(s) (Work Around #2)
ASP.NET 2.0’s Themes and Skins have a number of design flaws - Themes and Skins depend almost entirely on Cascading Stye Sheet (CSS), but don’t fully support CSS - I’ve listed some "Work Arounds" for a couple design flaws. I don’t recommend any of these "Work Arounds" since they contribute to software entropy before your application is even developed, instead I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

The Problem / Question:
Is it possible to define CSS Media types (like media="print") in the HTML Head tag? ASP.NET 2.0 automatically includes all my CSS files (from the active Theme directory) into the HTML Head tag, but Themes don't allow me to specify any CSS Media types.

The Solutions / Work Arounds:
Sub class the HtmlHead class to enumerate through the child controls and add new Meta attributes to the child controls using the HtmlLink class. In order to use multiple Media types you would probably need to use more complex logic and resolve Media types to filenames (i.e. SomeFileName_Print.css could resolve to media="print") - for more information on manipulating the HtmlHead class read Phil Scott's post titled: Accessing the Html Header in ASP.NET 2.0.

An example of the problem:
The HTML source automatically generated by ASP.NET 2.0 Themes (note the lack of media attributes):
<head>
  <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
    <link href="App_Themes/Default/HandHeld.css"
       type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Print.css"
       type="text/css" rel="stylesheet" />
    <link href="App_Themes/Default/Screen.css"
       type="text/css" rel="stylesheet" />
</head>
My desired HTML source (note the media attributes in bold):
<head>
  <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
    <link href="App_Themes/Default/Default.css"
       type="text/css" rel="stylesheet" media="all" />
    <link href="App_Themes/Default/HandHeld.css"
       type="text/css" rel="stylesheet" media="handheld" />
    <link href="App_Themes/Default/Print.css"
       type="text/css" rel="stylesheet" media="print" />
  <link href="App_Themes/Default/Screen.css"
       type="text/css" rel="stylesheet" media="screen" />
</head>
The Pros and Cons of this approach:
Cons:
  1. Can’t use Microsoft’s Conditional Comments
  2. Can’t use the CSS @Import rule
  3. Can’t use the CSS @Media rule
  4. Can’t easily use multiple CSS Media types
  5. Can’t easily control CSS preferred and alternate style sheets
  6. Can’t easily control the CSS load order (inheritance and cascading)
  7. Contributes to a fragile environment
  8. Not intuitive – a maintenance programmers nightmare - “I know CSS, but Where are the Media types defined and How are they controlled?”
Pros:
  1. Can define a single Media type for all .css files relatively easy
  2. Could define multiple Media types - with more complex logic dependant on .css file naming
  3. Could control CSS preferred and alternate style sheets - with more complex logic dependant on .css file naming
  4. Compatible with Revision Control Systems (CVS, Subversion, Visual Source Safe, and so on)

In conclusion; CSS will continue to be the industry design standard - it has been the standard for well over 10 years. CSS is far more powerful than Themes and Skins, I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

Related posts:
.NET | ASP.NET | CSS | Themes and Skins
PermaLink | Digg It | Del.icio.us | Comments [2]
Related posts:
Cross Language Naming Conventions: Avoiding Verbosity In The Presentation Layer
Book Reviewed: JavaScript: The Good Parts by Douglas Crockford
Writing a Control for the AJAX Control Toolkit: Something Stinks
More on the perils of The ASP.NET AJAX Framework
The Good Parts of The ASP.NET Framework and Visual Studio
Getting a Job at Google: A Web Developer Fizzbuzz
Tuesday, March 13, 2007 11:05:01 AM (GMT Standard Time, UTC+00:00)
Why can't you just declare the media type inside the CSS file.

@media print
{
body {
padding: 0;
margin: 0;
font-size: 62.5%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #666666;
line-height: 1.5em;
}

/* etc */

}
Mark Kemper
Saturday, March 17, 2007 10:10:19 PM (GMT Standard Time, UTC+00:00)
I introduce this method in a later post (see Work Around #5). Thanks for the post Mark.
Adam
Comments are closed.
Page rendered at Friday, September 05, 2008 8:31:33 PM (GMT Standard Time, UTC+00:00)