Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS in App_Theme folder gets Cached in Browser

Tags:

css

asp.net

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>
like image 453
dhinesh Avatar asked Dec 23 '10 09:12

dhinesh


People also ask

How do I stop CSS from being cached?

All you need to do is add a version URL parameter to the end of your href like so ? version=1 . The browser will notice the new version and stop caching the stylesheet. All changes in your stylesheet will be reflected in your browser.

Is CSS cached in browser?

When a browser caches a CSS stylesheet, what it's doing is getting that stylesheet from the server once, saving it, and then serving its own saved version of that stylesheet to the user anytime the page being loaded requests it.

How long are CSS files cached?

How does Caching Work? When the browser parses this HTML, it identifies that a CSS resource needs to load from https://www.example.com/app.css. The browser issues a request to the server for this file, the server returns the file and also tells the browser to cache it for 30 days.

How do I force a browser to reload cached CSS JS files?

css files. That is the reason those new changes will not appear to the user. The user either has to clear the browser cookie & reload the page or else he or she has to do a hard refresh of the page by pressing Ctrl+F5.


2 Answers

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

like image 145
Rippo Avatar answered Sep 28 '22 08:09

Rippo


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>
like image 38
Doug Domeny Avatar answered Sep 28 '22 07:09

Doug Domeny