Textpattern tips, tutorials and code snippets

Force client refresh CSS at time intervals

I hate it when I push a new version of an old site and a site visitor’s browser hangs on to the old CSS like a crazed harpie.

The following code forces the new CSS to be used weekly. It can easily be adapted to any interval you like by changing the format of the date call on the opening line: <txp:php>echo date('W-y');</txp:php>.

The code

<txp:variable name="css-date">?<txp:php>echo date('W-y');</txp:php></txp:variable>
  <link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css format="url"/><txp:variable name="css-date"/>" />
<!-- Fix for the Redmond Ass Hats -->
  <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css name="IE6" format="url"/><txp:variable name="css-date"/>" /><![endif]-->
  <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css name="IE7" format="url"/><txp:variable name="css-date"/>" /><![endif]-->
  <!--[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css name="IE8" format="url"/><txp:variable name="css-date"/>" /><![endif]-->

Native Textpattern CSS tag

Note that the above code uses the rvm_css plugin. If you prefer to use the native Textpattern method instead, just replace the <txp:rvm_css format="url"/> in the above code with the <txp:css format="url"/> tag.

More information on this topic in the related forum thread. For more about the excellent rvm_css plugin, see the forum thread dedicated to the plugin.

5 Comments Comment feed

This breaks the caching. You don’t really want to load the css every week anew.

I would hardcode the css-date variable with a version string or date and update this manually after a modifaction of the css.

Thanks Tommy aka trenc – care to post a code snippet with your suggestion?

Hi Jonathan,

shure.
If I stay with the example above, I would do something. Btw, there is a custom_field tag in the post. I think this should be a variable tag.

<txp:variable name="css-date">?v=20120410</txp:variable>
  <link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css format="url"/><txp:variable name="css-date"/>" />
<!-- Fix for the Redmond Ass Hats -->
  <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css name="IE6" format="url"/><txp:variable name="css-date"/>" /><![endif]-->
  <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css name="IE7" format="url"/><txp:variable name="css-date"/>" /><![endif]-->
  <!--[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="<txp:rvm_css name="IE8" format="url"/><txp:variable name="css-date"/>" /><![endif]-->

Now, the css file is loaded one time and then is cached. If I modify the css file then I have to change the <txp:variable name="css-date" /> to the current date. Then the browsers will load the css file anew and will cache it until you change the css-date variable again.

Thanks Tommy! I have amended the post above – thanks for spotting the error and for the code example. Looks good!

Here is a snippet of php by Bloke that comes in handy for making sure the cache doesn’t spoil the party:

Add a comment

Use Textile help to style your comments