Rails 3: How to prevent image caching when the image is specified in the CSS file?

Consider the following CSS:

.my_class {
  background-image: url(/images/sprites.png);
}

Sometimes I change sprites.png by adding new sprites to it, so I don't want the browser to cache it.

One idea I thought of is to add style="background-image: url(/images/sprites.png?<random_number_here>)" to all elements with class my_class, and 开发者_如何学运维delete the CSS code above. But, I don't like this solution because of maintainability issues (if for example the file name changes, I have to change it in many places, rather than a single CSS).

What other solutions exist to this problem ?

One way around this is to add a version string to your style directory.

<link rel="stylesheet" href="/css.1000/styles.css" type="text/css" />

Ensure that your css uses URLs relative to that directory. (In this example, the image directory for css links is css.1000/image)

.my_class {
    background-image: url(images/sprites.png);
}

Then, use mod_rewrite to add a rewrite rule to the .htaccess file in your site's root folder, this will make any numerical path /css.1000/styles.css point to /css/styles.css on the server:

RewriteEngine On
RewriteRule css[\.][0-9]+/(.*)$ css/$1 [L]

Any time you change your site's assets, you change the version number of the folder in your stylesheet link.

I would suggest one of these two techniques:

Use Javascript to perform the cache update technique.

 $('.my_class').ready(function() { 
   $(this).css('background-image', 
    $(this).css('background-image') + "?" + Math.random());
 }

Use specific server content-control for your given page. This is from this StackExchange answer for nginx (similar techniques exist in apache):

 server {
   ...

   location = /images/sprites.png {
    expires 1d;
   }
   ...
 }

These will both work to help mitigate your issue. Good luck!

Use rails asset pipeline (i.e. rails > 3.1), and it automatically does this for you via the fingerprinting mechanism:

http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark

Rename your mycss.css to mycss.css.erb and specify the images as:

.my_class { background-image: url(<%= asset_path 'image.png' %>) }

Rails will take care of everything else (you need to enable asset precompilation as well).