强制浏览器使用新的 CSS答案

【问题标题】：Force browser to use new CSS强制浏览器使用新的 CSS
【发布时间】：2010-09-11 04:42:25
【问题描述】：

有没有办法检查用户的浏览器是否缓存了不同版本的 CSS，如果是，则强制他们的浏览器拉取新版本？

【问题讨论】：

【解决方案1】：

我不知道它是否正确使用，但我认为您可以使用查询字符串强制重新加载 css 文件：

<link href="mystyle.css?SOME_UNIQUE_TEXT" type="text/css" rel="stylesheet" />

我记得几年前我使用这种方法强制重新加载网络摄像头图像，但时间可能已经过去了......

【讨论】：

【解决方案2】：

不使用 js，您可以将 css 文件名保存在会话变量中。当向主页发出请求时，您只需将 css 链接标签与会话变量名称组合在一起。

由于 ccs 文件名不同，您可以强制浏览器下载它，而无需检查浏览器中先前加载的内容。

【讨论】：

【解决方案3】：

作为jeroen suggested，你可以有类似的东西：

<link href="StyleSelector.aspx?foo=bar&baz=foz" type="text/css" rel="stylesheet" />

那么你的 StyleSelector.aspx 文件应该是这样的：

<%@ Page Language="cs" AutoEventWireup="false" Inherits="Demo.StyleSelector" Codebehind="StyleSelector.aspx.cs" %>

你的 StyleSelector.aspx.cs 像这样：

using System.IO;

namespace Demo
{
    public partial class StyleSelector : System.Web.UI.Page
    {
        public StyleSelector()
        {
            Me.Load += New EventHandler(doLoad);
        }

        protected void doLoad(object sender, System.EventArgs e)
        {
            // Make sure you add this line
            Response.ContentType = "text/css";

            string cssFileName = Request.QueryString("foo");

            // I'm assuming you have your CSS in a css/ folder
            Response.WriteFile("css/" + cssFileName + ".css");
        }
    }
}

这将根据查询字符串参数向用户发送 CSS 文件（实际上是任何文件，请参阅安全说明）的内容。现在棘手的部分是执行 Conditional GET，这是检查用户是否在缓存中的页面的花哨名称。

首先，我强烈建议您阅读HTTP Conditional GET for RSS hackers，这是一篇很好的文章，它解释了 HTTP 条件 GET 机制的基础知识。这是必读，相信我。

我已在 SO 问题 can i use “http header” to check if a dynamic page has been changed 中发布了 similar answer（但带有 PHP 代码，抱歉）。将代码从 PHP 移植到 C# 应该很容易（如果以后有时间我会这样做。）

安全注意事项：执行 ("css/" + cssFileName + ".css") 之类的操作非常不安全，因为您可能会发送相对路径字符串，因此您可能会向用户发送不同文件的内容。您将想出一个更好的方法来找出要发送的 CSS 文件。

设计说明：您可能希望使用IHttpModule 或IHttpHandler 而不是.aspx 页面，但这种方式效果很好。

【讨论】：

【解决方案4】：

问题 1 的答案

您可以编写一个继承自 System.Web.UI.Control 并覆盖 Render 方法的 Server Control：

public class CSSLink : System.Web.UI.Control
{

    protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {

        if ( ... querystring params == ... )
            writer.WriteLine("<link href=\"/styles/css1.css\" type=\"text/css\" rel=\"stylesheet\" />")
        else
            writer.WriteLine("<link href=\"/styles/css2.css\" type=\"text/css\" rel=\"stylesheet\" />")

    }

}

并在您的 MasterPage 中插入此类的一个实例：

<%@ Register TagPrefix="mycontrols" Namespace="MyNamespace" Assembly="MyAssembly" %>
...
<head runat="server">
    ...
    <mycontrols:CSSLink id="masterCSSLink" runat="server" />
</head>
...

【讨论】：

【解决方案5】：

您可能应该只共享一个共同的祖先类，然后如果需要，您可以使用单个 js 命令轻弹它。

<body class="style2">

<body class="style1">

等等

【讨论】：

【解决方案6】：

我喜欢 jeroen 向样式表 URL 添加查询字符串的建议。您可以在样式表文件最后一次修改时添加时间戳。在我看来，它是为您生成 LINK 标记的辅助函数或自定义控件的理想选择。

【讨论】：

【解决方案7】：

我知道这个问题是专门针对 C# 的，并且我假设来自 Windows Server 的一些风味。由于我对这两种技术都不太了解，所以我将给出一个适用于 PHP 和 Apache 的答案，您可能会从中有所收获。

如前所述，只需在页面主体上设置一个 ID 或一个类，具体取决于特定查询，例如（在 PHP 中）

<?php
if($_GET['admin_page']) {
  $body_id = 'admin';
} else {
  $body_id = 'normal';
}
?>
...
<body id="<?php echo $body_id; ?>">
...
</body>

您的 CSS 可以针对此：

body#admin h1 {
   color: red;
}

body#normal h1 {
   color: blue;
}

等

至于强制下载 CSS，您可以在 Apache 中使用 mod_expires 或 mod_headers 模块执行此操作 - 对于 mod_headers，.htaccess 中的这将停止 css 文件被缓存：

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

但是由于您可能没有使用 apache，所以这对您没有多大帮助:(

【讨论】：

【解决方案8】：

就像在正确答案中一样，我使用了一些类似的方法，但有一些不同

<link href="mystyle.css?v=DIGIT" type="text/css" rel="stylesheet" />

作为 DIGIT，您可以使用实数，在模板中手动或自动设置。例如，在我的项目中，我在管理面板中使用缓存清除模块，每次使用此缓存清理器时，它都会自动增加 DIGIT。

【讨论】：