这篇博客是一篇翻译博客,原文链接
隐私和:visited选择器的关系
在以前,css的:visited
选择器是一些网站用以查询用户历史记录的一种方法。它们通过使用getComputedStyle()
方法或者一些其它的技术来浏览用户的历史记录找出用户都访问了哪些网站。这种方法实现起来很快,而且把“查看用户访问了哪些网站”和“猜测用户的个人信息”变为一种可能。
为了解决这个问题,Gecko2(火狐的浏览器引擎)就限制了被访问标签携带信息的数量。
“善意的谎言”
第一个改动是:Gecko会在特定的场景中对浏览器应用撒谎。尤其是getComputedStyle()
和一些类似的函数,例如 element.querySelector()
,总是返回一些表明用户从未访问过页面连接的值。
同时,如果你使用兄弟选择器,例如::visited+span
,那么<span>
也会表现出链接没有被访问的样式。
而且,在极少数场景中,如果你使用了嵌套的链接元素,并且匹配的链接元素和历史中的链接的样式被检测为不同,那么元素也会被绘制为好像是未被访问过的样式。
上面那一句翻译不是很通顺,也有些不理解,原文如下:
And, in a rare scenario, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element is drawn as if the link were unvisited as well.
被访问链接的样式限制
你将仍然能够为被访问的链接设置可视的样式,但是你所使用的样式种类将受到限制。只有下列样式属性可以被应用到已访问的链接:
- color
- background-color
- border-color(和其子属性)
- outline-color
- 填充和描边的颜色部分
此外,即使在这些能够为已访问链接设置的样式中,你也不能够改变从未访问链接到已访问链接过程的透明度变换,虽然你在其他地方可以使用rgba()或hsla()或透明度关键词。
下面有一个如何使用有争议的限制性样式的例子:
:link {
outline: 1px dotted blue;
background-color: white;
/*background-color 默认是 '透明的'.
你需要为其设置一个颜色, 否则:visited中的背景颜色将无法显示 */
}
:visited {
outline-color: orange; /* visited links have an orange outline */
color: yellow; /* visited links have yellow colored text */
background-color: green; /* visited links have a green background */
}
对于网页开发者的影响
总的来说,这不会对网站开发者造成很大的影响。这可能需要对网站做如下的改变:
使用背景图片去装饰你的链接,以显示它们是否被访问,将不再是一种可行的方法,因为只有颜色样式对已访问标签是有效的。
翻译完了……太艰难了,希望大家多多指正。