使用php构建和重建CSS数据uri

Question

This whole data URI nonsense is going to be grow old really quick, but until then, I'm gonna jump on the bandwagaon for at least one lap.

So I have CSS files that I want to update to use data URIs instead of remote location. I was thinking I could do this programmatically using a bit of PHP and regex and while it wouldn't be as clever and transparent as the data URI redirect idea I saw earlier, it would offer a push button "rebuild" option to fix any future files or updates. But then I ran into a mental block. Here is the idea:

1. Fix-URI script traverses all css files stored in proper place and greps for pattern of url(".*") (with some fuzziness added later)

2. script confirms file is local and exists and chews contents into data uri

3. script replaces url found with new data uri.

4. When completed, script saves updated file, etc.

But then, of course, it occurred to me this can only work once. After that, the url would be data uri already. I can add check for "data:" but the real dillemma for me is : how do I know the data uri is up-to-date? If I replace "icon-xyz.png" to be shiny and better, not only will I have to check each data uri every time, but I will have to somehow know the original filename to compare it to, which is not a standard attribute part of the data uri as of now.

What I don't want is a dynamic css file using php variables. I would also like to keep the solution as abstracted as possible, even if the regex horse is out the barn.

One passing thought was to simply remove any images that have been converted or at least move them to a "converted" directory. This way an updated version or a new image still using plain url could be spotted right away. Then I could datamagically convert the old already converted version of the image, grep for that and then replace where found with new file.

I fear, however, that I'm making it more complicated than I need to and I'm missing something obvious and convenient.

quick update

Keeping it as abstracted as possible includes avoiding or at least resisting solutions such as css comments to reflect file name or commented out property above new property, etc.

Answer 1

My solution, dont overwrite but copy

css.css -> compiled/css.css

on change, recompile css.css to compiled/css.css

I do something like this on my sites compiled/v{1-9+},css1,css2.css

the webserver takes care of the generation automatically, if the css file doesn't exist it calls generatecss.php that compiles and combined the css files.

The version number ensures there is no caching, the second and third are combined and optimized css files created from the original css1.css and css2.css and so on.

Keep in mind however that css files are blocking and using large css files is not always a great idea.