Remove loading artifact with PHP generated CSS

I'm using PHP to create maintainable stylesheets, as described in the following article: http://www.barelyfitz.com/projects/csscolor/

开发者_JS百科

However, as PHP takes a tiny bit of time to generate this file "dynamically", it doesn't get cached by the client's browser and shows all elements as blank/unstyled for a fraction of a second. Is there any way to cache the CSS or to remove that artifact?

The website reference is http://www.leadwerks.net/.

Thanks!

---

If the CSS file is being generated dynamically, but not changing per request, send far distant expiry headers, and append the last modified time to the file so you can break the cache if you need to update it.

Update

So I'm guessing your PHP file will have somewhere....

header('Content-Type: text/css');

...so add this...

header('Expires: '.gmdate('D, d M Y H:i:s', strtotime('+1 year')).' GMT');

Then, when referencing the CSS file, do this...

<?php echo $file = '/styles/custom.php' ;?>
<link rel="stylesheet"
      type="text/css"
      href="<?php echo $file; ?>?m=<?php echo filemtime($file); ?>"
/>

Without this, users would not see the changes to your site for a year since they first downloaded the CSS. When you update the file, you will change the number appended. If you don't physically change the file (it uses database calls), you could select a last updated row or append a version control number.