1

Following the accepted answer here on SO, I am trying to create a stylesheet that is editable with PHP.

What's happening...

I am trying to make the stylesheet (named css.php) cache in the user's browser so that he/she does not have to load it on every pageload, and have set the following headers to do so:

header('Content-Type: text/css;;charset=UTF-8');
header('cache-control: max-age=86400;');
header('Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT;');
header('Expires: Sat, 22 Nov 2014 16:00:00 GMT;');
header('cache-control: max-age=86400;');

These are the other headers sent by default:

Connection:"Keep-Alive"
Content-Encoding:"gzip"
Content-Length:"393"
Date:"Fri, 21 Nov 2014 17:00:50 GMT"
Keep-Alive:"timeout=5, max=99"
Server:"Apache"
Vary:"Accept-Encoding"
X-Frame-Options:"SAMEORIGIN"

However, upon loading a page that references the css.php page multiple times, it continues to reload the CSS page every time.

How do I know this...

I am receiving a hit to the css.php page every time I load the page which uses the stylesheet on my apache server access logs.

I can see that my Firefox browser is accessing the css.php page in the Inspect Element tool. It is receiving a HTTP 200 every time.

What should I do?

Community
  • 1
  • 1
HelpingHand
  • 1,045
  • 11
  • 26
  • you need to set headers expires time in advance. You're setting it for today, browsers normally cache the css anyway, the problems normally arise when someone changes the css and the browser has the cached version so the changes don't show up, this is backwards... – Billy Nov 21 '14 at 17:55
  • Today is the 21st. Plus, the CSS is not cached normally here because it is disguised as a PHP file. – HelpingHand Nov 21 '14 at 17:56
  • 1
    Receiving a HTTP 200 is normal even if the item is cached. What you need to look for is `(from cache)` which is displayed in size/content column in Chrome DevTools (no idea about firefox). Also keep in mind that most devtools disable that cache by default to you may need to untick the `disable cache` checkbox (in chrome this is at the top of the network panel) – robjtede Nov 21 '14 at 17:59
  • @billy Don't worry, I lose days too... :) – HelpingHand Nov 21 '14 at 17:59
  • @robjtede I see it in the server logs as well... – HelpingHand Nov 21 '14 at 18:00
  • @HelpingHand It's fine. The page still requests sends a request out, the server acknowledges it and sends back "you already have this file in cache". If you see `(from cache)` in DevTools this is how you know it's working, not by the HTTP Statuses – robjtede Nov 21 '14 at 18:02
  • @robjtede Wouldn't that be a `304 Not Modified`? – HelpingHand Nov 21 '14 at 18:04
  • About 304 http://stackoverflow.com/questions/2978496/make-php-page-return-304-not-modified-if-it-hasnt-been-modified – Cheery Nov 21 '14 at 18:07
  • @Cheery That's insane just to get a browser to cache a file for a day or a session! – HelpingHand Nov 21 '14 at 18:09
  • @HelpingHand, I looked at the default headers.... – Billy Nov 21 '14 at 18:13
  • @billy Ahh... gotcha. That just sends the current date. – HelpingHand Nov 21 '14 at 18:14
  • @HelpingHand just to show, that 304 is not generated automatically in case of php scripts. – Cheery Nov 21 '14 at 18:15
  • @Cheery Yeah, I knew that. Thanks anyway! :) – HelpingHand Nov 21 '14 at 18:16
  • 1
    when I was writing in the comment box the page was scrolled down so couldn't see the tp box at the same time..note to self, read questions properly.... – Billy Nov 21 '14 at 18:17
  • Could you not just use file_put_contents and write the file each time changes are made, That way all the browser sees is a normal css file? – Billy Nov 21 '14 at 18:18
  • @billy Haha... I've made the same mistake of jumping to answer without an understanding of the question. I think we all have made that mistake! – HelpingHand Nov 21 '14 at 18:19
  • Maybe... I'll think about that... – HelpingHand Nov 21 '14 at 18:20
  • if you dynamically write the link to the css each time the pages are created then you can add a version number on the end and when you change the css file just up the version number, that way any cached css's are updated. – Billy Nov 21 '14 at 18:27
  • @billy Write your file_put_contents() solution into an answer. It looks like that's what I'll do... – HelpingHand Nov 21 '14 at 18:39
  • Did you check if the headers actually get sent? – Salman A Nov 21 '14 at 18:55
  • Yeah, they are sent. I can see them with the `Inspect Element` tool on Firefox. – HelpingHand Nov 21 '14 at 19:49

1 Answers1

0

Instead of creating a dynamic CSS file, change the standard one each time with PHP's file_put_contents() function.

Example:

 file_put_contents("styles.css", $css_input);

That way, browsers will cache the file like normal.

Example:

<link rel="stylesheet" type="text/css" href="styles.css"/>

When you make changes the the actual CSS, browsers will automatically load the new one upon restart.

HelpingHand
  • 1,045
  • 11
  • 26
Billy
  • 2,448
  • 1
  • 10
  • 13