CSS in App_Theme folder gets Cached in Browser

The Stylesheet in the App_Theme folder gets cached in the browser. What should be the approach? so that whenever there is a new deployment the browser should take the latest stylesheets and not the one cached in the开发者_开发技巧 browser.

This was happening for other css(which are not in theme folder) too, so used custom control as mentioned in the link

http://blog.sallarp.com/asp-net-automatic-css-javascript-versioning/

How this could be done for the CSS in the Theme folder?

Edit: The theme name is mentioned in the web.config as mentioned below. so its not just the html link tag which I had solved by using the method mentioned in the link.

 <pages styleSheetTheme="Default">
      <controls>

      </controls>
    </pages>

I too have come across this and the solution I came up with is to add a version to your CSS filename, not pretty but without disabling cache on IIS I could think of no other way.

Rename the CSS file to say mycss-V1.0.css, which will force your user's web browsers to reload the CSS

When deploying the web application, include the version number in the themes path. For example, App_Themes/Default/v1.2.0.4321/, where v1.2.0.4321 is the folder added at deployment for version 1.2.0.4321. This preserves both the theme name (e.g., "Default") and the file names, which makes source code control and path references much easier. ASP.NET loads all of the CSS files in the current theme folder regardless of subfolders. This not only solves the problem referencing CSS files, but images that are referenced from within the CSS files (e.g., background-image).

Additionally, the browser cache duration for App_Themes may be increased to improve performance while ensuring that the next time the web application is updated, all the theme files will be updated.

Add this to the <configuration> section of the Web.Config to have the browsers cache for 120 days.

<location path="App_Themes">
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="120.00:00:00" />
        </staticContent>
    </system.webServer>
</location>

You could timestamp the css file name or use htaccess to setup caching limits as discussed here http://css-tricks.com/can-we-prevent-css-caching/

may be send the time stamp as a get parameter as well.

EG:

http://mysite.com/theme/dir/style.css?id=24033957203712

where 24033957203712 is the time stamp.

The browser cache is based on the expiration time set in the response header or browser setting.

There are timing when we are deploying CSS and wish to push them to the user immediately, but are unable to version the css file as referenced from asp file (such as style.css?v2).

In these cases, we can add the changed/new style classes in the particular CSS file alone to the Head section of the aspx file. It will not create any style overrides and fix the issue.