CSS内联与数据URI编码？答案

【问题标题】：CSS inline vs encoded in data URI?CSS内联与数据URI编码？
【发布时间】：2012-06-30 20:51:26
【问题描述】：

今天早上我在查看某人网站的实现，看到他们通过 LINK 标记中的 data-uri 定义 CSS。

我理解将图像放入 data-uri 和 包括 CSS 中的图像的原因，但我不清楚为什么有人会选择以这种方式包含 CSS，而您可以轻松内联。

我确实看到他们在链接中有一个 ID。难道他们是从 DOM 中动态获取这个 CSS，然后将它用于动态生成元素的“样式”的值？我不是前端专家，但我相信还有其他方法可以做到这一点。

这是 HTML：

<link id="noteanywherecss" media="screen" type="text/css" rel="stylesheet" href="data:text/css,.note-anywhere%20.closebutton%7Bbackground-image%3A%20url%28chrome-extension%3A//bohahkiiknkelflnjjlipnaeapefmjbh/asset/deleteButton.png%29%3B%7D%0A.note-anywhere%20%7Bbackground-color%3A%20%23FFF046%3B%7D%0A.note-anywhere%20%7Bcolor%3A%20%23000066%3B%7D%0A.note-anywhere%20%20.edit%20%7Bfont-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%7D%0A.note-anywhere%20%20.edit%20%7Bfont-size%3A%2014px%3B%7D%0A.note-anywhere%20.timestamp%20%7Bbackground-color%3A%20%23DDBB00%3B%7D%0A.note-anywhere%20.timestamp%20%7Bcolor%3A%20%23FFFFFF%3B%7D">

【问题讨论】：

这确实很奇怪。也许他们试图只针对支持 data-uris 的浏览器？
+1 好问题。我想您的意思不是内联样式，而是作者标题 css 声明与带有数据 uri 的“外部”样式声明。内联样式是直接在标签上声明的，具有更高的特异性。
@FabianBarney 澄清“内联样式”：我的意思是在中使用

标签： css data-uri

【解决方案1】：

它似乎来自 NoteAnywhere chrome 插件，而不是您所在的任何网站。 chrome 开发人员 API 中存在一个错误，当使用chrome.tabs.insertCSS 作为 CSS 插入时，该错误会破坏引用插件（chrome-extension:// 部分）的 url() 属性。它在一年前就解决了，所以你可能不会再看到这种解决方法了。

【讨论】：

赢家鸡肉晚餐！我忘记了我安装了那个插件。我会假设，除了这种解决方法之外，没有其他理由使用这种结构？