blocks|key|452788|text|您可以将随机查询参数附加到样式表url+(例如，通过javascript或服务器端代码)。它不会更改正在加载的css文件，但会阻止缓存，因为浏览器会检测到不同的url，并且不会加载缓存的样式表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|452789|<link+rel="stylesheet"+type="text/css"+href="http://mysite/style.css?id=1234">|code-block|syntax|javascript|452790|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>&lt;link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234"&gt;
</code></pre>

blocks|key|234837|text|您可以使用GetVersion方法创建类，该方法将返回您的应用程序版本(或例如内部版本号或构建日期)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234838|对于标记中的asp.net应用程序，您可以指定如下内容：|234839|<script+src="Scripts/some.js?version=<%25=+Common.GetVersion%25>"+type="text/javascript"></script>
<link+rel="stylesheet"+type="text/css"+href="~/styles/Style.css?version=<%25=+Common.GetVersion%25>"+/>|code-block|syntax|javascript|234840|这将迫使浏览器重新加载文件，因为静态文件的部分URL将在每次构建(或至少每个版本)时更改。|234841|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

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

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

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

blocks|key|452846|text|没有捕获:将可变字符串放在css路径的末尾，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|452847|<link+rel="stylesheet"+type="text/css"+href="style.css?2016-12-3:10+13+30"/>|code-block|syntax|javascript|452848|版本更改时刷新：|452849|<link+rel="stylesheet"+type="text/css"+href="style.css?v=1.1.0"/>|452850|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>&lt;link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/&gt;
</code></pre>

Refresh when version changes:

<pre><code>&lt;link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/&gt;
</code></pre>

blocks|key|452882|text|你可以在你的链接中使用随机版本id。例如，使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|452883|<link+++href=<%25="'mystyle.css?version="%2B+DateTime.Now.ToString("yyyyMMddhhmmss")+%2B"'"%25>+++rel="stylesheet"+type="text/css"/>|code-block|syntax|javascript|452884|其中myStyle.css是样式表文件，DateTime.Now.ToString("yyyyMMddhhmmss")函数用于生成随机不同的版本id。通过使用这个随机的版本id，浏览器被迫重新加载你的css。|452885|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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.

blocks|key|452968|text|由于ASP.net标签也包含在问题中，我想在Maxim+Kornilov的回答(https://stackoverflow.com/a/12992813/903783)上扩展一下我如何使用他的想法使URL特定于webapp-build-specific+on+ASP.net+MVC+(他的例子使用的是WebForms+/ASP.NETRazor语法，而不是MVC和Razor的更新的Razor语法)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|452969|1)在Global.asax.cs中添加到was应用程序的主类(名为MvcApplication|452970|#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|code-block|syntax|javascript|452971|从C#+6开始，someProperty+=>+someReadOnlyExpression语法只是someProperty+{+get+{+return+...+;}+}的简写|452972|2)在其内容/_Layout.cshtml文件中，我曾经使用以下内容在页脚显示内部版本号和构建日期时间(基于webapp的主程序集)：|452973|Version+@ViewContext.Controller.GetType().Assembly.GetName().Version+(@string.Format("{0:yyyy/MM/dd-HH:mm:ss}",+@File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))|452974|我改成了更简单的：|452975|Version+@somewebappname.MvcApplication.Version+(@string.Format("{0:yyyy/MM/dd-HH:mm:ss}",+somewebappname.MvcApplication.LastUpdated))|452976|3)它通过_Layout.cshtml中的硬编码链接加载CSS+(仍在重构它)，我将其更改为：|452977|<link+href='@Url.Content("~/Content/Site.css?version="+%2B+somewebappname.MvcApplication.Version)'+rel="stylesheet"+type="text/css"+/>+|452978|因此，如果一个人在网页上右击，他们确实查看了源代码，他们会看到：|452979|<link+href='/Content/Site.css?version=2.1.5435.22633'+rel="stylesheet"+type="text/css"+/>+|452980|也就是说，由于使用了伪参数version，CSS+url是特定于版本的。|452981|如果使用随机数，它将在每次页面加载时获取CSS，这通常是不希望的，特别是如果您已经在推送新的webapp构建，而不是将单个页面更改推送到web服务器(这样您就可以访问可以注入到URL中的内部版本号)。|452982|请注意，为了实现内部版本号的自动递增，我在Properties/AssemblyInfo.cs+(请参阅How+to+have+an+auto+incrementing+version+number+(Visual+Studio)?)：|452983|//+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|452984|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/12992813/903783|1|https://stackoverflow.com/questions/826777/how-to-have-an-auto-incrementing-version-number-visual-studio^0|14|17|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1G|1S|1|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|D|3|E|5|6|7|1O|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1P|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1R|8|@]|9|@]|C|$]]|$1|O|3|P|5|H|7|1S|8|@]|9|@]|C|$I|J]]|$1|Q|3|R|5|6|7|1T|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|1U|8|@]|9|@]|C|$I|J]]|$1|U|3|V|5|6|7|1V|8|@]|9|@]|C|$]]|$1|W|3|X|5|H|7|1W|8|@]|9|@]|C|$I|J]]|$1|Y|3|Z|5|6|7|1X|8|@]|9|@]|C|$]]|$1|10|3|11|5|H|7|1Y|8|@]|9|@]|C|$I|J]]|$1|12|3|13|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|14|3|15|5|6|7|20|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|21|8|@]|9|@$A|22|B|23|1|24]]|C|$]]|$1|18|3|19|5|H|7|25|8|@]|9|@]|C|$I|J]]|$1|1A|3|-4|5|6|7|26|8|@]|9|@]|C|$]]]|1B|$1C|$5|1D|1E|1F|C|$1G|1H]]|1I|$5|1D|1E|1F|C|$1G|1J]]]]

Since the ASP.net tag is also included in the question, I'd like to expand on Maxim Kornilov's answer (<a href="https://stackoverflow.com/a/12992813/903783">https://stackoverflow.com/a/12992813/903783</a>) 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):

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

<pre><code>#region Versioning

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

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

#endregion
</code></pre>

the someProperty => someReadOnlyExpression syntax is just shorthand for someProperty { get { return ... ;} } possible since 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:

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

which I changed to the simpler:

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

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

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

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

<pre><code>&lt;link href='/Content/Site.css?version=2.1.5435.22633' rel="stylesheet" type="text/css" /&gt; 
</code></pre>

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

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

Note that to achieve auto-incrementing of build number, at Properties/AssemblyInfo.cs I have (see <a href="https://stackoverflow.com/questions/826777/how-to-have-an-auto-incrementing-version-number-visual-studio">How to have an auto incrementing version number (Visual Studio)?</a>):

<pre><code>// 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
</code></pre>

blocks|key|452740|text|这可以通过一个.htaccess文件来完成。将此代码放在网站根目录下名为.htaccess的文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|452741|<filesMatch+"\.(html%7Chtm%7Cjs%7Ccss)$">
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>|code-block|syntax|javascript|452742|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;filesMatch "\.(html|htm|js|css)$"&gt;
FileETag None
&lt;ifModule mod_headers.c&gt;
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"
&lt;/ifModule&gt;
&lt;/filesMatch&gt;
</code></pre>

blocks|key|452925|text|不用使用html编写<link>标签，只需使用php代码即可。在<link>标记中，最后使用php+mt_rand()函数，该函数将产生一个随机数，因此您的样式表将永远不会被缓存。<?php++echo+"<link+rel='stylesheet'+type='text/css'+href='style.css?'".mt_rand().">";+?>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|452926|entityMap^0|A|6|W|6|1E|9|2I|2G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|235029|text|如果你使用的是谷歌浏览器，只需按下CTRL+%2B+F5来强制刷新。CSS将更新为它在本地计算机或服务器上的状态。您也可以使用.htaccess文件，但对于可能的临时性问题，这更是一种永久性的解决方案。CSS缓存有利于更快地加载页面，因此我不建议完全禁用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|235030|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you are in Google Chrome simply press CTRL + F5 to force said refresh. The CSS will be updated to how it is on your local machine or server. You can also use a .htaccess file, but that is more of a permanent solution to a possibly temporary problem. CSS caching is good for faster page loading, so I do not recommend disabling it entirely.

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

How to prevent CSS caching on a web page?

服务器

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

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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