CSS内联与编码的数据URI有何区别？

Question

CSS内联与编码的数据URI有何区别？

cssdata-uri

3

我今天早上查看了某个网站的实现方式，发现他们在LINK标签中通过data-uri定义CSS。

我理解把图片等内容放到data-uri中并在CSS中引用的做法，但我不清楚为什么有人要用这种方式来包含CSS，因为你也可以轻松地在内联样式中实现。

我看到他们在链接中有一个ID。可能是他们从DOM中动态获取这个CSS，然后将其用作动态生成元素的“style”值吗？虽然我不是前端专家，但我相信还有其他的方法可以实现这一点。

以下是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">

- user1368302

确实很奇怪。也许他们只想针对支持 data-uris 的浏览器？ - bfavaretto

+1 好问题。我想你指的不是内联样式，而是作者头部 CSS 声明与带有数据 URI 的“外部”样式声明。内联样式是直接在标签中声明的，具有更高的特异性。 - Fabian Barney

@FabianBarney 为了澄清“内联样式”的含义：我指的是在<head>中使用<style>元素，而不是style属性。 - user1368302

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- swider · Accepted Answer

似乎是来自于NoteAnywhere Chrome插件，而不是您所在的任何网站。Chrome开发者API中存在一个错误，当使用chrome.tabs.insertCSS将引用插件（chrome-extension://部分）的url()属性作为CSS插入时，会对其进行处理。该错误已于一年前解决，因此您可能不太可能再看到这种解决方法被使用了。