2020 April 12 Archive - EXEIdeas – Let's Your Mind Rock

When you’re developing a website or a web page then there may be a lot of little or bigger changes that you do in CSS file and when want to see it rendered live on web page then your simple refresh will not work and will continue to see your old design because of new browsers content caching algorithm to load the same page fast again but the problem is that the code in CSS file has been changed that will be ignored by browser due to same CSS file name.Finally, the question is that Are you in development mode where you edit the CSS code then check it in the browser again and again and then you do not see changes until you clear browser cache or hard reload then here is the way to know that how to prevent CSS and content caching to browsers using plain HTML or automatic PHP code? Can we solve this? Is there some way to prevent CSS caching?Well, the answer is simple you have to change the CSS file name again and again to ensure the browser that new CSS file is attached but again that is another lengthy process especially when you are in quick development mode then here is another hack to diver the browser automatically by adding some new parameter in your CSS file link every time like timestamp to ensure that this is the updated file and is a common practice already with CSS version control – only this time you use a timestamp to ensure the CSS is updated on a refresh.Timestamping Your CSS:There is a trick that comes from the land of JavaScript programmers. To prevent the caching of their scripts, they add a timestamp to the end of the src attribute. So here is the code using PHP. " />Which results in this: Alter that date format as needed. You might wanna skip spaces.So thee upper solution is fine but what if you will launch it to the client or open it for the public? what if you send that same link to your client, and the keep loading the same CSS file again and again then this will affect badly on your website loading time because you are not changing still on every new reload the CSS file loads itself again. So for this, you have to follow the below code by adding the version parameter in front of CSS file while launching in public.Versioning Your CSS:Normally when you call your CSS you would add a faux query to your CSS to note the version and to ensure that if you update the version a repeat visitor will get the new CSS. For example,style.css?version=3.2If someone visits your website, style.css is cached by their browser. If they return and the query has changed, for example to version=3.3 style.css is downloaded again. And then that will be cached until you update the next version in the CSS URL.Locally in development, breaking cache every page load might be OK, but modern development tools like Chrome’s web inspector can turn off caching anyway. ANd for final releasing, the version control is the best way to update all user’s CSS cache.