Bypass visitor cache after CSS-Development

phreak · February 2015

Hi all,

I'm regulary working on my themes and as visitors and users tendencially have caching on in their browser, they sometimes have problems when i applied changes, they are not yet seeing or that is throwing their HTML and CSS through the wind.

There is this idea of adding for example a date to CSS files for one day or two days so that they will be cached newly and then change back to a regular filename.

<link rel="stylesheet" type="text/css" href="style.css?Monday 12th of February 2015 04:45:21 PM" />

It can be created by adding following to the insertion of style.css in the HEAD.

style.css<?php echo date('l jS \of F Y h:i:s A'); ?>

But in Vanilla, the Style.css is created in different files in the core. What would you suggest to bypass a visitors and users browser cache. Is this a solution? Would it be good to factor the style.css into one file instead of lying around in different files?

I guess you have smarter thought on this. )

hgtonight · February 2015

You can bust the cache on assets by changing the application version.

phreak · February 2015

@hgtonight: True thing, but how can this easily be done. For example: If i add v1.5 to style-v15.css it would crush the design. I could add another css in the theme, but when it comes to SEO and pagespeed more CSS files are downturn on that (i even deleted custom.css and packed everything into the style.css).

ngakaks · February 2015

CSSRefresh JS

When you're coding a website, nothing can be more frustrating than having to switch from the texteditor to the browser over and over again, just for small changes to occur. With CSSrefresh installed, all the included stylesheets are automatically refreshed directly after you save them.

Using CSSrefresh is easy. You can either include the javascript-file in your webpage, or use the bookmarklet.

Get the script:

(Download CSSRefresh.js here)

and include it in your theme:

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

Note: Only CSS-files included before the CSSrefresh-file will be refreshed.

Bleistivt · February 2015

@ngakaks This is very useful for development, but @phreak asked about breaking the cache for users of the website.

If you had a custom.css, it would be much easier, because the theme version is appended as a querystring.
e.g. on this forum, the theme version is 1.5.3:

<link rel="stylesheet" type="text/css" href="/themes/vforg/design/custom.css?v=1.5.3" media="all" />

When this is changed, browsers will re-download the file.

Generally I would use some kind of asset minification, because the number of javascript and css files included by vanilla is ridiculous (let alone the uncompressed jquery-ui library), especially if you have a lot of plugins.

http://vanillaforums.org/addon/consolidate-plugin

Consolidate also lets you purge the cache manually.

x00 · February 2015

Consolidate is good way, not to blow my own trumpet. All you need to do is clear after minor change.

Otherwise Tbh if a theme needs to use style.css you are probably best excluding then including in a theme hooks file. Implicit inclusion is nice, but in fact explicit inclusion often trumps.

You can control the version of your assets in themehooks, and would generally recommend tying to the theme version.

hgtonight · February 2015

@phreak I wasn't clear. Change the application version and the cache will be busted since, as @Bleistivt pointed out, the version gets appended to the query string.

If you don't want to change the version all willy-nilly, you could write an addon that appends a hash, or go @x00's route with consolidate.

x00 · February 2015

If you don't want to change the version all willy-nilly, you could write an addon that appends a hash, or go x00's route with consolidate.

It is only really concerning style.css, you could simply use the themehook method as mentioned.

phreak · February 2015

Thank you all for your inputs. Actually it's quite easy and nice to accomplish it. I tried it by going to the index.php in the root folder of Vanilla and changed line 3

define('APPLICATION_VERSION', '2.0.18.14');

to

define('APPLICATION_VERSION', '2.0.18.14v1');

Whenever i want to refresh, i will add v2, v3 or anything behind it.

Thank you all guys. For me thats a pretty good solution.

Bypass visitor cache after CSS-Development

Comments