Dynamically load CSS ?

[Jon_King]

I can change css 50 times in a week during updates and staff critiques. There is often confusion with customers when they want to see changes and do not see them because of browser and cdn caching of previous files. Is it a "good" solution to load CSS files dynamically using js to solve this?

[Fotiman]

Using JavaScript to load CSS is not a good solution. There's a good article at CSS-Tricks about cache busting:
[css-tricks.com...]

One suggestion is to append version info as a query string parameter for the CSS:
<link rel="stylesheet" href="style.css?v=3.4.1">

Then when you update the style.css file, change the link in your HTML to point to the new version:
<link rel="stylesheet" href="style.css?v=3.4.2">

[Jon_King]

This would require changing and uploading many html pages just to see a tiny change. The senerio plays out like this... a customer wants to change a Heading size by 2px... I then would have to upload maybe 100's of changed pages or more. And may well play into SEO as changed pages. I'm not thinking this is going to work for me unless I'm missing something?

[Fotiman]

Well, there are some other suggestions in that article you could try.

One question: are you serving static HTML files, or are you running any sort of server-side framework (like PHP, or .Net)? If you're running a server-side framework, then put your link to the main stylesheet in some sort of shared content, so you only need to change it in once place. If not... well, you might want to reconsider that, as it sounds like you've got a large monolithic project (hundreds of static files all with duplicating code).

[lucy24]

If this is about testing, why don't you temporarily set the CSS to an extremely short expiration time-- or none at all? It's what I do on my test site so I don't have to keep hitting Reload.

Exact wording will, of course, depend on your server type, and even then there are different approaches. Mine just says
ExpiresByType text/php "access"
and so on. If that seems like overkill, set it for something like access plus five minutes.

[Jon_King]

After scouring posts here... jdMorgan posted an htaccess solution to a similar problem that another member was having and seems to work perfectly for me:

Header set Cache-Control: "no-cache, must-revalidate"

I don't know of a downside?

[lucy24]

I don't know of a downside?

The downside is that if someone looks at three pages their browser will request the stylesheet three times. But in a test environment, that's just something you have to live with. Or use one of the plethora of caching/expiration options to set a ridiculously short (but non-zero) expiration time.

[raseone]

Here is a good page, direct from the source. Very thorough & easy to grasp.
[httpd.apache.org...]

I agree with Lucy24's solution since I am in favor of never assuming that a cached code file is still valid.

I have no idea how google might react to that decision. They seem to prefer long cache times. Certainly longer caches are good for images & bigger files & for things you know wont change often. If there is actually a CDN there is probably a control to flush it somewhere.