Welcome to WebmasterWorld Guest from 18.204.56.104

Forum Moderators: not2easy

Message Too Old, No Replies

Dynamically load CSS ?

     
12:50 pm on Dec 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts:2139
votes: 1


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?
2:20 pm on Dec 4, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


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">
2:42 pm on Dec 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts:2139
votes: 1


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?
3:10 pm on Dec 4, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


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).
10:16 pm on Dec 4, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15941
votes: 889


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.
8:20 pm on Dec 5, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts:2139
votes: 1


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?
1:33 am on Dec 6, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15941
votes: 889


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.
3:19 am on Dec 20, 2015 (gmt 0)

Junior Member

joined:Aug 3, 2013
posts: 113
votes: 32


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.