How to ensure your CSS edits display properly

Why are my edited CSS files not showing the edits?

I'm sure that this is a problem which afflicts most browsers you spend ages trying to figure out why your CSS file does not display. The reason is, of course, that the browser caches CSS and JavaScript 'include' files locally in a temporary directory - to save multiple return journeys to the server, which helps page loading time on subsequent requests.

This even happens on localhost, which is frustrating for developers as we are constantly making changes - that don't show up. It can drive you crazy debugging styles.

During development the only reliable way to introduce changes to CSS styling is to do it inline, either on the page or inside a tag style property. Then update an include file.

Eventually though you will want your CSS file changes to be visible.

Here is the fix

On chrome click and hold the refresh icon - chose hard refresh clear cache

Firefox: If you are online you will see a padlock on the browser URL bar which will drop down a menu that allows you to clear cookies for that one site. However, if you're on localhost the hack is slightly more complex.

You must open settings go to privacy and security Scroll down the page and you'll find (hidden below the fold) an option to clear cookies and site data when you click clear data you will be presented with the option of clearing all Cookies and site data or cashed web content

You must be very careful to uncheck the cookies and site data option otherwise all your cookies for all your browsing will disappear - and you will have to log into all those other websites yet again!

The cached web content option just removes what your browser is doing at the moment.

Return to your page reload the page and you will find those pesky CSS edits will show up.

Conclusion

Don't let the browser cache drive you crazy!