Force CSS refresh

Hi everyone,

I have problems with the update of the css files when I change something…it has been happening since the beginning but normally it works just recharging the page.

I don´t know how to really solve this because some people keep having the same problem, but when I open the browser and make a test…I don´t see anything wrong.

I use @import in the CSS, I don´t know if this is worse than using one only file.

The page is the following:

I would appreciate if you could give me some tips to solve this problem.

Thanks in advice.

Have you tried clearing the browser cache when you make a change to the CSS?

Only once, but the problem is that I wanna make the proper changes so that the “client” won´t need to do anything, just enter to the page.

In my case I see everything ok, but I have seen screenshot of other people using the website and even after refreshing the page they keep seeing everything messed.

I honestly don’t know for certain if or how that may affect caching, but being a link to a file within a linked file, I imagine it’s possibly a problem.
If you can consolidate all your css to a single file, it is generally better, at least in terms of page speed, as you cut down requests. If for some reason you can’t consolidate them, it may be better as another link rather than @import as that will not allow parallel downloading of multiple css files, they are forced into sequence.

I made that way so that I could have different css files for each site, and not to be messed, but if it is a problem I will change to only one.

As SamA74 suggested, you may use more than one <link..> to call more than one stylesheet instead of using the @import method which is slower.

That said, the fewer stylesheets called the better.

Just append a version number to the css filename every time you update the css and it will be treated as a new css file and won 't exist in the cache.

e.g.
style.css?version=3.2

9 Likes

Using this method, do I have to change the css file name?

No, the filename will not change, but you will have to alter the variable appended to it where the file is linked in the head of your html documents.

<link rel="stylesheet" type="text/css" href="css/style.css?version=2.4">

Though this did get me thinking if I could do some php script to check the file mod date and change it automatically, to save having to update and upload the html template on every css change.

1 Like

So, using PHP, could I use for example:

<link rel="stylesheet" type="text/css" href="css/style.css?<?php echo date()  ?>">

I think that would force a refresh every day, if that is what you want.
It is not something I have tried yet, just an idea. I was thinking of a function to get the time the file was last modified to force a refresh when an update has occurred.
For example:-

<link rel="stylesheet" type="text/css" href="css/style.css?version=<?php echo get_file_mod_date('style.css')  ?>">

Though I don’t have such a function as yet, I have not thought too deeply about it.

1 Like

I have tried both ways but It is not working, for get_file_mod_date() it returns me this error:

Fatal error: Call to undefined function get_file_mod_date() in /Applications/XAMPP/xamppfiles/htdocs/XboxOne/views/single.view.php on line 4

And for the date() asked me for 1 parameter:

Warning: date() expects at least 1 parameter, 0 given in /Applications/XAMPP/xamppfiles/htdocs/XboxOne/views/single.view.php on line 4

That will be why. :wink:

You need to give date() a format.
http://php.net/manual/en/function.date.php

1 Like

Finally worked! :slight_smile:

Thanks for your help!

Don’t update the css file based on date (or time) as you don’t want to break the web as other people have to use it :). It will also annoy visitors if they always have to wait for the page to load each time they visit when nothing has changed.

Have a look at the second to last comment here which suggests a php way to update the url based on when it was changed.

Be aware that some have stated that Firefox doesn’t cache urls with query strings so you will need to check if that is still true.

3 Likes

Of course filemtime().
I knew there was a function for it, but could not remember its name, even though I have used it in the past for other things.

Ops, I have used date() and everything seems to work well…at least the problem I had was solved.

Not in the best way, though. It won’t be good for your end users.

The suggested solution was to use something like this as a query string:

<?php echo filemtime(TEMPLATEPATH . 'https://cdn.css-tricks.com/style.css'); ?>

I’m not actually sure what that means for most sites, though. Could you elucidate how to use it (say, on a static site) @SamA74?

Hello.
You could also use the htacces method to control browser and apache (?) cache and specify what files not to be cached (the style.css). When you finish the site you could comment that lines, since even minified CSS files could have more than 100kB that you force visitors to download each time they enter the site.

Tip: when page is messed up instruct your client to make a Ctrl-F5 (most browsers force refresh with this).

Yes, just using date is not ideal. The filemtime() function returns the time as a Unix timestamp by default, which is enough for the browser to identify it as changed, but if you want it to be human readable too, which may be useful and more meaningful, you would have to use it inconjunction with date() to give it more readable format, for example:-

<link rel="stylesheet" type="text/css" href="css/style.css?version=<?php echo date('Y-m-d-H-i-s', filemtime($cssfile))  ?>">

Well it would of course require your server runs PHP for a start.
Static sites may well use files with the .html extension, which will not generally be parsed as php (though they can be set up to), which may be an issue as you really want a .php extension.
If you are using htaccess to hide extensions, switching between and changing them should not be such an issue.
So yes, if you are not already using php, it may not be so easy depending how your site is set up.

1 Like