브라우저가 새로운 CSS를 사용하도록 강제

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

  •  01-07-2019
  •  | 
  •  

문제

사용자의 브라우저에 캐시된 CSS의 다른 버전이 있는지 확인하고, 그렇다면 브라우저가 새 버전을 가져오도록 할 수 있는 방법이 있습니까?

도움이 되었습니까?

해결책

올바른 사용법인지는 모르겠지만 쿼리 문자열을 사용하여 CSS 파일을 강제로 다시 로드할 수 있다고 생각합니다.

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

몇 년 전에 웹캠 이미지를 강제로 다시 로드하기 위해 이 방법을 사용한 기억이 나지만 시간이 많이 흐른 것 같습니다...

다른 팁

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>

하지만 아마 아파치를 사용하지 않을 것이기 때문에 그다지 도움이 되지는 않을 것입니다. :(

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top