Reloading javascript and CSS, best practices: PHP

Question

This is more of a best practices question, but it's very important to me because it caused me many times to think that my js or css modifications weren't working.

I work with PHP and have my CSS and JS in separate files. Sometimes when I hit the circular Reload button, my changes don't kick in. I use either Reload or re-hit Enter after the URL. Sometimes neither works, and I have to do crazy things like restarting my browser for caches to clear.

To test whether I'm working with the old or new JS for example, I use different alert messages, and that's when I find out it's still using the old (pre-recent-change) JS. Same for CSS, I use different color borders, etc. to know if it's picking up the new. Needless to say, I'm sure there are better practices than this :)

score 1 · Accepted Answer · answered Oct 06 '09 at 05:29

1

Ctrl-Shift-R or Ctrl-F5 ( Cmd + F5 mac equivalent? ) would do a hard refresh and force the user agent to download everything from scratch.

answered Oct 06 '09 at 05:29

meder omuraliev

183,342
71
393
434

Thanks for the answer meder. What's the difference between the two, if any? Just curious. Thanks. – Chris Oct 06 '09 at 05:33
Ctrl-Shift-R is more convenient, however I *think* IE just accepts CTRL-F5 - I could be wrong. – meder omuraliev Oct 06 '09 at 05:48

score 1 · Answer 2 · answered Oct 06 '09 at 05:36

You can either force re-downloading from the server when hitting reload, using something like Ctrl+F5 on Firefox (to indicate the browser it must re-ask the files from the server, instead of using the version it has in cache on your machine), or de-activating caching in your browser (at least, when developping CSS/JS related stuff).

A great tool for the de-activation of the caching thing is the Firefox web-developper extension : it provides you with a toolbar that gives quick access to several useful options when doing frontend development.

score 1 · Answer 3 · answered Oct 06 '09 at 05:38

1

For development you can add a random number to the end of the URL of your CSS & JS files. Something like:

<script type="text/javascript" src="/myscript.js?<?php echo rand(1, 200000);?>"></script>

Or

<link rel="stylesheet" href="/styles.css?<?php echo rand(1, 200000);?>">

Just don't do this on your live site, otherwise your users will download the files again on every request, making your site slower.

answered Oct 06 '09 at 05:38

Ryan Doherty

38,580
4
56
63

Thanks for the answer. Other than it eliminates the manual step of hitting Ctrl+F5, does this method have any other advantages over the Ctrl+F5 others have suggested? I ask because I'd rather go the Ctrl+F5 way when needed than to add code that I need to remove before hitting the production environment. – Chris Oct 06 '09 at 06:08
I can't think of any other advantages. You can add a check to see if the server is production or not and add the random number or not. Then you don't have to worry about it :) – Ryan Doherty Oct 06 '09 at 15:31

score 0 · Answer 4 · answered Oct 06 '09 at 05:43

0

Shift Click the reload button.

answered Oct 06 '09 at 05:43

Corey Hart

10,316
9
41
47

Reloading javascript and CSS, best practices: PHP

4 Answers4