3

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.

5
  • using CSS Specificity , your structure.css can be correctly applied no matter when it loads Commented Mar 17, 2017 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
    Commented Mar 17, 2017 at 9:09
  • Yes, so instead of applying equal Specificity, increase Specificity in structure.css so it doesn't matter anything else loads later Commented Mar 17, 2017 at 10:50
  • Point taken. But I have to change a lot in structure.css if I go on that path.
    – chan4lk
    Commented Mar 21, 2017 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 Commented Mar 21, 2017 at 11:56

1 Answer 1

1

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?

2
  • 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
    Commented Mar 21, 2017 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. Commented Mar 21, 2017 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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