How to : Force web browser to load the updated CSS
Newbie web masters, take note.
Whenever you update your site design, you make changes to your CSS files and might be hearing feedbacks from your visitors that they are facing design issues when they first view your website. This is because the browser doesn’t update the cached CSS and runs the page with the previously downloaded version of the CSS. You might force the browser to update the CSS every time by specifying the no-cache attribute in the <meta> but that would take out the whole idea of caching. Another smart way to update the CSS is to specify a random number to your CSS file, through a get variable. This might tell the browser that the CSS file has been changed on the server and notify it to re-cache a fresh copy of it. You can do this by :
<link href="styles.css?random=<?php echo "[enter random number here]";?> rel="stylesheet" type="text/css"/>
This would require you to update the random number on your code every time you makes changes to your CSS/JS files. To make things even simpler, I found a solution from this site where we can dynamically pass value to the random variable based on the date/time at which the file has been updated.
<link href="styles.css?random=<?php echo(filemtime("style.css"));?> rel="stylesheet" type="text/css"/>
Happy Web Designing..!!