No other browser except firefox is loading immediate changes in CSS file

Question

I am making a website using PHP. While completing it I tested it on Firefox only. Today when I tried to test it on other browsers (Opera, Chrome & Internet Explorer) I found some problems in my CSS. When I made changes to my CSS file, none of these browsers except Firefox is showing changes made in the CSS file.

<link rel="stylesheet" type="text/css" href="style.css" media="screen">

So far what I have tried after Googling for a long time is

• Cleared Cache memory of browser
• Put "?v='+1 everytime'" at end of style.css
• Refresh the webpage using 'ctrl+f5', 'ctrl+r' etc.

Any help ? Thanks in advance....

Answer 1

This is intended behaviour by most browsers. Whenever you try to load a page, if any resources are already present in browsers' cache, they will be loaded from there.

You have two options:

1. disable browser cache for your preferred browser (some browsers allow you to disable cache for specific domains)
2. make your HTML always refresh the resource, by appending a non-repeating parameter to the requested resource file name. I personally use: ?v=1482939287 (where 1482939287 is the timestamp). This will make the browser always refresh the resource, as it will ask for a version that's not existing in browser cache.
   Example: <link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">

---

Update: You can flush the cache for a webpage by opening Dev Console (Ctrl+Shift +I), right-click-ing on refresh page arrow (while Dev Console is open) and selecting Empty Cache and Hard Reload. That is emptying the cache.

You can also disable it, as suggested above, by opening Dev Console, going to Network tab and checking "Disable Cache" checkbox right under it. Please note that cache is only disabled while your developer console is open.

Answer 2

There are several solutions for this. I will list you some of my options below.

Unique identifiers to files though parameters

Adding a parameter behind the file as a kind of a version number may help. In php you can use time() to get the current timestamp or unique() to get a unique string.

Cache settings server side

You can also find some .htaccess settings for caching specific file types on the server side. For performance reasons you should do this for production, too.

Browser Dev Tools

Another way is to open your Browser Dev Tools (mostly F12) while developing. Most browsers like Chrome and FF provides a cacheless enviroment when your Browser Dev Tools are open. As a example in chrome you can disable caching explicit.

My suggestion

Or even better use Task Runner to accomplish this. The keyword to search for is 'cache bust'. As example you can run gulp for concat, versioning, and let it connect the right css files you want to. This is specially suggested for development phase.

regards Gkiokan