4

My situation
I am currently using Cache Busting when I include CSS files like this:

echo "<link href='stylesheet.css?" . filemtime('stylesheet.css') . "' />"

My goal
Now I would like to do something similar for the images I am including inside my CSS file.

The problem
The problem is that I cannot use PHP inside my CSS files and I would rather keep my CSS files seperated.

My question
How can I add the filemtime() to the images inside my CSS files while keeping the files seperated?


Edit
I would like to use Far Future Expires headers to cache the files.

1
  • 1
    i think you just can't, as long as you don't use any script to generate your css stylesheet
    – tsadiq
    Mar 4, 2011 at 16:06

2 Answers 2

3

You could actually rename your css files as style.css.php and then use PHP inside them. As long as the post-processing result is in the proper CSS format, it should work. I've done it in the past. I'm not sure if it's necessary, but if that gives you problems, you can use a header('Content-type...') kind of thing and ensure it's sent as a CSS file.

4
  • I something similar (also servers to include multiple CSS files, and to minify them and serve a cached copy of that minified file - with the option to turn that behaviour off on development instance of the site) and it works very well with no issues in any browsers. To keep things clean in my CSS I use a tag on image URL's (e.g. img.png?v=CSS_FILE_VERSION) and do a regex on the CSS tag when serving them (or, specifically in my case, when generating the minified version of the CSS file) Mar 4, 2011 at 16:12
  • Oh and I would add it's particularly handy for images as backgrounds in objects like <div> or <table> child elements. These seem to be cached aggressively in some versions of Internet Explorer in particular. Mar 4, 2011 at 16:16
  • Is this really the best way? I prefer to keep the CSS extension. Mar 8, 2011 at 17:35
  • You can rework the .htaccess file to treat CSS files as PHP files and still keep the .css extension. Your .htaccess should already have something that defines .php as PHP files, so just add another line that does that for .css and it should work.
    – Jemaclus
    Mar 23, 2011 at 15:36
2

To achieve cache-busting, the best way is to send the proper headers. Make sure Apache is configured to send a Expires: now header. So in a .htaccss file:

Header always set Cache-Control "no-store, no-cache, must-revalidate"
Header always set Expires "Thu, 01 Jan 1970 00:00:00 GMT"

That will always force no-caching of all content in its directory and any under.

However, if you wanted to conditionally cache, what I would suggest, is doing one of a few things.

  1. Include a version number in the name of the CSS file. So you'd have a file that looks like mycss.1.css, mycss.2.css. This takes a little more work since you need to coordinate both filenames. But it's better since you aren't sending the files with PHP (no resource hit), you can use a CDN (even better) and you can still take advantage of far-future expires headers.

  2. Set the Cache-Control: must-revalidate header and a proper E-Tag header so that all it needs to do is send a 304 Not Modified header if the content didn't change...

3
  • 1
    I know how to achieve cache-busting. Please read my question. -1 Mar 8, 2011 at 17:34
  • 1
    @Michiel: I did read your question, and I was pointing out that there are better and more standard ways of doing this than appending a modification time to a filename. Send the proper headers and you don't need to worry about that...
    – ircmaxell
    Mar 8, 2011 at 17:51
  • Allright, but I would like to automatically update the links so I can just save my files with the same name. I forgot to mention that I would like to use Far Future Expires headers to cache the files. By the way, I still haven't found the right answer. So you could still get Best answer. Mar 9, 2011 at 8:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.