CSS没有在所有浏览器中更新

时间:2018-03-13 12:11:29

标签: html css caching reload

我正在使用一个WordPress网站,我的.CSS文件中的所有更改都不会出现在Chrome,Firefox或Edge中。

我直接从标签加载我的CSS:

<link href="/wp-content/themes/mytheme/css/style.css" type="text/css" rel="stylesheet">

如果我对CSS文件进行了更改,则更改不会显示在浏览器中。当我使用DevTools检查网站时,我可以清楚地看到加载了旧的/缓存版本的CSS。

我已经尝试过: Ctrl + F5 ,在DevTools打开时禁用缓存,手动清除缓存,硬重新加载... < / p>

没有任何作用。甚至没有清除缓存。

我的唯一解决方案是等待10-15分钟,然后重新加载页面,或重命名.css文件并重新链接。我已经读过使用CSS版本控制(style.css?v = 1.0等)时有一个工作方法,但我拒绝习惯这些烦人的解决方法。

我只是不明白为什么会这样。有帮助吗?谢谢。

2 个答案:

答案 0 :(得分:1)

这是因为用户加载已保存的资源比再次下载资源更快。这就是资源缓存背后的原因。它的使用时间是有限的,可以设置为none来禁用缓存(客户端);也可以从服务器设置时间。

&#34;技巧&#34; style.css?version=1.0后面是浏览器获得&#34; new&#34;根据您的CSS&#34;版本&#34;下载的URL。这是:如果您有文件style.css?version=1.0并导航到您的页面,该URL将保存为已加载的资源;当您将文件版本更改为style.css?version=1.1并再次导航到您的页面时,浏览器就没有&#34;确切地说&#34; URL已注册,因此它首次请求该资源

如果您使用的是后端语言,则可以执行简单的解决方法,例如style.css?version={getFileLastModificationTime}。这样,生成的链接将最后一次将文件修改为&#34;文件版本&#34;。

答案 1 :(得分:0)

Wordpress有自己的机制来将js和css拟合到它所服务的页面中。

Check wp_enqueue_style and wp_enueue_script