CODEWITHSUNDEEP
csscaching
Josh Journey
Josh Journey

Reputation: 135

CSS Cache Busting Via the Style Sheet

Many of us already know the traditional method of cache busting:

<link rel="stylesheet" href="/css/example.css?v2" type="text/css">

Is it possible to do a cache bust via the Style Sheet itself? Perhaps something along the lines of template?v2.css. A method that does not rely on the reference for the cache bust, but rather the file itself. I have a style sheet I regularly update on a external website that is used for over 90 pages. I wouldn't want to have to edit all 90 pages when major edits are made (via the reference).

Upvotes: 0

Views: 189

Answers (1)

d.raev
d.raev

Reputation: 9546

You can try to use some .htaccess magic:

source

RewriteEngine On 
RewriteBase /  
RewriteRule ^css/example-([0-9]+).css$ /css/example.css [L]

This will redirect example-002.css request to the real file example.css.

After that you will have to rename the style definition in your htmls:

<link href="http://z.askapache.com/css/example-002.css" rel="stylesheet" type="text/css" />

It may look as a lot of work to edit 90 files ... but if your names are consistent, you can just use Search&Replace ALL with some IDE and update all references of the css to the next version:

find: example-002.css  
replace with: example-003.css

Also if you make 90 references to the same css in different pages of your site ... may be there is a way to optimize it and set a base template with the default settings, that is inherited ?

If you use PHP, something like this may work for you :

<link href="http://z.askapache.com/css/example-<?php echo $css_version?>.css" rel="stylesheet" type="text/css" />

And define $css_version somewhere in your index.php or settings. So you will have to update all the htmls once, and after that only update this property.

Upvotes: 1

Related Questions