{"id":40,"date":"2020-07-26T16:27:01","date_gmt":"2020-07-26T16:27:01","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=40"},"modified":"2020-09-06T15:03:01","modified_gmt":"2020-09-06T15:03:01","slug":"busting-browser-cache-by-css-versioning","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/busting-browser-cache-by-css-versioning\/","title":{"rendered":"Busting Browser Cache by CSS Versioning"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/09\/bust-cache-by-css-versioning-1-1024x576.jpg\" alt=\"Busting Browser Cache by CSS Versioning\" class=\"wp-image-864\" srcset=\"https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/09\/bust-cache-by-css-versioning-1-1024x576.jpg 1024w, https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/09\/bust-cache-by-css-versioning-1-300x169.jpg 300w, https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/09\/bust-cache-by-css-versioning-1-768x432.jpg 768w, https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/09\/bust-cache-by-css-versioning-1-710x399.jpg 710w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you are tired of pressing &#8216;ctrl+f5&#8217; every time you update your site\u2019s CSS (or JS) to see the changes, then here is a good idea to fool and force browsers to download the latest version of the updated files instead of using cached one. If you don\u2019t then your visitor\u2019s browser may well load a cached version of the CSS or JS which can result in outdated look (and broken pages).<\/p>\n\n\n\n<p>To prevent the above scenario, we can apply versioning to css (or js) files which are frequently updated. One simple way I like to do this by appending a dynamic query string to the link.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>\/\/ Get Current Datetime\n$version=date(\"dmYHis\"); \n&lt;link rel=\"stylesheet\" href=\"\/path\/to\/style.css?v=\"&lt;?php echo $version ?>\" type=\"text\/css\"\/>\n&lt;script src=\"\/path\/to\/script.js?v=\"&lt;?php echo $version ?>\" type=\"text\/javascript\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>\n\nBusting the cache is also really useful when you are pushing out changes for review (you won\u2019t have to ask your reviewers to refresh or press &#8216;ctrl+f5 &#8216;or clear their cache to see the changes).\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are tired of pressing &#8216;ctrl+f5&#8217; every time you update your site\u2019s CSS (or JS) to see the changes, then here is a good idea to fool and force&nbsp;[ &hellip; ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,42],"tags":[32,31,33,29,34],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-css","category-php","tag-clear-css-cache-javascript","tag-clear-css-cache-php","tag-css-cache-busting","tag-css-versioning","tag-how-to-prevent-css-caching-on-a-web-page","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":11,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":865,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions\/865"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}