Safari, Cache, You & Me

I have a dynamically driven external CSS file, which is strictly told not to cache itself, yet Safari thinks it is a good idea to indeed cache that file. Yes, this is the example from php.net :)

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");


The css file still caches in Safari when linked! However, if I head on over the the dynamic css file directly, it doesn't cache.

Is my only real solution here inline styles or can Safari be beaten into submission?

Strange, never had any problems myself... Try removing the no-cache code for Safari, yet keep it there for all other browsers.

Quick Example:
http://beta.circusbred.com/wtf.htm

wtf.php source:<?php
header("Content-Type: text/css");
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// always modified
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

// HTTP/1.0
header("Pragma: no-cache");

$color = array (1 => "#cce", "#cee", "#ccc", "#eee", "#ece", "#eec", "#ecc");
$x = rand(1, 7);
echo '
#box {
background-color:'.$color[$x].';
top:50px;
height:250px;
border: 1px dashed #000;
padding:50px;
width:500px;
position:absolute;
left:50%;
margin-left:-250px;
}';

?>

EDIT #1: As you notice, Safari will cache the CSS file & the box will stay the same color unless you hit REFRESH.

EDIT #2: I tried removing no-cache, still the same problem.

Why don't you want the file cached?

Because it changes depending upon certain variables... which is what makes the style sheet dynamic, which is why it cannot be cached.

Everytime I click the link it changes... You using 1.0?

Hehe. I suppose I should have stated the version...
1.0 (v85) for 10.2.8

Good to know that it was fixed though.

Why don't you just put the CSS into a style block inside the document head?

Good to know that it was fixed though.

Heh... about everything except some more advance XML stuff was fixed ;)



Why don't you just put the CSS into a style block inside the document head?

Bandwidth.

How is making the browser send another seperate HTTP request for the file going to save you bandwidth?

How is making the browser send another seperate HTTP request for the file going to save you bandwidth?
Because I'm an idiot.

But there's no good way to "hide" <style> contents from legacy browsers - using an external file is the right way.

Does<link rel="stylesheet" type="text/css" href="/css/index.css" media="screen,projector">not hide it from old browsers? Plus, if you want to hide your stylesheets from certain browsers, you should use a server-side language to blacklist them, and not serve them the style.

Yeah it does - exactly. Putting it in a <style> block in the head does not.

What about:<style type="text/css" media="screen,projector"></style>

Besides, I would rather have them download a 0.45 KB than a 5-10KB file every time.

What about:<style type="text/css" media="screen,projector"></style>
What about it?

The point is that a browser which doesn't understand the element will render its contents as literal text, which is why procedural code inside any HTML element should be avoided - this means <style> and <script>

I have yet to find a browser that renders the head element or any of its children without explicit instructions.

What about Netscape 3 or Mosaic? They both do exactly that, and whether you think it's right or not, people are still using these ancient browsers.