none
How to clear CSS caching on CSSRegistration Control

    Question

  • I am registering multiple CSS files, each using the <Sharepoint:CSSRegistration> Control. As I am developing the design of the site, I often change the order in which I want the css files to render, using the After Property. However, after both changing the order of the css files, and the value of the After property, the order the files are rendered do not reflect those changes.

    Now, I am deploying all my css files into the 1033 folder, and there is a ?rev with a number appended to the css link tags once they are rendered. I presume this is because the control is caching the css files, and this is why the order is not changing.

    If I am on the right track, my quesiton is: How do we clear the cache?

    many thanks,

    sivilian

    Thursday, October 18, 2012 4:09 PM

Answers

  • Hi sivilian,

    In your Css registration control , you should use the complete reference of your name attribute.

    Work :<SharePoint:CssRegistration runat="server" Name="/_layouts/1033/styles/wiki.css" />

    Not Work:<SharePoint:CssRegistration runat="server" Name="wiki.css" EnableCssTheming="false" />

     

    Thanks,

    Jack

    Monday, October 29, 2012 3:54 AM
    Moderator

All replies

  • Hi sivilian,

    How do you deploy your css files? By visual studio or by manual. When you deploy your custom css file, you should restart IIS(internet information services).

    Because sometime browser will has the original cache. So, every time , when you deploy your custom css style, you should restart your IIS.

     

    Thanks,

    Jack

    Monday, October 22, 2012 7:53 AM
    Moderator
  • Hi Jack,

    I deploy them using Visual Studio 2012. I have tried many things to resolve this issue, one of them was to reset IIS, but the order in which the css files render in my markup remain unchanged.

    I think that there must be a way to fix this, otherwise the "After" propery of the CSSRegistration control is useless.

    thanks,

    sivilian

    Tuesday, October 23, 2012 3:01 PM
  •  

    Hi sivilian,

    Could you please post your css code?

    This will not render the CSS with a ?rev=<id> tag:

    <SharePoint:CssRegistration name="/_layouts/styles/MyCustomer/css/myCustomer.css" After="corev4.css" runat="server"/>

    While this *will* render with a ?rev=<id> tag:

    <SharePoint:CssRegistration name="MyCustomer/Css/myCustomer.css" After="corev4.css" runat="server"/> 

     

    You can refer to the following link.

    http://andersrask.sharepointspace.com/Lists/Posts/Post.aspx?ID=35

     

    Thanks,

    Jack

    Wednesday, October 24, 2012 1:50 AM
    Moderator
  • Hi Jack,

    thanks for your help it is appreciated. Putting the absolute Url did remove the ?rev<id> but unfortunately it made no difference in the order in the which stylesheets are rendered.

    The link you provided states that the ?rev=<id> which gets appended to the markup is to fool the browsers into thinking that there is a new css file and would thus not cache it. For me, I have tried tried clearing my browser cache, but with no effect on the order. I have no idea why I a getting this behavior.

    Below is my code and the result in the markup.

               <SharePoint:CssRegistration
                    id="CSSReg1"
                    runat="server"
                    EnableCssTheming="false"
                    name="Website/jquery-ui.tabs.css" />
    
                <SharePoint:CssRegistration
                    id="CssReg8"
                    runat="server"
                    EnableCssTheming="false"
                    name="Website/jqueryui.css"
                    After="Website/jquery-ui.tabs.css" />
    
                <SharePoint:CssRegistration 
                    id="CssReg6"
                    runat="server"
                    EnableCssTheming="false"
                    name="Website/main.css"
                    After="Website/jqueryui.css" />
    
                <SharePoint:CssRegistration
                    id="CssReg4"
                    runat="server"
                    EnableCssTheming="false"
                    name="Website/no-query.css"
                    ConditionalExpression="IE 8"
                    After="Website/main.css" />
                           
                <link rel="stylesheet" type="text/css" media="print" href="/_layouts/1033/Styles/Website/print.css" />
    
                <SharePoint:CssRegistration 
                    id="CssReg3"
                    runat="server"
                    EnableCssTheming="false"
                    name="Website/ie.css"
                    ConditionalExpression="(lt IE 9) & (!IEmobile)"
                    After="Website/no-query.css" />
              
                <SharePoint:CssRegistration
                    id="CssReg7"
                    runat="server"
                    EnableCssTheming="false"
                    name="Website/admin.css"
                    After="Website/ie.css" />

    The order that this renders:

    <link id="CSSReg1" rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Website/jquery-ui.tabs.css?rev=fWWoLDALyH4WmPYusrsgLA%3D%3D"/>
    
    <link rel="stylesheet" type="text/css" href="/Style%20Library/en-US/Core%20Styles/page-layouts-21.css"/>
    
    <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=3TRomkG1g2gMGz4rekMIQg%3D%3D"/>
    
    <link id="CssReg6" rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Website/main.css?rev=6MbbPUF2OjtM5b%2FKmMsn7g%3D%3D"/>
    
    <link id="CssReg7" rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Website/admin.css?rev=7zive6fSpQnMoz9kuzT6lQ%3D%3D"/>
    
    <!--[if IE 8]>
    <link id="CssReg4" rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Website/no-query.css?rev=NVVIjeDR9ll43qt9jBFSWA%3D%3D"/>
    <![endif]-->
    
    <link id="CssReg8" rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Website/jqueryui.css?rev=1wxLgv3sNi3iIqRhmy35lA%3D%3D"/>
    
    <!--[if (lt IE 9) & (!IEmobile)]>
    <link id="CssReg3" rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Website/ie.css?rev=3CZVQGolzp7GTd8s3hmHJQ%3D%3D"/>
    <![endif]-->
    

    thanks again for your help,

    sivilian

    Saturday, October 27, 2012 8:51 PM
  • Hi sivilian,

    In your Css registration control , you should use the complete reference of your name attribute.

    Work :<SharePoint:CssRegistration runat="server" Name="/_layouts/1033/styles/wiki.css" />

    Not Work:<SharePoint:CssRegistration runat="server" Name="wiki.css" EnableCssTheming="false" />

     

    Thanks,

    Jack

    Monday, October 29, 2012 3:54 AM
    Moderator
  • SPUtility provide us a method called - MakeBrowserCacheSafeLayoutUrl(string,boolean) and other overload methods. 
    
    Based on last modification this itself generate a MD5 hash code and append it to css or js urls. We don't have to worry about finding version numbers or generating id based on creation date, this is already handled. 
    
    I have used this in my project for handling css caching for custom css. SharePoint internally does same for OOB css which are rendered by CSSLink.
    protected override void OnInit(EventArgs e)
        {
    
            CssRegistration cssRegistration1 = new CssRegistration();        
            cssRegistration1.After = "corev4.css";
            cssRegistration1.ConditionalExpression = "IE 7";
            cssRegistration1.Name = SPUtility.MakeBrowserCacheSafeLayoutsUrl("MyCustom CSS path _layouts folder", false);       
            Controls.Add(cssRegistration1);
     base.OnInit(e);
    }
    and for link tag you can directly do:
    <link rel="stylesheet" type="text/css" href="<%=SPUtility.MakeBrowserCacheSafeLayoutUrl('custom css relative path', false)%>" />
    Refer to: http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.utilities.sputility.makebrowsercachesafelayoutsurl.aspx
    


    Wednesday, August 07, 2013 4:06 AM