How to fix browser file caching without a new filename

Joel Pittet — Thu, 15 Apr 2010 08:22:08 +0000

Problem

You have probably run into this problem many times. Your client gives you a new file to replace the old one. You say OK, and post the new file and let your client know. They say it’s not changed and you swear it has, you check and it has so you let them know to try again and they and you are suprised that now it works even though you haven’t made a change. You realize the browser has cached the old version but you just suck it up and go on with your life till it happens again. This is very common with large assets like PDF files, Flash files and large images. Also it happens a lot in web applications that replace images.

Solution

Put a query string on the file name. By convention I will have a filename like specifications.pdf and I will just put specificaitons.pdf?v=2 at the end of the href. It doesn’t affect the filename when downloaded but does tell the browser that it is a new file. It’s much nicer than putting these version or dates into the actual filename unless that is required of you, which keeps the filename nice and simple.

For web applications that change files and display them like an image cropper for example, a great way is to append a datetime on the end of the newly uploaded file. So that would be filename.jpg?2010-11-30-11:10:23 or what ever format you prefer. This can be accomplished server or client side, so what ever option you prefer.

Replacing .clearfix with overflow:auto/hidden

Joel Pittet — Mon, 02 Mar 2009 07:04:20 +0000

There has been many ways over the years to give the height back to the background of a container around floating elements.

First Version

This was the first method I spotted years back. This method which left a 1px gap at the end and other unwanted problems.

1
2
3
4
5

</div>
<div id="main"></div>
<div ="clear"></div>
</div>

Second version

The next one replaced the extra HTML for a CSS class which added the content in after the divs through the CSS. The CSS hacks essentially fix all the problems with the above version and some.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

</div>
<div id="main"></div>
</div>

Latest

This removes most of the hacks. Makes a cleaner CSS and markup and seems to suit me well.

1
2
3
4
5
6
7
8
9
10
11

</div>
<div id="main"></div>
</div>

Further information

Info on hasLayout
http://www.satzansatz.de/cssd/onhavinglayout.html
4 years ago sitepoint posted this:
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

If you find one nicer, please let me know in the comments. Or if you have a case where this doesn’t work. Send me some sample code.

Log » html