We web developers often come across a scenario where we make a major change in the CSS values and the site is totally damaged for the viewer due to a broken / cached css. This becomes very crucial when the change involves update of both the css file contents and a change in the structure of the front end.
To handle such a scenario, specially when you are expecting to update the css too often, the trick below helps a lot.
Instead of calling the css using
<link href="/theme/public.css" rel="stylesheet" type="text/css">
write the call in a php file called css.php (You can use any other name and extension)
Paste the css call in the php file and modify the name of called css to something unique. I prefer adding a yymmdd or v1,v2 etc
<link href="/theme/public-190104.css" rel="stylesheet" type="text/css">
Now include the css.php in the page at the place where you would have called the css.
Done.
Now whenever you make a change in the css file and want the visitors to be served with the updated css and not the one cached in their system, simply rename the css file to some new name and make appropriate changes in the css.php file too.
Upload both the renamed css file and css.php
Any visitor to the site after this point will be served with the new css.
Cached css can also be overwritten without renaming if the visitor goes for a hard refresh using Ctrl+F5, but that is not practical and not possible to be conveyed to every visitor. Further, mobile browsers do not provide the facility of Hard Refresh, so this trick comes handy when you face issues after updating the css of your website.
To handle such a scenario, specially when you are expecting to update the css too often, the trick below helps a lot.
Instead of calling the css using
<link href="/theme/public.css" rel="stylesheet" type="text/css">
write the call in a php file called css.php (You can use any other name and extension)
Paste the css call in the php file and modify the name of called css to something unique. I prefer adding a yymmdd or v1,v2 etc
<link href="/theme/public-190104.css" rel="stylesheet" type="text/css">
Now include the css.php in the page at the place where you would have called the css.
Done.
Now whenever you make a change in the css file and want the visitors to be served with the updated css and not the one cached in their system, simply rename the css file to some new name and make appropriate changes in the css.php file too.
Upload both the renamed css file and css.php
Any visitor to the site after this point will be served with the new css.
Cached css can also be overwritten without renaming if the visitor goes for a hard refresh using Ctrl+F5, but that is not practical and not possible to be conveyed to every visitor. Further, mobile browsers do not provide the facility of Hard Refresh, so this trick comes handy when you face issues after updating the css of your website.
Comments