Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom properties are quite liberal! So this looks for a CSS rule (e.g. a whole block, like #x { y: z; } where the cssText starts with -- (which is not a valid selector, but who cares — you could change it if you want to thisIsJson or something) and then slices out a string that JSON.parse() works on.
I re-typed his example here:
Is this useful?
WELL.
Probably not, like, on a daily basis. But remember that JSONP is still a thing because CORS exists. Chucking some JSON in CSS I would think is another way around CORS. I kinda doubt it will catch on, but it’s possible. Remember not long ago we were talking about using CSS as an API for literal data. Another questionable idea. ;)
I think “putting weird stuff in custom properties” is the new “putting weird stuff in CSS content.”
For example, ya know how there are media queries in JavaScript, à la matchMedia? And, of course, there are media queries in CSS, too. There was a time (and I’m not sure it’s passed) where defining those media queries only once felt like a good idea, so we weren’t maintaining media queries in multiple places. To keep them “in sync” one idea was to define them in CSS and have them swap the value of some CSS content (e.g. @media (max-width: 500px) { body::after { content: "max500"; display: none; } }) then literally watch for that content to change with JavaScript — and you’d know that media query was active. For real! No joke!
And speaking of JSON in CSS, you can chuck straight-up JavaScript in there as well. This isn’t as clever as Jonathan’s extraction because it just yanks the value out and evals it.
Caleb Williams made a Web Worker with CSS.
Thank you. This was very usefull
This is so ugly my eyes hurt looking at it… Just everything about.
I honestly don’t get it. So, if CORS is a thing why not take the time, to understand the challenges it poses, come to the understanding that cross-origin resource policies are there for a good reason (security); and work with WHATWG endorsed standard for working around those limitations, aka ‘Access-Control-Allow-Origin’ HTTP header. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
I applaud css-tricks for it’s great front end content but – like the a lot of the JavaScript Community – it seems to go out it’s way to a must-be-done-with-JavaScript World View or so many problem domains that don’t fall under JavaScript’s aegis. I never see that more clearly that when it comes to employing hacks because security measures only seem there to make the front-end developer’s life more difficult. They aren’t: they’re there to make the hackers life more difficult.
It’s just a trick. In no way is anybody advocating that it’s some wonderful solution to any problem. It’s just fun to think about.
On the flip side, I get comments when I publish things that aren’t “CSS” “Tricks” lol.
Huh? Do CSS custom properties accept JS right out of the box? That threw me for a loop.
Does this JS have any visibility to the actual current selector or styles? Could it be used for something like this (below)?
The JS isn’t actually being run in the stylesheet. As far as the CSS knows, that content is just some random string. But you can read custom CSS properties with Javascript, which can then evaluate that string as JS code.
yeah that is true
Because after doing all of that sometimes you just don’t have access to the server, or resources to make changes, etc etc. I would never use a trick like this if I had a correct alternative, but sometimes you just gotta do what you gotta do.
Sometimes you should never do this ever.
Same as said on Twitter. Nothing new, you can do this since ages but put the string somewhere else (in the content of a before, for example).
Reason why nobody did it is probably because there’s no reason to ; whatever usecase this is supposed to tackle, you can achieve by using other tools and it will always feel less hacky.
And that “eval”… oh my. no comment. i thought css tricks was a place of wisdom.
Why not just put the Json in the js file instead?
I’ve written about this i 2019, when I used JSON inside CSS property to control the Paint Worklet.
https://itnext.io/controlling-paint-worklet-with-json-in-css-298a7b10e41c