How to force a browser to show the latest changes to a CSS file?.

Question

I made some changes on a CSS file on a PHP site.

The changes do not show up in any browser I test it on until I hold down the CTRL key and click the browser's REFRESH button.

This means that most users are not going to seem the changes I made.

How can I force browsers to show the changes to CSS files immediately (without renaming the CSS file)?

Answer 1

It depends on your web server. Apache can be set to configure the maximum cache time for a given file, and I'm pretty sure IIS can do the same.

Alternatively, a common solution to FORCE uncaching is to version your CSS file names (Rails does this internally). For example, style.css becomes style-10162009.css

Answer 2

You can't.

If the new CSS file has the same name as the old the browser will use the cached file. This means that you've either got to:

1. use some form of `css_filename.css?version_number`
2. or, use another name for the new file
3. or, do as you're doing, and use ctrl+F5

Answer 3

Add a unique string as query string when linking the stylesheet. Here's an example

<link href="style.css?<?=filemtime("style.css")?>" rel="stylesheet" type="text/css" />