页面上的链接,希望用户访问过的都加上明显的“已读”标识,以更好的让用户区分页面上的哪些文章自己是有阅读过的,访问前后的链接显示效果如下图所示:
对比访问前后区别在于:颜色不同、已访问过的加“(已读!)”文字标识,看似没什么难度的样子,如是尝试实现:
提示:你可以先修改部分代码再运行。
页面链接访问前后显示效果颜色变化是有了,但已读的标识却不出来,用chrome web developer调试工具查看,明明a:visited::after声明是有应用上的。
翻阅MDN Web Docs上的相关文档:Privacy and the :visited selector
我们可以了解到下面相关信息:
在2010年左右之前,CSS :visited选择器涉及一些隐私问题,通过js window.getComputedStyle方法获取链接属性,可发现用户的浏览历史并以此找出用户访问过哪些网站,更可进一步猜测关于用户身份的大量信息,示例:How CSS can be used to query a user's browser history
为了缓解这个问题,Gecko 2实施了隐私更新,以限制可以从访问链接获得的信息量,其他浏览器也做了类似的更改。结果就是:
1、该window.getComputedStyle方法以及类似的功能element.querySelector将总是返回指示用户从未访问过页面上的任何链接的值;
2、只有以下样式可以应用于已访问:visited的链接:
color、background-color、border-color 、column-rule-color、outline-color、fill和stroke属性的颜色部分。
这就意味着设置:visited选择器元素的透明度opacity、::after等属性都不能产生任何实质性的显示效果,换句话说你设置了也没什么卵用,嗯,没错,就是这样子,蛋疼吧!
幸运的是,后面查阅到css-tricks上的文章::visited介绍,文中有提到Joel Califa 的用js localstorage方法去间接的控制已访问链接的样式:Revisiting :Visited,主要是通过js去实现的,方法可行,但仅供参考,因为js会消耗页面性能,本人并不建议这样去做!相比之下,本人更推荐: Una Kravets的Hacking :visited文章里面提到的方法!
测试代码:
提示:你可以先修改部分代码再运行。
结合上文,我们可知道:visited::after写法并不能生效,但根据 Hacking :visited文章提供的思路我们可改写成下面的写法:
提示:你可以先修改部分代码再运行。
代码思路解析: a标签内嵌一标签(如:span),通过a span::after将“已读”的文案跟样式设置好,再把color值设置成背景颜色值,以达到默认不显示“已读”的字样;然后再通过a:visited span::after 设置 color值让“已读”的标识显示出来!
细心的童鞋,会发现a链接特意加了text-decoration: none;声明,以防止鼠标移入时尾部底线上面有段空白部分,有兴趣的童鞋可查看本站首页处理好该问题的显示效果!!
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}