强制浏览器使用新的 CSS

发布于 2024-07-04 17:28:57 字数 54 浏览 8 评论 0原文

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

Is there a way to check if the user has a different version of the CSS cached by their browser and if so force their browser to pull the new version?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

注定孤独终老 2024-07-11 17:28:57

就像正确答案一样,我正在使用一些类似的方法,但有一些差异

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

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

Like in correct answer, i am using some similar method, but with some differences

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

As a DIGIT you can use a real number, set manually or automatically in your template. For example, on my projects i'm using Cache clearing modules in admin panel, and each time use this cache cleaner, it increments the DIGIT automatically.

不交电费瞎发啥光 2024-07-11 17:28:57

我知道这个问题具体是关于 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,所以这对您没有多大帮助:(

I know the question was specifically about C# and I assume from that Windows Server of some flavour. Since I don't know either of those technologies well, I'll give an answer that'll work in PHP and Apache, and you may get something from it.

As suggested earlier, just set an ID or a class on the body of the page dependent on the specific query eg (in PHP)

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

And your CSS can target this:

body#admin h1 {
   color: red;
}

body#normal h1 {
   color: blue;
}

etc

As for the forcing of CSS download, you could do this in Apache with the mod_expires or mod_headers modules - for mod_headers, this in .htaccess would stop css files being cached:

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

But since you're probably not using apache, that won't help you much :(

梦里泪两行 2024-07-11 17:28:57

我喜欢 jeroen 的建议,即向样式表 URL 添加查询字符串。 您可以添加样式表文件上次修改时的时间戳。 在我看来,它是一个很好的候选者,可以使用辅助函数或自定义控件来为您生成 LINK 标签。

I like jeroen's suggestion to add a querystring to the stylesheet URL. You could add the time stamp when the stylesheet file was last modified. It seems to me like a good candidate for a helper function or custom control that would generate the LINK tag for you.

说谎友 2024-07-11 17:28:57

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

<body class="style2">

<body class="style1">

ETC。

You should possibly just share a common ancestor class, then you can flick it with a single js command if need be.

<body class="style2">

<body class="style1">

etc.

猫烠⑼条掵仅有一顆心 2024-07-11 17:28:57

问题 1 的答案

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

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\" />")

    }

}

并插入一个实例您的母版页中的此类:

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

Answer for question 1

You could write a Server Control inheriting from System.Web.UI.Control overriding the Render method:

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\" />")

    }

}

and insert an instance of this class in your MasterPage:

<%@ Register TagPrefix="mycontrols" Namespace="MyNamespace" Assembly="MyAssembly" %>
...
<head runat="server">
    ...
    <mycontrols:CSSLink id="masterCSSLink" runat="server" />
</head>
...
深海不蓝 2024-07-11 17:28:57

正如jeroen建议你可以有这样的东西:

<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 文件(实际上是任何文件,请参阅安全说明)的内容。 现在棘手的部分是执行条件 GET,这是检查用户缓存中是否有该页面的奇特名称。

首先,我强烈建议您阅读RSS 黑客的 HTTP 条件 GET,一篇很棒的文章,解释了 HTTP 条件 GET 机制的基础知识。 相信我,这是一本必读的书。

我发布了 与SO问题的类似答案(但使用PHP代码,抱歉)我可以使用“http header”来检查动态页面是否已更改。 将代码从 PHP 移植到 C# 应该很容易(如果以后有时间的话,我会这样做。)

安全说明:执行 ("css/" + cssFileName + ".css") 之类的操作是非常不安全的,因为您可以发送相对路径字符串,因此您可以向用户发送不同文件的内容。 您需要想出一个更好的方法来找出要发送的 CSS 文件。

设计说明:您可能需要使用 IHttpModuleIHttpHandler,但是这种方式工作得很好。

As jeroen suggested you can have somthing like:

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

Then your StyleSelector.aspx file should be something like this:

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

And your StyleSelector.aspx.cs like this:

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");
        }
    }
}

This would send the user the contents of a CSS file (actually any file, see security note) based on query string arguments. Now the tricky part is doing the Conditional GET, which is the fancy name for checking if the user has the page in the cache or not.

First of all I highly recommend you reading HTTP Conditional GET for RSS hackers, a great article that explains the basics of HTTP Conditional GET mechanism. It is a must read, believe me.

I've posted a similar answer (but with PHP code, sorry) to the SO question can i use “http header” to check if a dynamic page has been changed. It should be easy to port the code from PHP to C# (I'll do it if later I have the time.)

Security note: it is highly insecure doing something like ("css/" + cssFileName + ".css"), as you may send a relative path string and thus you may send the user the content of a different file. You are to come up with a better way to find out what CSS file to send.

Design note: instead of an .aspx page you might want to use an IHttpModule or IHttpHandler, but this way works just fine.

分开我的手 2024-07-11 17:28:57

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

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

Without using js, you can just keep the css filename in a session variable. When a request is made to the Main Page, you simply compose the css link tag with the session variable name.

Being the ccs file name different, you force the broswer to download it without needing to check what was previusly loaded in the browser.

摇划花蜜的午后 2024-07-11 17:28:57

我不知道这是否是正确的用法,但我认为您可以使用查询字符串强制重新加载 css 文件:

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

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

I don´t know if it is correct usage, but I think you can force a reload of the css file using a query string:

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

I remember I used this method years ago to force a reload of a web-cam image, but time has probably moved on...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文