如何让PHP输出的text/css类型文件可缓存且便于强制重载？

嘿，这个场景我太熟悉了！你想用CSS变量统一管理图片的版本查询字符串却遇到了问题，同时还要让PHP输出的CSS文件既能被浏览器高效缓存，又能在资源更新时强制重载，对吧？咱们一步步来解决：

首先先解决你提到的CSS变量失效问题——直接在url()里拼接CSS变量的查询字符串容易有语法坑，正确的做法是把带版本号的完整路径片段定义成变量，或者干脆用PHP来注入版本号（更靠谱，毕竟是服务器端渲染）。比如：

/* 如果你坚持用CSS变量，要这么写 */
:root {
  --sprite-base-url: 'sprite.svg?version=2';
}

.icon-pencil {
  background-image: url(var(--sprite-base-url)#icon-pencil);
}

不过更适合PHP输出场景的，是直接用PHP变量来管理版本号，这样既避免CSS变量的语法问题，还能更灵活地控制版本。接下来重点讲怎么实现缓存+强制重载：

第一步：给PHP输出的CSS设置正确的缓存头 #

浏览器是否会缓存文件，全靠HTTP响应头说了算。在PHP文件的最开头，加上这些代码，让浏览器把CSS缓存一段时间（比如1个月）：

<?php
// 告诉浏览器这是CSS文件
header('Content-Type: text/css');
// 设置缓存有效期为1个月（换算成秒）
$cacheExpire = 31 * 24 * 3600;
// 缓存控制：允许公共缓存（CDN也能缓存），有效期max-age
header("Cache-Control: max-age=$cacheExpire, public");
// 设置过期时间，GMT格式
header("Expires: " . gmdate('D, d M Y H:i:s', time() + $cacheExpire) . ' GMT');
?>

第二步：用版本号触发强制重载 #

当你需要更新资源时，只要改变版本号，浏览器就会认为这是一个全新的文件，自动重新请求，而没更新的时候，浏览器会一直用缓存。这里有两种方式：

方式1：手动管理版本号 #

在PHP里定义一个版本变量，然后输出到CSS的资源路径中：

<?php
// 手动设置版本号，更新资源时改这个值就行
$spriteVersion = '2';
?>

/* 直接在CSS里注入版本号 */
.icon-pencil {
  background-image: url(sprite.svg?version=<?php echo $spriteVersion; ?>#icon-pencil);
}

/* 或者结合CSS变量 */
:root {
  --sprite-query: '?version=<?php echo $spriteVersion; ?>';
}

.icon-erase {
  background-image: url(sprite.svgvar(--sprite-query)#icon-erase);
}

同时，在引用这个PHP生成的CSS时，也可以给URL加版本参数，比如：

<link rel="stylesheet" href="style.php?v=2">

这样连CSS文件本身的缓存都能通过版本号强制刷新。

方式2：自动根据文件修改时间生成版本号 #

不用手动改版本号，让PHP读取资源文件的修改时间作为版本号，资源一更新，版本号自动变：

<?php
// 获取sprite.svg的最后修改时间戳作为版本号
$spriteVersion = filemtime('sprite.svg');
?>

.icon-pencil {
  background-image: url(sprite.svg?version=<?php echo $spriteVersion; ?>#icon-pencil);
}

这个方法特别省心，完全不用手动维护版本号，只要图片文件更新，浏览器就会自动加载新资源。

核心思路总结 #

• 用正确的HTTP缓存头让浏览器长期缓存PHP输出的CSS，减少重复请求
• 用*版本号（手动/自动生成）*作为资源URL的一部分，资源更新时改变版本号，触发强制重载
• 服务器端通过PHP把版本号注入到CSS中，避免手动修改多处代码

备注：内容来源于stack exchange，提问作者Ian Y.