{"id":340599,"date":"2021-05-20T15:29:53","date_gmt":"2021-05-20T22:29:53","guid":{"rendered":"https:\/\/css-tricks.com\/?p=340599"},"modified":"2021-05-20T15:29:56","modified_gmt":"2021-05-20T22:29:56","slug":"json-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/json-in-css\/","title":{"rendered":"JSON in CSS"},"content":{"rendered":"\n<p>Jonathan Neal <a href=\"https:\/\/twitter.com\/jon_neal\/status\/1392600862703378433\" rel=\"noopener\">tweeted a heck of a little CSS trick<\/a> the other day, putting JSON inside CSS and plucking it out with JavaScript. <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/#valid-values-for-custom-properties\">Valid values for custom properties<\/a> are quite liberal! So this looks for a CSS rule (e.g. a whole block, like <code>#x { y: z; }<\/code> where the <code>cssText<\/code> starts with <code>--<\/code> (which is not a valid selector, but who cares\u2009\u2014\u2009you could change it if you want to <code>thisIsJson<\/code> or something) and then slices out a string that <code>JSON.parse()<\/code> works on. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>I re-typed his example here:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNZYXrr\" src=\"\/\/codepen.io\/anon\/embed\/oNZYXrr?height=475&amp;theme-id=1&amp;slug-hash=oNZYXrr&amp;default-tab=js,result\" height=\"475\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNZYXrr\" title=\"CodePen Embed oNZYXrr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Is this useful?<\/p>\n\n\n\n<p>WELL.<\/p>\n\n\n\n<p>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&#8217;s possible. Remember not long ago we were talking about <a href=\"https:\/\/css-tricks.com\/creating-css-apis-without-javascript-with-the-datasette-css-properties-plugin\/\">using CSS as an API for literal data<\/a>. Another questionable idea. ;) <\/p>\n\n\n\n<p>I think &#8220;putting weird stuff in custom properties&#8221; is the new &#8220;putting weird stuff in CSS content.&#8221;<\/p>\n\n\n\n<p>For example, ya know how there are media queries in JavaScript, \u00e0 la <code>matchMedia<\/code>? And, of course, there are media queries in CSS, too. There was a time (and I&#8217;m not sure it&#8217;s passed) where defining those media queries only once felt like a good idea, so we weren&#8217;t maintaining media queries in multiple places. To keep them &#8220;in sync&#8221; one idea was to define them in CSS and have them swap the value of some CSS <code>content<\/code> (e.g. <code>@media (max-width: 500px) { body::after { content: \"max500\"; display: none; } }<\/code>) then literally watch for that <code>content<\/code> to change with JavaScript\u2009\u2014\u2009and you&#8217;d know that media query was active. <a href=\"https:\/\/github.com\/bjankord\/Media-Query-Sync\" rel=\"noopener\">For real!<\/a> <a href=\"http:\/\/qrious.com\/breaky\/\" rel=\"noopener\">No joke!<\/a><span style=\"font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\"><\/span><\/p>\n\n\n\n<p>And speaking of JSON in CSS, you can chuck straight-up JavaScript in there as well. This isn&#8217;t as clever as Jonathan&#8217;s extraction because it just yanks the value out and <code>eval<\/code>s it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKWNVML\" src=\"\/\/codepen.io\/anon\/embed\/KKWNVML?height=450&amp;theme-id=1&amp;slug-hash=KKWNVML&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKWNVML\" title=\"CodePen Embed KKWNVML\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Caleb Williams <a href=\"https:\/\/codepen.io\/calebdwilliams\/pen\/QWpNWzW\" rel=\"noopener\">made a Web Worker with CSS<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8212; (which [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":340920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1036,1279],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/css-json.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":300222,"url":"https:\/\/css-tricks.com\/stream-crossing-confusion\/","url_meta":{"origin":340599,"position":0},"title":"Stream-Crossing Confusion","date":"December 23, 2019","format":false,"excerpt":"Should I use WordPress or React hooks? Should I use D3 or CSS? Should I use Markdown or JSON? Can I use flexbox in Gatsby? Can I use custom properties in Jekyll? Should I use HTML or the cloud? How do I add dark mode to my Vue site? These\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/logo-mashup.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332425,"url":"https:\/\/css-tricks.com\/creating-css-apis-without-javascript-with-the-datasette-css-properties-plugin\/","url_meta":{"origin":340599,"position":1},"title":"Creating CSS APIs without JavaScript With the datasette-css-properties plugin","date":"January 7, 2021","format":false,"excerpt":"Simon Willison has a project called Datasette, an open source multi-tool for exploring and publishing data. I'm not sure I'm qualified to explain it, but it's like a tool to make handling data easier and doing more \u2014 through the web \u2014 with data you have. Like making that data\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/datasette-logo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363937,"url":"https:\/\/css-tricks.com\/css-database-queries\/","url_meta":{"origin":340599,"position":2},"title":"CSS Database Queries? Sure We Can!","date":"February 23, 2022","format":false,"excerpt":"Kinda silly sounding, isn't it? CSS database queries. But, hey, CSS is capable of talking to other languages in the sense that it can set the values of things that they can read. Plus, CSS can request other files, and I suppose a server could respond to that request with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/tweet-1.jpg?fit=828%2C567&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344948,"url":"https:\/\/css-tricks.com\/ecmascript-proposal-json-modules\/","url_meta":{"origin":340599,"position":3},"title":"ECMAScript proposal: JSON modules","date":"July 21, 2021","format":false,"excerpt":"Dr. Axel Rauschmayer looks at JSON modules, which is already live in Chrome 91 (but nothing else). It looks just like an ES Modules-style import, only you asset the type at the end. import configData from '.\/config-data.json' assert {type: 'json'}; How nice is that? Once this makes its way across\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/package-json.png?fit=1200%2C594&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":172414,"url":"https:\/\/css-tricks.com\/sharing-data-sass-javascript-json\/","url_meta":{"origin":340599,"position":4},"title":"Sharing Data Between Sass and JavaScript with JSON","date":"June 11, 2014","format":false,"excerpt":"Imagine you have a set of breakpoints you have defined for your design that adjust the layout. Now you need to mimic those breakpoints in JavaScript, because you are choosing to load some dynamic content at that breakpoint. Now you're maintaining that breakpoint at two different places in your code.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305435,"url":"https:\/\/css-tricks.com\/getting-javascript-to-talk-to-css-and-sass\/","url_meta":{"origin":340599,"position":5},"title":"Getting JavaScript to Talk to CSS and Sass","date":"April 3, 2020","format":false,"excerpt":"JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it\u2019s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind \u2014 something not involving a structural change, but rather putting CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/css-sass-js.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/css-json.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340599"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=340599"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340599\/revisions"}],"predecessor-version":[{"id":340918,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340599\/revisions\/340918"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/340920"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=340599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=340599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=340599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}