CSS file not refreshing in browser

Question

When I make any changes to my CSS file  the changes are not reflected in the browser  How can I fix this

User · Accepted Answer

For weeks  Try opening the style sheet itself  by entering its address into the browser s address bar  and pressing F5  If it still doesn t refresh  your problem lies elsewhere   If you update a style sheet and want to make sure it gets refreshed in every visitor s cache  a very popular method to do that is to add a version number as a GET parameter  That way  the style sheet gets refreshed when necessary  but not more often than that    lt link rel  stylesheet  type  text css  href  styles css version 51  gt

User · Answer

I had this issue  I was scratching my head for the best part of two days   Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on   CloudFlare caches your JavaScript and CSS  Turned on development mode and BAM    Seriously    two whole days

User · Answer

Since I found this thread having the same problem  10 YEARS later  I ll add my own solution too   I use PHP most of the time  and rather than requiring the user to press unusual buttons to refresh the page  or myself to remember to bump a version number embedded in a link  I used the filemtime   function to get the modification time of the css file  as a unix timestamp   and then use THAT number as the parameter   FILE TIME   filemtime  quot main css quot     CSS LINK     quot main css version  FILE TIME quot    While results in a URL like  http   example com blah main css version 1602937140  This entirely disables caching  since every time the page is refreshed  it will believe it needs to grab the CSS file again  changed or not    but that s far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn t right   You can always remove it from a production server  If you are using plain HTML  you could probably engineer a javascript wrapper or some such  but that s probably more trouble than it s worth

User · Answer

The Ctrl   F5 solusion didn t work for me in Chrome   But I found How to Clear Chrome Cache for Specific Website Only  3 Steps          As the page is loaded  open Chrome Developer Tools  Right-Click   Inspect  or  Menu   More Tools   Developer Tools    Next  go to the Refresh button in Chrome browser  and Right-Click the Refresh button    Select  Empty Cache and Hard Refresh        Hope this answer helps someone

User · Answer

The fix is called  hard refresh  http   en wikipedia org wiki Wikipedia Bypass your cache  In most Windows and Linux browsers  Hold down Ctrl and press F5   In Apple Safari  Hold down   Shift and click the Reload toolbar button   In Chrome and Firefox for Mac  Hold down both   Cmd   Shift and press R

User · Answer

The reason this occurs is because the file is stored in the  quot cache quot  of the browser     so there is no need for the browser to request the sheet again  This occurs for most files that your HTML links to     whether they re CDNs or on your server  for example  a stylesheet  A hard refresh will reload the page and send new GET requests to the server  and to external b if needed   You can also empty the caches in most browsers with the following keyboard shortcuts  Safari  Cmd Alt e Chrome and Edge  Shift Cmd Delete  Mac  and Ctrl Shift Del  Windows

User · Answer

If you re using ASP NET web forms  make sure that you are using the right theme     I just spent about an hour trying to solve this

User · Answer

This sounds like your browser is caching your css  If you are using Firefox  try loading your page using Shift-Reload

User · Answer

Having this problem before I found out my own lazy solution  based on other people suggestions   It should be helpful if your  lt head gt  contents go through php interpreter    To force downloading file every time you make changes to it  you could add file byte size of this file after question mark sign at the end    lt link rel  stylesheet  type  text css  href  styles css  lt   filesize  styles css     gt   gt    EDIT  As suggested in comments  filemtime   is actually a better solution as long as your files have properly updated modify time  I  myself  have experienced such issues in the past  while working with remote files     lt link rel  stylesheet  type  text css  href  styles css  lt   filemtime  styles css     gt   gt

User · Answer

Is this a local custom CSS file   Is this your website   Maybe you should clear your cache   Also the last CSS declaration takes precedence

User · Answer

I always use Ctrl Shift F5 out of habit  it should force a full-refresh including by-passing any http proxies you may be going through

User · Answer

Have you tried renaming the new version of your CSS to CSSv2 css and then directing your page to use that  If that solves the stale-file issue  then you re just experiencing non-refreshing files  If not  you ve got bigger issues

User · Answer

I faced the same problem  Renaming the file worked for me

User · Answer

Do Shift F5 in Windows  The cache really frustrates in this kind of stuff

User · Answer

A good way to force your CSS to reload is to    lt link href  styles css version 1  rel  stylesheet  gt  lt  link gt    And then just increment the version number as you change your CSS   The browser will then obey   I believe StackOverflow uses this technique

[css] CSS file not refreshing in browser

Examples related to css