One SVG, nine posters: CSS linked parameters

A few years ago I went down the SVG sprites rabbit hole and came back with a list of methods, each broken in its own special way. The dividing line turned out to be in a different place than I expected. Caching is a solved problem: a sprite full of <symbol>s lives in an external file, gets cached like anything else, and still picks up your currentcolor. But it only works through an inline <svg> placeholder in your markup. Ask for that same graphic as an <img> or a background image and styling is off the table. No colors for you. This is finally starting to change. There’s a new spec called CSS Linked Parameters that lets you pass CSS values into a linked resource, and the linked resource decides what to do with them. Firefox Nightly has been shipping an experimental implementation since version 153, where the layout.css.link-parameters.enabled pref is on by default, and no other browser has anything, so it’s nowhere near production. But you can play with it today, and I found the…