<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>catapult-creative.com &#187; CSS</title>
	<atom:link href="http://www.catapult-creative.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.catapult-creative.com</link>
	<description>worldwide (web) whatnot</description>
	<lastBuildDate>Fri, 17 Jun 2011 00:45:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Forcing browsers to reload CSS</title>
		<link>http://www.catapult-creative.com/2008/10/16/forcing-browsers-to-reload-css/</link>
		<comments>http://www.catapult-creative.com/2008/10/16/forcing-browsers-to-reload-css/#comments</comments>
		<pubDate>Thu, 16 Oct 2008 16:12:00 +0000</pubDate>
		<dc:creator>Trevor</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[CodeDunce]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">tag:www.catapult-creative.com,2008-10-16:83</guid>
		<description><![CDATA[If you manage a decently high-traffic site, you will have run into the problem of needing to force your users&#8217; browsers to reload your CSS files when you&#8217;ve made updates to them.  I solve this by appending a query string to the end of the stylesheet&#8217;s href, so that this

1&#60;link rel=&#34;stylesheet&#34; href=&#34;/css/master.css&#34;&#62;

Becomes this:

1&#60;link rel=&#34;stylesheet&#34; [...]]]></description>
			<content:encoded><![CDATA[<p>If you manage a decently high-traffic site, you will have run into the problem of needing to force your users&#8217; browsers to reload your <span class="caps">CSS </span>files when you&#8217;ve made updates to them.  I solve this by appending a query string to the end of the stylesheet&#8217;s href, so that this</p>

<div class="codecolorer-container html4strict blackboard" style="overflow:auto;white-space:nowrap;width:620px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="html4strict codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;/css/master.css&quot;</span>&gt;</span></div></td></tr></tbody></table></div>

<p>Becomes this:</p>

<div class="codecolorer-container html4strict blackboard" style="overflow:auto;white-space:nowrap;width:620px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="html4strict codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;/css/master.css?foo=bar&quot;</span>&gt;</span></div></td></tr></tbody></table></div>

<p>This forces the browser to reload the stylesheet because it sees that href and thinks that it&#8217;s an asset it doesn&#8217;t have cached.  When it asks the server for it, the server has nothing it can do with the query, so the query is ignored and the stylesheet is served again.</p>

<p>I got tired of throwing random stuff on the end of the <span class="caps">URL</span>s though, so yesterday I wrote a Ruby script to do this for me, throwing a date/time stamp on the end of the href.  The real one is customized for my particular site&#8217;s setup, but I&#8217;ve put the basics below so you can see how I handled it.  I&#8217;m assuming that you&#8217;ve got an ID declared on the link element you want to mess with.  Mine is called <strong>default-stylesheet</strong>.</p>

<p>Checkout the <a href="http://gist.github.com/17184" title="gist: 17184 &amp;mdash; GitHub">Gist of the script</a></p>

<p>I have a script like this on my webserver and I run it whenever I do major updates.  The real one is augmented to allow you to pass arguments to act on staging or production.  There are a million ways to set it up, but the basics above will be present in almost any approach.</p>]]></content:encoded>
			<wfw:commentRss>http://www.catapult-creative.com/2008/10/16/forcing-browsers-to-reload-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

