Home > .NET, ASP.NET, CSS, Themes and Skins > The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining a Media Type(s) (Work Around #2)

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining a Media Type(s) (Work Around #2)

November 11th, 2006

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:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:
  1. March 13th, 2007 at 18:17 | #1

    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 */

    }

  2. Adam Kahtava
    March 17th, 2007 at 18:18 | #2

    This method in a later post (see Work Around #5).

    Thanks for the post Mark.

  1. No trackbacks yet.