发表新帖
发表新帖

CSS file not refreshing in browser

前端 未结
关注
15 1271
旧时难觅i
旧时难觅i 2020-11-29 04:55

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

相关标签:
15条回答
  • 走了就别回头了
    2020-11-29 05:32

    A good way to force your CSS to reload is to:

    <link href='styles.css?version=1' rel='stylesheet'></link>

    And then just increment the version number as you change your CSS. The browser will then obey. I believe StackOverflow uses this technique.

    0 讨论(0)
  • 孤街浪徒
    2020-11-29 05:33

    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.

    <link rel="stylesheet" type="text/css" href="styles.css?version=51">
    0 讨论(0)
  • 猫巷女王i
    2020-11-29 05:36

    Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> 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.

    <link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">

    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):

    <link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
    0 讨论(0)
  • 心在旅途
    2020-11-29 05:39

    The reason this occurs is because the file is stored in the "cache" 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)

    0 讨论(0)
  • 自闭症患者
    2020-11-29 05:43

    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("main.css");
$CSS_LINK  = "main.css?version=$FILE_TIME";

    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.

    0 讨论(0)
  • 一整个雨季
    2020-11-29 05:44

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题