CSS 样式表未更新

Stylesheet not updating

提问by Mihad Aiko

I am creating a website, but when I made changes to the stylesheet on my site, and I refreshed the site, none of the changes were there.

我正在创建一个网站，但是当我更改网站上的样式表并刷新网站时，没有任何更改。

I tried to use the view source tool to check the stylesheet.cssand it isn't updated either. But when I go to the root of my system it is.

我尝试使用查看源工具来检查它stylesheet.css，但它也没有更新。但是当我进入系统的根目录时。

I have to wait at least 20 minutes before I see the update on my site, can anyone tell me why I don't see changes right away? Is something wrong with my browser, computer, or server?

我必须等待至少 20 分钟才能在我的网站上看到更新，谁能告诉我为什么我没有立即看到更改？我的浏览器、计算机或服务器有问题吗？

I also tried deleting my cookies, cache, and history but it still didn't work.

我也尝试删除我的 cookie、缓存和历史记录，但它仍然不起作用。

回答by Sean Vaughn

If your site is not live yet, and you just want to update the stylesheet at your pleased intervals, then use this:

如果您的网站尚未上线，而您只想以您满意的时间间隔更新样式表，请使用以下命令：

Ctrl + F5

This will force your browser to reload and refresh all the resources related to the website's page.

这将强制您的浏览器重新加载和刷新与网站页面相关的所有资源。

So everytime you change something in your stylesheet and you wanna view the new results, use this.

因此，每次您更改样式表中的某些内容并且想要查看新结果时，请使用它。

On Mac OS Chrome use: Command + Shift + R.

在 Mac OS Chrome 上使用：Command + Shift + R。

回答by Bartosz Górski

Most probably the file is just being cached by the server. You could either disable cache (but remember to enable it when the site goes live), or modify hrefof your linktag, so the server will not load it from cache.

该文件很可能只是被服务器缓存。您可以禁用缓存（但请记住在站点上线时启用它），或者修改href您的link标签，这样服务器就不会从缓存中加载它。

If your page is created dynamically by some language like php, you could add some variable at the end of the hrefvalue, like:

如果您的页面是由某种语言（如 php）动态创建的，您可以在href值的末尾添加一些变量，例如：

    <link rel="stylesheet" type="text/css" href="css/yourStyles.css?<?php echo time(); ?>" />

That will add the current timestamp on the end of a file path, so it will always be unique and never loaded from cache.

这将在文件路径的末尾添加当前时间戳，因此它将始终是唯一的并且永远不会从缓存中加载。

If your page is static, you have to manage those variables yourself, so use something like:

如果您的页面是静态的，您必须自己管理这些变量，因此请使用以下内容：

    <link rel="stylesheet" type="text/css" href="css/yourStyles.css?version=1" />

after doing some changes in the file content, change version=1to version=2and so on.

在做文件内容的一些变化，变化之后version=1对version=2等。

If you wish to disable the cache from caching css files, refer to your server type documentation (it's done differently on apache, IIS, nginx etc.) or ask/search for a question on https://serverfault.com/

如果您希望从缓存 css 文件中禁用缓存，请参阅您的服务器类型文档（它在 apache、IIS、nginx 等上的处理方式不同）或在https://serverfault.com/上询问/搜索问题

Assuming IIS - adding the key under with the right settings in the root or the relevant folder does the trick.

假设 IIS - 在根目录或相关文件夹中添加具有正确设置的密钥就可以了。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <caching enabled="false" enableKernelCache="false" /> <!-- This one -->
    </system.webServer>
</configuration>

That said sometimes one still has to recycle the Application Pool to "bump" the CSS. Therefore: Disabling IIS caching alone is not a 100% guaranteed solution.

也就是说，有时仍然需要回收应用程序池来“撞击”CSS。因此：单独禁用 IIS 缓存并不是 100% 有保证的解决方案。

For the browser: There are some notes on fine-grain controlling the local cache on FFover on SuperUserfor the interested.

对于浏览器：有一些关于在SuperUser上对 FF上的本地缓存进行细粒度控制的注意事项，供感兴趣的人使用。

回答by NCal

I had the same problem and it was due to the browser caching the stylesheet. Try refreshing the Cache:

我遇到了同样的问题，这是由于浏览器缓存了样式表。尝试刷新缓存：

    Cmd + Shift + r (on a mac) OR Ctrl + F5 (on windows)

This will do a hard refresh, and should use the new stylesheet that you uploaded to the server.

这将进行硬刷新，并且应该使用您上传到服务器的新样式表。

回答by Marko

Easiest way to see if the file is being cached is to append a query string to the <link />element so that the browser will re-load it.

查看文件是否被缓存的最简单方法是将查询字符串附加到<link />元素，以便浏览器重新加载它。

To do this you can change your stylesheet reference to something like

为此，您可以将样式表引用更改为类似

<link rel="stylesheet" type="text/css" href="/css/stylesheet.css?v=1" />

Note the v=1part. You can update this each time you make a new version to see if it is indeed being cached.

注意v=1部分。您可以在每次制作新版本时更新它以查看它是否确实被缓存。

回答by TomW

This may not have been the OP's problem, but I had the same problem and solved it by flushing then disabling Supercache on my cpanel. Perhaps some other newbies like myself won't know that many hosting providers cache CSS and some other static files, and these cached old versions of CSS files will persist in the cloud for hours after you edit the file on your server. If your site serves up old versions of CSS files after you edit them, and you're certain you've cleared your browser cache, and you don't know whether your host is caching stuff, check that first before you try any other more complicated suggestions.

这可能不是 OP 的问题，但我遇到了同样的问题，并通过在我的 cpanel 上刷新然后禁用 Supercache 来解决它。也许像我这样的其他一些新手不会知道许多托管服务提供商缓存 CSS 和其他一些静态文件，并且这些缓存的旧版本 CSS 文件将在您编辑服务器上的文件后在云中持续数小时。如果您的站点在编辑后提供旧版本的 CSS 文件，并且您确定已经清除了浏览器缓存，并且您不知道您的主机是否正在缓存内容，请在尝试其他任何内容之前先检查一下复杂的建议。

回答by Jonathan

I had a similar problem, made all the more infuriating by simply being very SLOW to update. I couldn't get my changes to take effect while working on the site to save my life (trying all manner of clearing my browser cache and cookies), but if I came back to the site later in the day or opened another browser, there they were.

我有一个类似的问题，只是更新速度非常慢，这让我更加恼火。我在网站上工作以挽救我的生命时无法使我的更改生效（尝试以各种方式清除浏览器缓存和 cookie），但是如果我当天晚些时候返回该网站或打开另一个浏览器，他们是。

I also solved the problem by disabling the Supercacher software at my host's cpanel (Siteground). You can also use the "flush" button for individual directories to test if that's it before disabling.

我还通过在主机的 cpanel (Siteground) 上禁用 Supercacher 软件解决了这个问题。在禁用之前，您还可以使用单个目录的“刷新”按钮来测试是否是这样。

回答by Aarif Nabi Roshangar

This may be a result of your server config, some hosting providers enable "Varnish"on your domain. This caching HTTP reverse proxy, is used to speed up delivery. One could try to disable varnish on the cpanel (assuming that you have one) and check if it was that.

这可能是您的服务器配置的结果，某些托管服务提供商在您的域上启用了“Varnish”。这种缓存 HTTP 反向代理，用于加速交付。可以尝试禁用 cpanel 上的清漆（假设您有清漆）并检查是否是这样。

回答by twobob

In my case, since I could not append a cache busting timestamp to the css url it turned out that I had to manually refresh the application pool in IIS 7.5.7600.

就我而言，由于我无法将缓存破坏时间戳附加到 css url，因此我不得不手动刷新 IIS 7.5.7600 中的应用程序池。

Every other avenue was pursued, right down to disabling the caching entirely for the site and also for the local browser (like ENTIRELY disabled for both), still didn't do the trick. Also "restarting" the website did nothing.

其他所有途径都被采用，直到完全禁用站点和本地浏览器的缓存（例如完全禁用两者），仍然没有成功。同样“重新启动”网站什么也没做。

Same position as me? [Site Name] > "Application Pool" > "Recycle"is your last resort...

和我一样的位置？ [站点名称] > “应用池” > “回收”是你最后的手段...

回答by user1718232

If it is cached on the server, there is nothing you can do in the browser to fix this. You have to wait for the server to reload the file. You can't even delete the file and re-upload it. This could take even longer if you are using a caching server like Cloudflare (it will even survive a server reboot). You could rename it and load a copy.

如果它缓存在服务器上，则您无法在浏览器中执行任何操作来解决此问题。您必须等待服务器重新加载文件。您甚至无法删除文件并重新上传。如果您使用像 Cloudflare 这样的缓存服务器，这可能需要更长的时间（它甚至可以在服务器重启后继续存在）。您可以重命名它并加载副本。

回答by Arul

![Clear Cache] Ctrl+Shift+Deletehttp://i.stack.imgur.com/QpqhJ.jpgSometimes it's necessary to do a hard refresh to see the updates take effect. But it's unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out. Here's one way to do it:<link rel="stylesheet" href="style.css?v=1.1">

![Clear Cache] Ctrl+Shift+Deletehttp://i.stack.imgur.com/QpqhJ.jpg有时需要硬刷新才能看到更新生效。但是一般的网络用户不太可能知道硬刷新是什么，你也不能指望他们不断刷新页面，直到事情解决为止。这是一种方法：<link rel="stylesheet" href="style.css?v=1.1">