Force CSS Update In Browser

Author	« Topic »
PieMan Advanced Member United Kingdom 272 Posts Pre-sales questions only (More Details...)	Posted - 06/05/2019 : 05:59:44 When changing some CSS in style.css, I wasn't seeing the updates on my web page when refreshed, even if I pressed Ctrl + F5. Using the code below forces the CSS to update when Ctrl +F5 is used to refresh. <link rel="stylesheet" type="text/css" href="../css/style.css?ts=<?=time()?>" /> Regards Mike Using ECT since 2003.
insight ECT Moderator USA 4479 Posts	Posted - 08/03/2019 : 14:44:34 That'a good cache busting idea for development, I do something similar. But a word of caution; you don't want that on your production site or you'll lose all the performance benefits of having your css cached on the first page load, forcing the browser to fetch the same css file over and over again, for every new page visit. For production you might just want to use a version number or some such like this <link rel="stylesheet" href="css/style.css?v=99"> and just increment that number when you actually push changes to production. Peter Professional ecommerce web hosting services Shared hosting Windows & Linux \| Dedicated servers \| Domains \| SSL Ecommerce Templates specialists since 2003 https://servelink.com
atlend Advanced Member USA 322 Posts	Posted - 04/21/2021 : 06:56:58 A little better way to do this in PHP is to get the file modification time of the specific file versus just the current time(). Downside is that I am not sure how to do a similar thing if hosted somewhere else like AWS because the script is run server side, but seems to work well for me when hosting on the same server. <link rel="stylesheet" href="css/style.css?<?= date('U',filemtime('css/style.css')) ?>">
ITZAP Ecommerce Template Guru Australia 1017 Posts	Posted - 04/21/2021 : 23:43:51 Another easy solution is to ... 1) Visit your website. 2) Right-click and select "View page source" which opens the raw HTML code in another Tab. 3) Browse the code in the <head> section to find the line which loads the CSS file in question ... for example: <link href="css/style.css" rel="stylesheet" type="text/css" /> 4) Now click on that href link to open the "css/style.css" file in another Tab, which will thus refresh your browser cache to the latest version of that file. 5) Close both those open Tabs and return to your website page. 6) Press CTRL+F5 to refresh the page and all will be good ! Gary
	« Topic »