The master page has following code segment

<SharePoint:CssRegistration ID="CssRegistration1" Name="bootstrap.css" After="corev4.css" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration2" Name="bootstrap-responsive.css" After="bootstrap.css" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration3" Name="bootstrap-custom.css" After="bootstrap-responsive.css" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration5" Name="blackjackLayoutStyles.css" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration4" Name="royalslider.css" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration6" Name="ITSReportViewerStyles.css" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration7" Name="jquery-ui-1.9.2.custom.min.css" runat="server" />

<dpg:CustomCss id="customCss" runat="server"></dpg:CustomCss>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/structure.css"/>
<SharePoint:CssRegistration ID="CssRegistration8" Name="search.css"  runat="server" />

I need to change the link tag of structure.css to a CSSRegistration tag for cache busting purposes.

But after that SharePoint renders the files in dynamic order, which causes CSS override. I need to know how the After tag works in SharePoint to render files in desired order.

  • using CSS Specificity , your structure.css can be correctly applied no matter when it loads – Danny '365CSI' Engelman Mar 17 '17 at 8:44
  • Equal specificity: the latest rule is the one that counts. #content h1 { padding: 5px; } #content h1 { padding: 10px; } I have same rule in different css files that causes overriding. – chan4lk Mar 17 '17 at 9:09
  • Yes, so instead of applying equal Specificity, increase Specificity in structure.css so it doesn't matter anything else loads later – Danny '365CSI' Engelman Mar 17 '17 at 10:50
  • Point taken. But I have to change a lot in structure.css if I go on that path. – chan4lk Mar 21 '17 at 9:50
  • Then put an onload event on the last CSS file loaded by the page, and use script to load your structure.css with a cachebusting URI – Danny '365CSI' Engelman Mar 21 '17 at 11:56

You should be able to specify the After tag, just as you're doing. https://thomasdaly.net/2012/05/02/sharepoint-cssregistration-or-link/

If that isn't working, can we see the output? There may be a pattern we can recognize.

If all else fails, CssRegistrations actually appear to load in reverse order (at the moment anyway - this isn't by design so it could always change). Have you tried reversing the order of your registrations?

| improve this answer | |
  • Yes I have tried reversing the order. It seems to work when there are only the master page CSSRegistrations. But when the webpart specific CSSs are loading the order is unpredictable. – chan4lk Mar 21 '17 at 9:59
  • Yeah; that makes a little sense. The loading of web parts is going to interfere with the sequential loading of CSS Registrations. From what I've read, the "After" property really only works against Microsoft's own CSS registrations; it doesn't appear to work with other custom registrations. – Michael Bailey Mar 21 '17 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.