The directory structure:The rendered XHTML: <head> <title>The Problems With Themes and Skins in ASP.NET 2.0</title> <link href="App_Themes/Default/PrinterFriendlyStyleSheet.css" type="text/css" rel="stylesheet" /> <link href="App_Themes/Default/StyleSheet.css" type="text/css" rel="stylesheet" /></head> Note each externally linked Style Sheet lacks a media type.Our desired XHTML (using an Externally Linked Style Sheet and a Print Media Type) would have looked something like this: <head> <link href="App_Themes/Default/PrinterFriendlyStyleSheet.css" type="text/css" rel="stylesheet" media="all" /> <link href="App_Themes/Default/PrinterFriendlyStyleSheet.css" type="text/css" rel="stylesheet" media="print" /></head> Note the Media Type (media="print") in bold.
1. Use the Media Rule (@Media) to define the print Media Type inside an Externally Linked Style Sheet.An example: @Media Print { body { background-color: #FFFFFF; } /*... your CSS here ...*/ #Menu, #AdvertismentContainer { display: none; } #Content { width: 100%; }} Discussion: This is probably the best alternative to defining the Media Type in an Externally Linked Style Sheet - the other solutions introduce problems of their own.2. Use the Import Rule (@Import) to load your printer friendly Style Sheet from an alternate location and define a Media Type - this involves removing your printer friendly Style Sheet from the Themes (App_Theme directory).An example:@Import url("/AppName/CSS/PrinterFriendlyStyleSheet.css") Print; Discussion: This solution requires moving our Printer Friendly Style Sheet outside the Theme directory, since Themes don't allow us to exclude a Style Sheet folder (see Excluding a CSS folder for more details). Once we start moving Style Sheets outside the Themes directory we should probably ask ourselves why we're even using Themes, and consider regaining complete control over our CSS by moving all the CSS files outside the Theme directory. At this point we could revert to Externally Linking our Style Sheets where we could define our Media Type attributes. In addition the CSS URL function used in this solution confuses many.3. Use the Style Element to define a Print Media Type.An example:<style type="text/css" media="print"> /*... your CSS here ...*/</style>Discussion: This solution doesn't work if the Style Elements are defined in the HTML head (see Using Internal (Embedded) Style Sheets with Themes for more details), you can however move the Style Element into the Body of the document, this compromises the HTML validation, but large e-commerce sites like Amazon and Yahoo! make heavy use of this method.4. Sub class the HtmlHead class to enumerate through the child controls and add new Meta attributes to the child controls using the HtmlLink class. See my post titled Defining a Media Type(s) for more details.Discussion: This solution requires a fair amount of work and only solves one of the many problems with Themes, pursuing this solution would probably be a case of not seeing the forest for the trees.
An example: @Media Print { body { background-color: #FFFFFF; } /*... your CSS here ...*/ #Menu, #AdvertismentContainer { display: none; } #Content { width: 100%; }} Discussion: This is probably the best alternative to defining the Media Type in an Externally Linked Style Sheet - the other solutions introduce problems of their own.
An example:@Import url("/AppName/CSS/PrinterFriendlyStyleSheet.css") Print; Discussion: This solution requires moving our Printer Friendly Style Sheet outside the Theme directory, since Themes don't allow us to exclude a Style Sheet folder (see Excluding a CSS folder for more details). Once we start moving Style Sheets outside the Themes directory we should probably ask ourselves why we're even using Themes, and consider regaining complete control over our CSS by moving all the CSS files outside the Theme directory. At this point we could revert to Externally Linking our Style Sheets where we could define our Media Type attributes. In addition the CSS URL function used in this solution confuses many.
An example:<style type="text/css" media="print"> /*... your CSS here ...*/</style>Discussion: This solution doesn't work if the Style Elements are defined in the HTML head (see Using Internal (Embedded) Style Sheets with Themes for more details), you can however move the Style Element into the Body of the document, this compromises the HTML validation, but large e-commerce sites like Amazon and Yahoo! make heavy use of this method.
Discussion: This solution requires a fair amount of work and only solves one of the many problems with Themes, pursuing this solution would probably be a case of not seeing the forest for the trees.