I am looking for the proper way for cach busting images inside CSS.
It is easy to apply versioning to css,js and images links in PHP, using several methods like suggested here: How to force browser to reload cached CSS/JS files?
But I can't figure out how to give a dynamic version to reference links inside the css file, or any other method for enforcing refresh of css references.
Most of the solutions that are out there are for versioning of .html and not .php pages.
In PHP you do not have to use:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
With PHP you can include your CSS.
And you can set your Cache-Control: max-age
Your CSS will cache the same amount of time as your HTML.
Even if you used versioning with the LINK REL the Browser would not get the HTML to find you changed the LINK to the CSS.
Saves HTTP Round TTFB
The Cache Does not matter very much on the CSS if it is "included". You do not have the HTTP Round trip connect and wait time which unless you have excessive amount CSS the content trnsfer time is usually smaller than the connect Time to First Byte.
GoDaddy Example
This page would have loaded over 2 seconds sooner if the CSS and Fonts were contained in the HTML transfer.
CSS File Content Transfer time 1 millisecond Total Time 589 milliseconds
URL: https://cloud.typography.com/7914312/697366/css/fonts.css
Loaded By: https://www.godaddy.com/:15
Host: cloud.typography.com
Client Port: 0
Request Start: 1.404 s
DNS Lookup: 103 ms
Initial Connection: 36 ms
SSL Negotiation: 90 ms
Time to First Byte: 359 ms
Content Download: 1 ms
<?php
ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: max-age=86400');
// 86400 caches for one day, 604800=week, 2592000=30 days
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>PHP Testbed</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
EOT;
ob_flush();
include('css.inc');
echo <<<EOT
</style></head><body><div id="page"><h1>TEST</h1>
</div></body></html>
EOT;
ob_end_flush();
?>
