76

When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?

Jack Moody
  • 1,590
  • 3
  • 21
  • 38
jbcedge
  • 18,965
  • 28
  • 68
  • 89
  • 1
    I am faced with the same problem. The only way I found to fix this was to rename the file. No matter what I tried, Firefox kept reloading the old file. Only after a rename did I see the correct css. – AntonioCS Oct 03 '13 at 11:58
  • 3
    Another quick way i found that works when I test thing is open the developer console and then go to the settings and click the check box "Disable cache (while DevTools is open)" - then i can test code with the console and know that I always see the recent changes – TrojanMorse Oct 23 '15 at 17:49
  • 1
    [**>> THE SOLUTION <<**](https://stackoverflow.com/a/28236652/1654265). You're welcome. – Andrea Ligios Sep 20 '18 at 10:53

15 Answers15

109

The fix is called "hard refresh" http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

In most Windows and Linux browsers: Hold down Ctrl and press F5.

In Apple Safari: Hold down ⇧ Shift and click the Reload toolbar button.

In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.

Andreas
  • 5,393
  • 9
  • 44
  • 53
RainCast
  • 4,134
  • 7
  • 33
  • 47
88

Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.

If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.

<link rel="stylesheet" type="text/css" href="styles.css?version=51">
Dharman
  • 30,962
  • 25
  • 85
  • 135
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • With this approach does it require renaming the stylesheet to match the href syntax each time before each upload?? – noy-hadar Jul 26 '14 at 15:53
  • 2
    @noy-hadar No, changing the "version" parameter to a different value every time will do the trick. – Pekka Jul 26 '14 at 19:30
26

A good way to force your CSS to reload is to:

<link href='styles.css?version=1' rel='stylesheet'></link>

And then just increment the version number as you change your CSS. The browser will then obey. I believe Stack Overflow uses this technique.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Dave Markle
  • 95,573
  • 20
  • 147
  • 170
  • 1
    If you don't force it with a version, how long will it stay in cache for otherwise? I had the issue of the css not refreshing all changes only some, but this was on the PC used to develop the css changes. So I am thinking all other users should have their css file recached due to the dramatic change (I redesigned user interface from an older app). – eaglei22 May 14 '18 at 12:41
12

I always use Ctrl+Shift+F5 out of habit, it should force a full-refresh including by-passing any http proxies you may be going through.

Matthieu
  • 16,103
  • 10
  • 59
  • 86
mythz
  • 141,670
  • 29
  • 246
  • 390
10

I had this issue. Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on.

CloudFlare caches your JavaScript and CSS. Turned on development mode and BAM!

Dharman
  • 30,962
  • 25
  • 85
  • 135
Mostly
  • 207
  • 2
  • 9
8

Do Shift+F5 in Windows. The cache really frustrates in this kind of stuff

Abhishek Gurjar
  • 7,426
  • 10
  • 37
  • 45
Manoj Mohan
  • 633
  • 5
  • 13
4

The Ctrl + F5 solusion didn't work for me in Chrome.

But I found How to Clear Chrome Cache for Specific Website Only (3 Steps):

  1. As the page is loaded, open Chrome Developer Tools (Right-Click > Inspect) or (Menu > More Tools > Developer Tools)
  2. Next, go to the Refresh button in Chrome browser, and Right-Click the Refresh button.
  3. Select "Empty Cache and Hard Refresh".
Dharman
  • 30,962
  • 25
  • 85
  • 135
Roshna Omer
  • 687
  • 1
  • 11
  • 20
3

This sounds like your browser is caching your css. If you are using Firefox, try loading your page using Shift-Reload.

tangens
  • 39,095
  • 19
  • 120
  • 139
3

Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> contents go through php interpreter.

To force downloading file every time you make changes to it, you could add file byte size of this file after question mark sign at the end.

<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">

EDIT: As suggested in comments, filemtime() is actually a better solution as long as your files have properly updated modify time (I, myself, have experienced such issues in the past, while working with remote files):

<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
Zw1d
  • 41
  • 5
  • Just a note here - your answer uses PHP but the question itself is tagged CSS. Please try to keep your solutions in the scope of the question. – Lix Sep 22 '16 at 14:57
  • Another note - better use filemtime(), because changing "10px" to "45px" in CSS file does not change its size. – alemjerus Feb 12 '18 at 10:24
1

Have you tried renaming the new version of your CSS to CSSv2.css and then directing your page to use that? If that solves the stale-file issue, then you're just experiencing non-refreshing files. If not, you've got bigger issues.

glasnt
  • 2,865
  • 5
  • 35
  • 55
1

If you're using ASP.NET web forms, make sure that you are using the right theme:

enter image description here

I just spent about an hour trying to solve this!

Andy Brown
  • 5,309
  • 4
  • 34
  • 39
1

Since I found this thread having the same problem, 10 YEARS later, I'll add my own solution too. I use PHP most of the time, and rather than requiring the user to press unusual buttons to refresh the page, or myself to remember to bump a version number embedded in a link, I used the filemtime() function to get the modification time of the css file (as a unix timestamp), and then use THAT number as the parameter.

$FILE_TIME = filemtime("main.css");
$CSS_LINK  = "main.css?version=$FILE_TIME";

While results in a URL like:

http://example.com/blah/main.css?version=1602937140

This entirely disables caching, since every time the page is refreshed, it will believe it needs to grab the CSS file again, changed or not... but that's far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn't right. You can always remove it from a production server.

If you are using plain HTML, you could probably engineer a javascript wrapper or some such, but that's probably more trouble than it's worth.

Dread Quixadhal
  • 83
  • 8
0

Is this a local custom CSS file? Is this your website? Maybe you should clear your cache.

Also the last CSS declaration takes precedence.

0

I faced the same problem. Renaming the file worked for me.

TheRadVillager
  • 49
  • 2
  • 7
0

The reason this occurs is because the file is stored in the "cache" of the browser – so there is no need for the browser to request the sheet again. This occurs for most files that your HTML links to – whether they're CDNs or on your server, for example, a stylesheet. A hard refresh will reload the page and send new GET requests to the server (and to external b if needed).

You can also empty the caches in most browsers with the following keyboard shortcuts.

Safari: Cmd+Alt+e

Chrome and Edge: Shift+Cmd+Delete (Mac) and Ctrl+Shift+Del (Windows)

Philipos D.
  • 2,036
  • 1
  • 26
  • 33
monsieuralfonse64
  • 646
  • 6
  • 15