‘html’ Category

How to fix browser file caching without a new filename

Thursday, April 15th, 2010

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

Sunday, March 1st, 2009

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
<!--
.clear {
    clear: both;
}
-->
1
2
3
4
5
<div id="container">
    <div id="left"><!-- Left Content --></div>
    <div id="main"><!-- Right content --></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
<!--
.clearfix:after {
    content: ".";  /* Adds content to show the containing box where to end it's rendering */
    display: block;
    height: 0; /* Prevents the content from adding any more height to it's parent */
    clear: both; /* keeps this content under the floating elements */
    visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
-->
1
2
3
4
<div id="container" class="clearfix">
    <div id="left"><!-- Left Content --></div>
    <div id="main"><!-- Right content --></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
<!--
#container {
    overflow: auto; /*  if this element has padding user overflow: hidden; */
}

/* IE6 stylesheet needs hasLayout turned on */
#container {
    zoom: 1;
}

-->
1
2
3
4
<div id="container" class="clearfix">
    <div id="left"><!-- Left Content --></div>
    <div id="main"><!-- Right content --></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.