CSS Adventures: Using filemtime to avoid caching

I started building websites in the early 2000s and most websites would be updated with: “refresh if you can’t see the new layout”. Because some browsers cached CSS like a demon, you would have to force (or in this case, invite) users to clear their cache manually to be able to see updated code.

I usually left it up to the users’ browsers/machines to magically return the most updated CSS and didn’t think about combatting this issue on my own websites until recently. Renaming the file to something like style-v2.css was a common hack and certainly not the most ideal.

If your file is in PHP, you can use the function filemtime to attach a timestamp to the end of your CSS file.

<link rel="stylesheet" href="style.min.css?<?php echo date('Ymd', filemtime('style.min.css')); ?>" type="text/css" media="screen">

Ymd can be altered to any PHP date values in any order you prefer, and can go as specific as seconds if you feel you really need it. If you own a small site and update your CSS only once a day, Ymd should be enough. You need to update the value in filemtime to reflect your own file name.

You can also manually change the value behind the question mark to a new number each time you update your CSS. This is obviously quite easy to follow, but I chose to use a date to allow it to be taken care of automatically.

If you use filemtime, you can have the date as part of the file name itself:

style.<?php echo date('YmD', filemtime('style.css')); ?>.css

I’m using WordPress for my blog, so my current code is something like this. I call my stylesheet using the bloginfo('template_url'), then pull the directory of the stylesheet along with its file name to generate the last modified date.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.min.css?<?php echo date('Ymd', filemtime( get_stylesheet_directory() . '/style.min.css' )); ?>" type="text/css" media="screen">

Comments on this post

You don’t even need to use a date format — printing the output of filemtime() directly works just as well, since it comes out as a Unix timestamp, which is a number.

But my favourite part of this post has nothing to do with the topic at hand — it’s the use of <mark> in the code snippets to highlight key portions of the code.

Yep! I personally prefer to use the format so I’ll be able to read and understand it. I’m sure other people new to the concept will prefer it as well.

Since using the mark element to highlight text in my search results, I have found that it’s good for other uses too! ;)

This is super useful! And thanks for including the WordPress version for all us dedicated WordPress users. I have never really even thought about this issue. Probably because I do not make little tweaks often enough for people to notice. I noticed the mark element. Very nice! I do not even have a search form set up on my current WordPress theme. I have to tweak a few things till before I go add that.

I can’t believe I’ve never used this, or understood why it was being used! Also didn’t know about the mark element. I guess I do learn something new every day. :P