Problem ordering the CSS references when registering CSS files with the CssRegistration class

Question

I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header.

The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is optionally registered when there's a path to it set in the web part's property AdditionalCss. The CSS files should be inserted in the header after all SharePoint CSS files and should be sorted in the order they were added by code.

The code I used is the following:

var contentCss = new CssRegistration 
                 { Name = "/_layouts/MyWebPart/css/content.css", 
                   RevealToNonIE = true };

if (SPContext.Current.Web.UIVersion == 4)
     contentCss.After = "corev4.css";
else
     contentCss.After = "core.css";

Controls.Add(contentCss);

var customCss = new CssRegistration 
                { Name = "/_layouts/MyWebPart/css/cn_custom.css",
                  After = contentCss.Name, RevealToNonIE = true };
Controls.Add(customCss);

var styleCss = new CssRegistration 
               { Name = "/_layouts/MyWebPart/css/styles.css", 
                 After = customCss.Name, RevealToNonIE = true };
Controls.Add(styleCss);

var colorsCss = new CssRegistration 
                { Name = "/_layouts/MyWebPart/css/colors.css",
                  After = styleCss.Name, RevealToNonIE = true};
Controls.Add(colorsCss);            

if (!string.IsNullOrEmpty(AdditionalCss))
{
    var webPartCustomCss = new CssRegistration 
                           { Name = AdditionalCss, 
                             After = colorsCss.Name, 
                             RevealToNonIE = true };            
     Controls.Add(webPartCustomCss);
}

When I add the web part to a page all CSS files are added to the page as expected. Except the files are sorted in the wrong order.

Without the custom CSS file the order is: (link's rel- and type-attribute were removed for a better overview)

...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>

With the custom CSS file the order is:

... 
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>

As you can see both cases provide a totally different order and the CSS files were never sorted in the order they were added by code.

With this strange behavior the whole CssRegistration class is not very useful as you cannot relay that the CSS files are always in the same order. This makes designing with CSS nearly impossible.

Answer 1

I've also observed what you have; beyond ensuring that your CSS comes after core.css/corev4.css, the CSSRegistration.After property plainly doesn't work. I've extensively tested CssRegistration by using it to link 10 different CSS files into one user control, and it completely ignored the dependencies I specified. Furthermore, the ordering seems completely arbitrary - I couldn't discern any sort of pattern.

I'm thinking of rolling my own version of CssRegistration which actually works.

Answer 2

Have a look @

http://singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/

Thanks,

Ashish

Answer 3

Remember when you use the css registration tag, you have a "after" property.

meaning if u got 5 css files called: 1.css, 2.css, ..., 5.css you can set the after property on the registration of 2.css to "1.css". This will execute the second css file after the firts one has been loaded...

If you want the thirth file to be executed after the second file u just put the after property on the 3.css file to "2.css".