通过CSS高亮显示已访问链接
原因
不少网站为了增加点击率通过CSS让已访问链接颜色不变,个别无节操门户网站甚至时不时改个标题让你以为是新文章,点进去发现已经看过。
过程
最初的解决方案是安装Stylish,然后安装全局主题Global dark style。
但用久了感觉这个主题适合夜晚使用,特别是阅读长文。其他情况下缺乏美感。
我主要是需要已访问链接高亮显示,于是选择了Red:visited。不过默认的红色实在有点刺眼,我要其比未访问链接低调一些,记忆当中HTML标准的默认浅紫色就不错,完整的推荐设置在这里。把主题里的#CC0000改成#551A8B即可。
解决方案
但新的问题产生了:对于背景颜色较深的网站,紫色很难看清,所以还要改下链接的背景色。最终结果如下:
1 | a:visited, .fl:visited { |
TODO
如果背景是图片就无能为力了,去掉!important的话漏网之鱼又太多。想要解决的话应该是读取原有字体颜色,然后用lighten(依赖SASS)或者自己设计一个简单的数学变换来使其变浅。第一步需要javascript来实现。
去GreasyFork找了下没有实现类似功能的脚本,准备自己写一个却发现由于安全问题getComputedStyle并不能返回已访问链接颜色的正确结果。这样就不能直接在循环内判断是否visited并根据原来颜色变浅了。js读取颜色后要另外再用CSS来判断并改色。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 名实合为!
评论