When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?
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.
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.
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.
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.
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.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With