CSS in App_Theme folder gets Cached in Browser

Question

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

Answer 1

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/

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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.