JSON in CSS: A Clever But Mostly Pointless Trick
Jonathan Neal recently shared a nifty CSS trick: embedding JSON directly inside stylesheets and then extracting it with JavaScript. Because custom properties accept a surprisingly liberal range of values, the technique works by locating a CSS rule whose cssText starts with -- (which technically isn't a valid selector, though the prefix could be swapped for something like thisIsJson), then slicing out a string that JSON.parse() can handle.
What's the Point?
Probably not a daily-use technique, but there's a potential angle here: JSONP still exists because of CORS restrictions, and CSS could theoretically serve as yet another workaround. That said, it's unlikely to gain traction. We've recently discussed using CSS as a data API, and this feels like more of the same questionable territory.
Stuffing unusual data into custom properties feels like the modern counterpart to putting weird content into CSS content properties. Case in point: before matchMedia became standard practice, developers sometimes defined media queries in CSS, had the stylesheet swap a hidden body::after content value (e.g., @media (max-width: 500px) { body::after { content: "max500"; display: none; } }), and then polled that value from JavaScript to detect when the query was active. This was a real approach, not a joke.
You Can Also Put JavaScript in There
It doesn't stop at JSON — you can embed raw JavaScript in custom properties too. It's less elegant than Neal's extraction method; the approach simply pulls the value out and evals it. Caleb Williams even built a Web Worker running from CSS.
