Html 如何防止网页上的 CSS 缓存？

How to prevent CSS caching on a web page?

提问by haansi

I am learning to develop xhtml, css web pages. Often I am doing changes in CSS but it do not reflect on page because of browser cacheing and if I manually clear cahceing it shows latest code effects. Is there a thing I can put in code to make browker not to cache stuff ? Any advice please

我正在学习开发 xhtml、css 网页。我经常在 CSS 中进行更改，但由于浏览器缓存，它不会反映在页面上，如果我手动清除缓存，它会显示最新的代码效果。有什么我可以在代码中放入让 broker 不缓存东西的东西吗？任何建议请

回答by magnattic

You can append a random query parameter to the stylesheet url (for example via javascript or server side code). It will not change the css file that is being loaded, but it will prevent caching, because the browser detects a different url and will not load the cached stylesheet.

您可以将随机查询参数附加到样式表 url（例如通过 javascript 或服务器端代码）。它不会更改正在加载的 css 文件，但会阻止缓存，因为浏览器检测到不同的 url 并且不会加载缓存的样式表。

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">

回答by Maxim Kornilov

You can create class with GetVersion method which will return your application version (or for example build number or build date).

您可以使用 GetVersion 方法创建类，该方法将返回您的应用程序版本（或例如构建号或构建日期）。

For asp.net application in markup you can then specify something like this:

对于标记中的 asp.net 应用程序，您可以指定如下内容：

<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />

This will force browser to reload files because part of URL to static files will be changed every build (or at least every version).

这将强制浏览器重新加载文件，因为静态文件的部分 URL 将在每个构建（或至少每个版本）中更改。

回答by frenchie

If you're using Chrome as your development browser, there are 2 options:

如果您使用 Chrome 作为开发浏览器，则有 2 个选项：

1) When you hold the reload pagebutton down for a second, a menu will appear and offer the possibility to do a hard page reload.

1) 当您按住重新加载页面按钮一秒钟时，将出现一个菜单并提供重新加载硬页面的可能性。

2) In the Inspector settings, you can force the browser to never cache files.

2) 在 Inspector 设置中，您可以强制浏览器从不缓存文件。

I think it's easier, faster and less trouble to handle this issue by disabling caching on the browser than in the server configuration.

我认为通过在浏览器上禁用缓存来处理这个问题比在服务器配置中更容易、更快和更少的麻烦。

回答by Kris Roofe

With no catching: Put changeable strings at the end of css path, as bellow:

没有捕获：将可变字符串放在 css 路径的末尾，如下所示：

<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>

Refresh when version changes:

版本更改时刷新：

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

回答by hojjat.mi

You can use random version id in your link. for example use this:

您可以在链接中使用随机版本 ID。例如使用这个：

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

where myStyle.css is stylesheet file and DateTime.Now.ToString("yyyyMMddhhmmss") function used for generate random different version id. By using this random version id,browser forced to reload your css.

其中 myStyle.css 是样式表文件，DateTime.Now.ToString("yyyyMMddhhmmss") 函数用于生成随机的不同版本 ID。通过使用此随机版本 ID，浏览器会强制重新加载您的 css。

回答by Muhammad Taif Khan

instead of writing <link>tag using html just use php code. inside <link>tag at the end use php mt_rand()function which will produce a random number and thus your stylesheet will never get cached. <?php echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_rand().">"; ?>

而不是<link>使用 html编写 标签，只需使用 php 代码。最后的内部<link>标签使用 phpmt_rand()函数，它将产生一个随机数，因此您的样式表永远不会被缓存。 <?php echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_rand().">"; ?>

回答by George Birbilis

Since the ASP.net tag is also included in the question, I'd like to expand on Maxim Kornilov's answer (https://stackoverflow.com/a/12992813/903783) with how I used his idea of making the URLs webapp-build-specific on ASP.net MVC (his example was in ASP/ASP.net WebForms syntax instead of MVC's and Razor Pages' newer Razor syntax):

由于 ASP.net 标签也包含在问题中，我想扩展 Maxim Kornilov 的回答（https://stackoverflow.com/a/12992813/903783）以及我如何使用他制作 URL 的想法 webapp-特定于 ASP.net MVC 的构建（他的示例使用 ASP/ASP.net WebForms 语法，而不是 MVC 和 Razor Pages 的较新的 Razor 语法）：

1) Added to the webapp's main class (was called MvcApplication) in Global.asax.cs

1) 在 Global.asax.cs 中添加到 webapp 的主类（称为 MvcApplication）

#region Versioning

public static string Version => typeof(MvcApplication).Assembly.GetName().Version.ToString(); //note: syntax requires C# version >=6

public static DateTime LastUpdated => File.GetLastWriteTime(typeof(MvcApplication).Assembly.Location);

#endregion

the someProperty => someReadOnlyExpression syntax is just shorthand for someProperty { get { return ... ;} } possible since C# 6

someProperty => someReadOnlyExpression 语法只是 someProperty { get { return ... ;} } 的简写，因为 C# 6

2) in its Content/_Layout.cshtml file I used to have the following to show build number and build datetime (based on the webapp's main assembly) on the page footer:

2) 在它的 Content/_Layout.cshtml 文件中，我曾经有以下内容在页面页脚上显示构建号和构建日期时间（基于 webapp 的主程序集）：

Version @ViewContext.Controller.GetType().Assembly.GetName().Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", @File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))

which I changed to the simpler:

我改为更简单的：

Version @somewebappname.MvcApplication.Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", somewebappname.MvcApplication.LastUpdated))

3) it was loading the CSS via hardcoded link in _Layout.cshtml (still refactoring it) which I changed to:

3）它通过_Layout.cshtml中的硬编码链接加载CSS（仍在重构它），我改为：

<link href='@Url.Content("~/Content/Site.css?version=" + somewebappname.MvcApplication.Version)' rel="stylesheet" type="text/css" /> 

so if one right-clicks in the webpage and they do view source they see:

因此，如果在网页中右键单击并且他们确实查看了源代码，他们会看到：

<link href='/Content/Site.css?version=2.1.5435.22633' rel="stylesheet" type="text/css" /> 

that is the CSS url is version specific thanks to the dummy parameter version

由于虚拟参数版本，CSS url 是特定于版本的

If a random number was used instead it would fetch the CSS at every page load which is usually undesired, especially if you are already pushing a new webapp build instead of individual page changes to the web server (so that you do have access to a build number that you can inject into URLs).

如果使用随机数，它会在每个页面加载时获取 CSS，这通常是不受欢迎的，特别是如果您已经在推送新的 webapp 构建而不是将单个页面更改推送到 web 服务器（这样您就可以访问构建您可以注入到 URL 中的数字）。

Note that to achieve auto-incrementing of build number, at Properties/AssemblyInfo.cs I have (see How to have an auto incrementing version number (Visual Studio)?):

请注意，要实现内部版本号的自动递增，在 Properties/AssemblyInfo.cs 我有（请参阅如何拥有自动递增版本号（Visual Studio）？）：

// Version information for an assembly consists of the following four values:
//
//      Major Version
//      Minor Version 
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Revision and Build Numbers 
// by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
//[assembly: AssemblyFileVersion("1.0.*")] //don't use boh AssemblyVersion and AssemblyFileVersion with auto-increment

回答by Wes Cossick

This can be done through a .htaccess file. Place this code in a file named .htaccess at the root of your website:

这可以通过 .htaccess 文件完成。将此代码放在网站根目录下名为 .htaccess 的文件中：

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>

回答by Ankush Jain

Press F5key 5 to 6 times continuously or Clear your history....That's not a permanent solution but a solution which works for me..

按F5键持续5至6倍或清除你的历史....这是不是一个永久性的解决方案，但它为我工作的解决方案..