The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Excluding a CSS folder (Work Around #1)
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:
How can I exclude a subdirectory (sub folder) containing Cascading Style Sheets (CSS) in a Theme (App_Theme) directory? ASP.NET 2.0 automatically includes all CSS files (.css) from the active Theme directory and sub directories into the rendered HTML page, but doesn’t allow me to exclude a folder of CSS files or a single CSS file.
The Solutions / Work Arounds:
- Create your CSS directory outside the App_Theme directory then map a Virtual Directory inside your Theme directory.
- Add a custom VirtualPathProvider to ignore the non-root level CSS files in sub directories – See David Ebbo’s article titled: Overriding ASP.NET combine behavior using a VirtualPathProvider.
These “Work Arounds” are useful if you want to do something like this (note: Default.css is sitting in the root of the active Theme directory):
/* Default.css */
@Import “StyleSheets/Common.css “;
@Import “StyleSheets/Masterpage.css”;
<!–[if IE]>
@Import “StyleSheets/FixInternetExplorer_Quirks.css”;
<![endif]–>
<!–[if IE 7]>
@Import “StyleSheets/FixInternetExplorer7Quirks.css”;
<![endif]–>
Or if you wanted to use an Embedded CSS Statement like this:
<style type=”text/css”>
<!–
@Import “StyleSheets/HideNavigation.css”;
@Import “StyleSheets/HideSearchBars.css”;
–>
</style>
The Pros and Cons of this approach:
Cons:
- Can’t really define CSS media types, but we can now use the CSS @Media rule
- Can’t control CSS preferred and alternate style sheets
- Doesn’t scale well
- Contributes to a fragile development environment
- Not very compatible with Revision Control Systems (CVS, Subversion, Visual Source Safe, and so on)
- Not intuitive _ a maintenance programmer’s nightmare, “I know CSS, but Where is the CSS folder?” or “I know CSS, but Why and How are some CSS folders excluded?
Pros:
- Can control the load order (inheritance and cascading) through the CSS @Import rule
- Can exclude a folder containing CSS files
- Can use the CSS @Import rule
- Can use the CSS @Media rule
- Can use Microsoft’s conditional comments
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:
- Where it all Falls Apart
- Defining a Media Type(s) (Work Around #2)
- Defining the Load Order (Cascades) for CSS (Work Around #3)
- Using Internal (Embedded) Style with Themes (Work Around #4)
- Creating Printer Friendly Pages (defining a CSS Print Media Type) with CSS While Using Themes (Work Around #5)
- A Resolution to The Problems with Themes, Skins, and Cascading Style Sheets (CSS) – Putting the Cascades back into ASP.NET 2.0 Themes (taking control over CSS Cascades / Load Order, Media Types, and Overrides)