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>
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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
Method 2
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>
Method 3
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/
Method 4
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.
Method 5
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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0