Unable to cache style sheet

[helveticus]

This really puzzles me. I have an application with a single style
sheet (30KB) and a series of js files, all declared in the header
section of the master page the standard way:
<link href="css/style1.css" rel="stylesheet" type="text/css"
media="screen"/>
<script src="js/common.js" type="text/javascript"></script
....

The css sheet is reloaded whenever a new page is accessed while the js
files remain cached. I experimented with downsizing the css file,
moving the css file in the root directoy to no avail. Obviously, I am
missing something here. How can I declaratively assign an expiration
date to the CSS file to prevent the browser from issuing reload
requests? TIA for any hints. (ASP.NET 3.5)

 

[helveticus]

Addendum. After noticing that the "Personal web site" starter kit
caches css files, I tried to duplicate this approach by creating a
subfolder (Theme1) in App_Themes and referencing it in web.config:
<pages styleSheetTheme="Theme1">.. </pages>

This improves rendering somewhat. Using YSlow, I noticed that all css/
js files have an expiration date and an Etag whenever the
ScriptManager is disabled. These attributes disappear when the
Scriptmanager is turned on. The css request issue persists in both
cases, however.

Thanks for sharing some ideas.

 

[Göran Andersson]

This really puzzles me. I have an application with a single style
sheet (30KB) and a series of js files, all declared in the header
section of the master page the standard way:
<link href="css/style1.css" rel="stylesheet" type="text/css"
media="screen"/>
<script src="js/common.js" type="text/javascript"></script
...

The css sheet is reloaded whenever a new page is accessed while the js
files remain cached. I experimented with downsizing the css file,
moving the css file in the root directoy to no avail. Obviously, I am
missing something here. How can I declaratively assign an expiration
date to the CSS file to prevent the browser from issuing reload
requests? TIA for any hints. (ASP.NET 3.5)

I think that this is an issue with your specific instance of the web
browser, rather than an issue with the web application.

Normally css files are cached. Sometimes even more than you like, as you
have to rename the css file when you change it, to be sure that everyone
gets the new version.

 

[helveticus]

Thanks Göran.

I don't believe the problem is strictly browser related (although it
logically should). As mentioned above, a number of apps hosted on my
machine do cache stylesheet files in browser memory. No subsequent
css requests are issued when swapping pages. The problem is: I can't
see why it works in certain cases and fails in others..

I've narrowed the problem to css files. If a "good" ie cacheable css
file is imported in the App_Themes subfolder, the css file is cached.
As soon as I insert new css statements, the file becomes "bad" ie. non-
cacheable. This drives me nuts! I tried flushing the buffer cache,
changing names, etc. to no avail.

In php land, there seems to be a way to selectively enforce component
cacheability. For instance, I gleaned the following snippet from the
webmasterworld. php forum:
http://www.webmasterworld.com/apache/3659750.htm

This snippet apparently fully enforces cacheability of all css, gif,
png, etc. components. How can this be reproduced in asp.net? TIA for
any suggestions.

# Enable mod_expires
ExpiresActive on
# For media, css, pdf, and external Jscript files
<FilesMatch "\.(ico¦pdf¦flv¦jpe?g¦png¦gif¦js¦css¦swf)$">
# set 30-day cacheable (longer is almost useless)
ExpiresDefault A2592000
# Don't set any caching restrictions
Header unset Cache-Control
</FilesMatch>