Click here to Skip to main content
Click here to Skip to main content
Go to top

Preventing Stylesheet Caching

, 14 Jan 2010
Rate this:
Please Sign up or sign in to vote.
Preventing the client browser from caching your stylesheets.

Introduction

Don't you just hate it when you release some CSS to a live site but the client's browser doesn't pull down the latest version and the site they see looks horrific?

This article talks you through a simple control I have created that forces the browser to retrieve the latest version of a CSS include.

Using the Code

From a usage point of view, we just need to drag and drop the control from the toolbox. The user specific properties can be set either during design time or runtime.

Below is the markup that will need to be used in your ASP.NET Web Form or User Control:

<CWeb:CSSInclude ID="CSSInclude1" runat="server" 
  EnableViewState="false" HRef="~/css/base.css" 
  Rel="stylesheet" Type="text/css" CacheKey="BaseCSS" />

The properties supported by the control are:

  • HRef - Gets or sets the href to the CSS file in the resulting link element.
  • Rel - Gets or sets the rel for the resulting link element.
  • Type - Gets or sets the type for the resulting link element.
  • CacheKey - Gets or sets the cache key name to be used to store version information about the CSS file in the cache.

The control creates a date stamp based on the last write time to the file. This date stamp is then stored in the cache and a cache dependency is created against the CSS file. When the file changes, the date stamp will change, therefore the client will get the latest stylesheet.

Below is the code used to get the version information for the file:

/// <summary>
/// Gets an includes url with it's version so that browser
/// gets latest version on page refresh if the
/// file has changed
/// </summary>
/// <returns></returns>
private string GetIncludeUrlWithVersion()
{
    string url = string.Empty;
    string version = "1";

    if (string.IsNullOrEmpty(CacheKey))
        throw new ArgumentException("The cacheKey must have a value.");

    if (Page.Cache[CacheKey] == null)
    {
        FileInfo fileInfo = new FileInfo(Page.Server.MapPath(HRef));
        if (fileInfo.Exists)
        {
            version = fileInfo.LastWriteTime.ToString("ddMMyyyyhhmmss");
            CacheDependency cacheDependency = new CacheDependency(fileInfo.FullName);
            Page.Cache.Insert(CacheKey, version, cacheDependency,);
        }
    }
    else
        version = Page.Cache[CacheKey] as string;

    return ResolveUrl(HRef) + "?v=" + version;
}

Points of Interest

The same technique could also be used with script includes to force the browser to pull down the latest versions of js files. The caching issue could also be prevented through the client browser, through IIS, or by adding custom headers to the outgoing response. The technique I have described here is just another way of achieving the same result Smile | :)

History

  • 14th January, 2010: Initial version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

CroweMan
Web Developer
United Kingdom United Kingdom
I have been developing web and software applications for 9 years originally in Microsoft Visual Fox Pro. But for the last 8 years I have been using Microsoft.Net.
 
I love writing code and especially enjoy writing tools to aid development.
 
I have developed my own code generator which generates C# code from a SQL Server database. The generator generates Business Components, Data Components and entities and is optimised for performance as it uses stored procedures and SqlDataReaders.
 
FrameworkGen can be downloaded for free from http://www.elencysolutions.co.uk.

Comments and Discussions

 
QuestionHow to use cs file you have provided in ZIP download. PinmemberVishalKathiriya30-Nov-12 0:02 
GeneralUpdated Code PinmemberCroweMan22-Jan-10 2:34 
GeneralAnother way Pinmemberzhuqil20-Jan-10 23:25 
GeneralRe: Another way PinmemberCroweMan22-Jan-10 2:33 
QuestionOne small change Pinmemberbond.martini18-Jan-10 16:24 
AnswerRe: One small change PinmemberCroweMan19-Jan-10 4:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 14 Jan 2010
Article Copyright 2010 by CroweMan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid