How to Fix Browsers Not Refreshing CSS Files
Our browsers can be unfriendly when we're updating a site, because the CSS doesn't refresh on each change. Clearing the cache doesn't work. This does:
Try adding a query string after your CSS filename in your HTML's head section.
<link href="main.css?v=1" rel="stylesheet">
You'll have to change the query string every time you make a change. Remove this when you move the updates to production. I like to use ?v=1 as a versioning system on websites; it'll make every person download a fresh new copy on redesigns.
Want to automate changing the query string on changes?
Try a JavaScript or PHP random number generator! This is the PHP I'm using on my sites now:
<link rel="stylesheet" href="/css/main.min.css?v=1<?php if ($_SERVER["SERVER_NAME"] == "localhost") print $refresh ?>" />
This checks if you're using a local or production environment. If you're updating files on localhost (your computer), it'll generate a random integer to add as a query string, which forces CSS refreshes. The if statement makes sure this doesn't happen on production, where you'd want to just update the "v" version.
Is there a better way to do this, world?