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..!!

ElamParithi Arul is Editor At Large and the Owner of Tech Twinklers. He is the founder of the Parithi Network. Basically being a 23 year old Whizkid, He's A Mac User. An Adventurer. A Tech Enthusiast, An Avid PC and PlayStation Gamer, A Hobbyist Photographer and a Nature Lover. His basic interests are developing Websites, Apps and coming up with various creative ideas for a better vibrant tomorrow. He is a professional blogger for about 4 years and writes blogs regarding technology, gaming, and about his own personal life. You can follow him on Twitter at @Parithi

You may also like

LEAVE A COMMENT

Welcome To TechTwinklers!

Tech Twinklers is a Tech Blog run by Students with an aspiring enthusiasm in Technology and Gaming. This Blog will bring News about the Modern Technology, Educational Advances, Campus Interviews, etc. So make sure you subscribe to our blog because we don't want you to miss a thing that is posted here..

We're on Facebook!