CSS 我可以强制刷新我的样式表文件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1239907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I force a refresh of my stylesheet file?
提问by GilShalit
I have just spent half a day quietly going mad.
我刚刚花了半天时间静静地发疯。
I'm making changes to my classes in the Site.css file and they were not being reflected in the site being developed on my machine. Because I'm learning my way through jQuery and playing with addClass and removeClass and I'm creating the parameters for those calls dynamically, I was sure the problem was in my implementation.
我正在对 Site.css 文件中的类进行更改，但它们并未反映在我的机器上正在开发的站点中。因为我正在通过 jQuery 学习并使用 addClass 和 removeClass 并且我正在为这些调用动态创建参数，所以我确定问题出在我的实现中。
Turns out the CSS file was cached in the browser and all I had to do was refresh it...
原来 CSS 文件被缓存在浏览器中，我所要做的就是刷新它......
Is there a way to force a refresh (preferably only during debug I guess)?
有没有办法强制刷新（我猜最好只在调试期间）？
回答by zombat
A popular way of "cache-breaking" is to append a parameter to your css source. Typically a timestamp is used. I prefer the "file last modified" time, ie. filemtime()in PHP. I'm sure there's an asp.net function that would give you that.
“缓存破坏”的一种流行方法是将参数附加到您的 css 源。通常使用时间戳。我更喜欢“文件上次修改”时间，即。filemtime()在 PHP 中。我敢肯定有一个 asp.net 功能可以为您提供。
Then your CSS tag becomes:
然后你的 CSS 标签变成：
<link rel="stylesheet" type="text/css" media="screen" href="/main.css?123456789"/>
with the query parameter changing whenever the CSS file is updated.
每当更新 CSS 文件时，查询参数都会更改。
回答by this. __curious_geek
Press CTRL+F5to hard-refresh everything on your webpage including scripts and stylesheets.
按CTRL+F5硬刷新网页上的所有内容，包括脚本和样式表。
Additionally, you can incorporate the stylesheets to be served from a dynamic server page [php/asp.net] and the Response.Expires = -1 which will force the client to load the css on every HTTP-GET request explicitly. You can also do this in your webserver settings for CSS mime types.
此外，您可以合并要从动态服务器页面 [php/asp.net] 和 Response.Expires = -1 提供的样式表，这将强制客户端在每个 HTTP-GET 请求上显式加载 css。您也可以在 CSS mime 类型的网络服务器设置中执行此操作。
回答by Max
I use this trick:
我用这个技巧：
<link rel="stylesheet" type="text/css" href="cssfile.css?t=<%= DateTime.Now.Ticks %>" media="screen" />
回答by Ian Kemp
For ASP.NET, the code behind (you can put this in a utility class or master page):
对于 ASP.NET，后面的代码（您可以将其放在实用程序类或母版页中）：
public static string GetTimestampedUrl(string virtualPath)
{
var realPath = HostingEnvironment.MapPath(virtualPath);
var file = new FileInfo(realPath);
return VirtualPathUtility.ToAbsolute(virtualPath) + "?" + file.LastWriteTime.ToFileTime();
}
And then in your page:
然后在您的页面中：
<link href="<%= GetTimestampedUrl("~/screen.css") %>" rel="stylesheet" type="text/css" media="screen" />
回答by Jason
One trick is to add a QueryString parameter in the link to your stylesheet
一个技巧是在指向样式表的链接中添加一个 QueryString 参数
回答by Michael Haren
This is a classic problem. You have a lot of solutions available:
这是一个经典的问题。您有很多可用的解决方案：
- Probably the easiest way is to configure your webserver to server CSS files as never-cache/expire immediately. Obviously you wouldn't want this on a production environment. With IIS, this is very easy to do.
- Add a random value to the name of the file you're including, e.g. Site.css?v=12. This is what SO does for their includes. I do this in house so that on the development machine, the parameter changes each time (a guid) the file is served, but when deployed it uses the svn version number. A little trickier but more robust.
- Many, many more I'm sure
- 可能最简单的方法是将您的网络服务器配置为从不缓存/立即过期的 CSS 文件。显然，您不希望在生产环境中使用它。使用 IIS，这很容易做到。
- 为您包含的文件名添加一个随机值，例如 Site.css?v=12。这就是 SO 为他们的包含所做的事情。我在内部执行此操作，以便在开发机器上，每次提供（guid）文件时参数都会更改，但在部署时使用 svn 版本号。有点棘手，但更强大。
- 很多很多我敢肯定
回答by Justin Niessner
I'm not sure about all browsers, but in IE8 you can use the developer tools...
我不确定所有浏览器，但在 IE8 中你可以使用开发者工具......
Go To:
去：
Tools -> Developer Tools (F12)
工具 -> 开发者工具 (F12)
Then (while on your page) inside the Developer Tools:
然后（在您的页面上）在开发人员工具中：
Cache -> Always Refresh From Server
缓存 -> 总是从服务器刷新
回答by foxybagga
For Wordpress users, below is the code
对于 Wordpress 用户，以下是代码
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url')."?d=".date( 'Ymd', time()); ?>" type="text/css" media="screen" />
Or better one
或者更好的一个
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
Cheers!
干杯!
回答by Fernando Angelieri
My approach is using the “querystring changing” method to bypass caches (even in browser and proxy servers). Since I'm using Master Pages I maintain the link to CSS as usual like but adding an ID (named here as cssStyleSheet):
我的方法是使用“查询字符串更改”方法来绕过缓存（即使在浏览器和代理服务器中）。因为我使用的是母版页，所以我像往常一样维护 CSS 的链接，但添加一个 ID（此处命名为 cssStyleSheet）：
<head runat="server">
<link id="cssStyleSheet" href="~/Styles/Default.css" rel="stylesheet" type="text/css" />
Then at code behind I implemented at Page_Load this line of code, adding a quesrystring like “?t=5343423424234”.
然后在后面的代码中，我在 Page_Load 中实现了这行代码，添加了一个类似“?t=5343423424234”的查询字符串。
Protected Sub Page_Load(…)
If IsNothing(Application("CSSTicks")) = True Then
Application("CSSTicks") = DateTime.Now.Ticks
End If
cssStyleSheet.Attributes("href") = cssStyleSheet.Attributes("href") & "?t=" & Application("CSSTicks")
End Sub
Why is that? At HTML code, some designer could change the CSS file as easy, no interfering at some “difficult” code. Using an Application variable I avoid spending bandwidth from my servers and also from customer perspective (like using mobiles).
这是为什么？在 HTML 代码中，一些设计人员可以很容易地更改 CSS 文件，而不会干扰一些“困难”的代码。使用应用程序变量，我可以避免从服务器和客户角度（例如使用手机）花费带宽。
If new application is deployed, the Application variable is reset automatically and a “new” version of CSS if downloaded to browser (even through proxies).
如果部署了新应用程序，应用程序变量会自动重置，如果下载到浏览器（甚至通过代理），则会自动重置 CSS 的“新”版本。
回答by Scharrels
The easiest way is to disable caching in your browser. If you can't or don't want to do this, you can press ctrl+f5.
最简单的方法是禁用浏览器中的缓存。如果您不能或不想这样做，您可以按 ctrl+f5。
Your server or asp application might be caching, too. You can disable this in the web.config or you can restart the development server to make sure the latest version of your file is shown to the user.
您的服务器或 asp 应用程序也可能正在缓存。您可以在 web.config 中禁用此功能，也可以重新启动开发服务器以确保向用户显示文件的最新版本。
