Tired of Refreshing Your CSS Everytime You Make A Change?

Posted in these categories: Tutorial

So am I.  I  make changes a lot live on the server (using the Web Dev Toolbar), and I have to hard-refresh every time I make a change.  Doesn’t sound like a big deal, but it cuts down on valuable time that could be done… well, not refreshing a page.  There is a way; versioning your CSS file.  The upside: it makes changes go live automatically without having to clear the cache.  The downside: it’s difficult to do, because the correct way to do it is by adding v=XXX manually every time you make changes.

Unless… you can find a way to do it automatically.  And Mark Jaquith has done just that.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?v=<?php echo filemtime(TEMPLATEPATH . '/style.css'); ?>" type="text/css" media="screen, projection" />

So what does the ‘filemtime’ function do?  From the PHP website:

This function returns the time when the data blocks of a file were being written to, that is, the time when the content of the file was changed.

So everytime you change the file, the new change time gets parsed in using PHP and you’re able to have a new version every time.

Thanks to Mark for this great (and really clever) tip!

Tags: ,

  • albuterol
    Thank you for the tip. I really tired of ctrl+F5
  • That sounds like a great idea to save time and energy from having to refresh every time an update is made to your page.
  • This is actually a really cool idea. I hadn’t thought of it before, but I can see how it would be really useful. Love your blog BTW, has many cool tips and tricks! Thanks!
  • That's a life-saver. Thanks!
  • Looks like an easy thing to do. Thanks for clearing this up. Could save a lot refreshing when trying to alter css-files.
  • Really great tip.We can avoid to hit Ctl+F5 after using this code,thanks a lot.
blog comments powered by Disqus