CSS 刷新样式文件条件与方法

概览

我们通常在前端修改界面样式后，会通过 Ctrl+F5 强制刷新以使用本地浏览器生效修改后的变化，但是有时这样刷新并不起效果，并且远程用户可能不会知晓网站界面样式做了更改，如果弹窗提示又影响用户体验，所使用的效果可能需要等久时间后才会在用户端变化，此时，我们只要在 CSS 样式文件加上更新参数即可实现在用户下次访问后立即生效修改后的样式。

一般我们会通过 link 标签的 href 属性来链接 CSS 文件，这时我们只需在 CSS 文件的 URL 后加以 ?upd202210021200 新值，使本地与服务器的 href 值不同，即可使本地缓存的 CSS 文件失效，从而迫使浏览器从服务器下载当前的样式文件。

更新

原文件

<link rel="stylesheet" href="//static.hexingxing.cn/v2/element/style/bootstrap@latest.min.css">

现文件

<link rel="stylesheet" href="//static.hexingxing.cn/v2/element/style/bootstrap@latest.min.css?upd202210021200">

以上建议只在修改后手工添加，这样即保持使用正常的本地缓存文件，同时在修改后能及时更新。

更多

如果有必要，实现动态更新 href 值也很简单，PHP 环境可以通过调用系统的时间值来达到每次访问都更新的效果。

<link rel="stylesheet" href="//static.hexingxing.cn/v2/element/style/bootstrap@latest.min.css?<?php echo "udp".date("YmdHis",time()+8*60*60); ?>">