Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS file not refreshing in browser

Tags:

css

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

like image 407
jbcedge Avatar asked Feb 14 '10 22:02

jbcedge


People also ask

Why is my CSS not updating on my website?

Browser Cache If you are adding/modifying in-line CSS or JavaScript and not seeing the changes reflected in the HTML source, the page is likely being cached. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders.

How do I force a browser to refresh CSS?

Anytime you make changes to CSS, JavaScript and are viewing the page you've updated - you will see this concern. You can force a refresh by pressing CTRL+F5 on the browser and that will get the latest version.

Why is my stylesheet not updating?

Most probably the file is just being cached by the server. You could either disable cache (but remember to enable it when the site goes live), or modify href of your link tag, so the server will not load it from cache.

Why is my CSS not working in Chrome?

Make sure that your CSS and HTM/HTML files use the same encoding ! If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well. IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.


2 Answers

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.

like image 161
RainCast Avatar answered Sep 24 '22 08:09

RainCast


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">
like image 43
Pekka Avatar answered Sep 22 '22 08:09

Pekka