Loading CSS stylesheet for ascx ASP.Net user control

Goal:

For performance reasons you want to load a piece of CSS only for the ascx file to which it applies. You do not want to embed the style as you cannot do this in ASP.Net ascx user controls. ASP.Net will render the style tag as HTML text.

Solution:

Some folks use the Page.Header.Controls. Add to add the stylesheet link in the ascx page or in the code behind. Not needed, you may specify a "link" tag in the ascx file, no need to specify "head" tag or anything else, just the link tag itself:

<link rel="Stylesheet" media="screen" type="text/css" href="<%=ResolveUrl("~/Content/StyleSheets/Screen/Global/CssCRMUITrafficLine.css") %>" /> 

The benefits are significant in that it is only loaded when needed. Personally I also prefix all my css selectors with the unique ID of the ascx container (i.e. I give the outer most div of my ascx page a unique name - usually that of the ascx file name) so that when I nest the ascx file into any other file the nested dynamically loaded CSS to not affect anything else outside of its scope. Also, since the stylesheet is linked it is cached on the user's browser once it has been loaded.

Print | posted @ Wednesday, November 24, 2010 10:37 AM

Comments on this entry:

Gravatar # re: Loading CSS stylesheet for ascx ASP.Net user control
by JonW at 11/28/2010 10:08 AM

Or even better, style the ascx in its context in/with the site's TOTAL CSS.

Need more fine grained control, split css-responsibillity in several files?
- Use .Less for CSS-combining
- And pherhaps this trick for group related files:
* VS 2005 & 2008 http://blog.jasonbunting.com/PermaLink,guid,5a2506a1-64c6-416d-af16-f33390de54fd.aspx
* VS 2010 http://stackoverflow.com/questions/3617539
Gravatar # re: Loading CSS stylesheet for ascx ASP.Net user control
by Renso at 11/30/2010 12:42 PM

JonW, using ClientScript.RegisterClientScriptInclude does not cache the script. For caching to work it needs to be added to the header of the page, which you cannot do with registration from an aspx with master page or ascx file.

Also, with ASP.NET MVC you can use a FileResult return type on an action that you call in the header via the script tag to combine, compress and gzip content, which is what I se to combine all my CSS and JS files respectively into one file, one for CSS and one for JS. The reason I wrote this blog is for the purpose of dynamically adding css content only when needed as some css styling is only required in rare circumstances.
Gravatar # re: Loading CSS stylesheet for ascx ASP.Net user control
by Stick at 1/26/2012 2:17 PM

is there a way to programatically obtain the path the ascx file is located in so the identified path can be prefixed to the css file? Requirements I think I want to fullfull:
1. I want to load the css "on-demand" as outlined above.
2. Want to deploy the css file in the same folder as the ascx file.
3. Thus, I want to obtain the web path to the ascx file so I can prefix it to the css file.
Post A Comment
Title:
Name:
Email:
Comment:
Verification: