ブラウザに新しい CSS の使用を強制する

StackOverflow https://stackoverflow.com/questions/101125

  •  01-07-2019
  •  | 
  •  

質問

ユーザーがブラウザに別のバージョンの CSS をキャッシュしているかどうかを確認し、そうである場合はブラウザに新しいバージョンを強制的に取得させる方法はありますか?

役に立ちましたか？

解決

それが正しい使用法かどうかはわかりませんが、クエリ文字列を使用して CSS ファイルを強制的にリロードできると思います。

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

何年も前にこの方法を使って Web カメラの画像を強制的にリロードしたことを覚えていますが、おそらく時間は進んでいます...

他のヒント

js を使用せずに、css ファイル名をセッション変数に保持するだけで済みます。メイン ページに対してリクエストが行われるときは、セッション変数名を使用して CSS リンク タグを作成するだけです。

ccs ファイル名が異なるため、以前にブラウザにロードされた内容を確認することなく、ブラウザにファイルを強制的にダウンロードさせます。

として ジェロンが提案した 次のようなものができます:

<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 メカニズムの基本を説明する素晴らしい記事です。それは 必読, 、 私を信じて。

投稿しました 同様の答え （ただし、PHPコードでは、申し訳ありません）SOの質問へ 「http ヘッダー」を使用して動的ページが変更されたかどうかを確認できますか. 。コードを PHP から C# に移植するのは簡単なはずです (後で時間があれば移植します)。

セキュリティ上の注意:("css/" + cssFileName + ".css") のようなことを行うのは、相対パス文字列を送信する可能性があり、ユーザーに別のファイルのコンテンツを送信する可能性があるため、非常に安全ではありません。どの CSS ファイルを送信するかを見つけるためのより良い方法を考え出す必要があります。

デザインノート:.aspx ページの代わりに、 IHttpModule または IHttpHandler, しかし、この方法は問題なく機能します。

質問1の答え

を書くこともできます サーバー制御 System.Web.UI.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>
...

おそらく、共通の祖先クラスを共有するだけでよく、必要に応じて単一の js コマンドでそれをフリックできます。

<body class="style2">

<body class="style1">

等

スタイルシート URL にクエリ文字列を追加するという jeroen の提案が気に入っています。スタイルシート ファイルが最後に変更されたときのタイムスタンプを追加できます。これは、LINK タグを生成するヘルパー関数またはカスタム コントロールの良い候補のように思えます。

質問が特に 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 を使用していないので、あまり役に立ちません :(

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top