Browsers Won't Read Updated CSS

Browsers won't read updated CSS

Once I saw in a code the use of timestamp to force the browser to download the css and js files every request, that way:

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />

The ?ts=123456789 forces the browser to reload the file whenever the number is different from the previous one.

So I adopted the idea, but instead of timestamp of now, I use timestamp of the modification of file style.css; so it's cached in the browser until be modified on the server:

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />

CSS file not refreshing in browser

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">

Why is my CSS not updating in web browser?

Try a "hard" refresh of your browser...

http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

The idea is to bypass your browser's cache. Different browsers handle this differently, and this wiki article has a nice walk-through for each major browser on how to do this.

Alternatively, you could clear your browser's cache, which is also covered by the wiki article.

Can't see CSS style changes in Browser

Your browser is caching the CSS file. You can try going to the original link and doing Ctrl/Cmd + R (Ctrl/Cmd + Shift + R, hard reload) and see if that clears it.

The best way is to disable the cache using the browser's developer tools.

If you are on Chrome, click the Menu icon > More Tools > Developer Tools and click the gear icon. You should see an option to disable cache. For Firefox, click the Menu icon > Developer and click on Toggle Tools. Then click the gear and check disable cache.

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

CSS not working in Chrome

Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:

Problem:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />

Working:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />

Try removing the "media" attribute and it should work fine.

More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.

---

Related Topics