1. 首页
  2. css

CSS中的JSON

乔纳森(jonathanneal)前几天在推特上说了一个CSS小把戏,把JSON放进CSS中,然后用JavaScript把它去掉。自定义属性的有效值非常自由!所以这需要一个CSS规则(例如,一个完整的块,比如#x { y: z; },其中cssText以–开头(这不是一个有效的选择器,但是谁在乎呢)–如果你想thisIsJson或其他什么的话,你可以改变它),然后切掉JSON.parse()可以使用的字符串。
我在这里重新键入了他的示例:CodePen嵌入回退
这有用吗?
嗯。
可能不是,比如说,每天。但是请记住,JSONP仍然是一种东西,因为CORS是存在的。在CSS中丢弃一些JSON,我认为这是CORS的另一种方式。我有点怀疑它会流行起来,但这是可能的。记得不久前我们讨论过使用CSS作为文本数据的API。另一个值得怀疑的想法。我认为\”把奇怪的东西放在自定义属性中\”是新的\”把奇怪的东西放在CSS内容中\”。例如,你知道JavaScript中有什么媒体查询吗,lamatchMedia?当然,CSS中也有媒体查询。曾经有一段时间(我不确定是否已经过去了),定义那些媒体查询只会让人觉得是个好主意,所以我们没有在多个地方维护媒体查询。为了使它们\”同步\”,一个想法是在CSS中定义它们,让它们交换一些CSS的值content(例如@media (max-width: 500px) { body::after { content: \”max500\”; display: none; } }),然后用JavaScript逐字地观察content的变化,你就会知道媒体查询是活动的。真的!别开玩笑!说到CSS中的JSON,你也可以直接把JavaScript放进去。这并不像Jonathan的提取那样聪明,因为它只是把值拉出来,然后把它取出来。CodePen嵌入回退
Caleb Williams使用CSS创建了一个Web工作者。

CSS中的JSON 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%b8%ad%e7%9a%84json/