通过CSS高亮显示已访问链接

原因

不少网站为了增加点击率通过CSS让已访问链接颜色不变,个别无节操门户网站甚至时不时改个标题让你以为是新文章,点进去发现已经看过。

过程

最初的解决方案是安装Stylish,然后安装全局主题Global dark style
但用久了感觉这个主题适合夜晚使用,特别是阅读长文。其他情况下缺乏美感。
我主要是需要已访问链接高亮显示,于是选择了Red:visited。不过默认的红色实在有点刺眼,我要其比未访问链接低调一些,记忆当中HTML标准的默认浅紫色就不错,完整的推荐设置在这里。把主题里的#CC0000改成#551A8B即可。

解决方案

但新的问题产生了:对于背景颜色较深的网站,紫色很难看清,所以还要改下链接的背景色。最终结果如下:

1
2
3
4
a:visited, .fl:visited {
color: #551A8B !important;
background-color: #ccc !important
}

TODO

如果背景是图片就无能为力了,去掉!important的话漏网之鱼又太多。想要解决的话应该是读取原有字体颜色,然后用lighten(依赖SASS)或者自己设计一个简单的数学变换来使其变浅。第一步需要javascript来实现。
GreasyFork找了下没有实现类似功能的脚本,准备自己写一个却发现由于安全问题getComputedStyle并不能返回已访问链接颜色的正确结果。这样就不能直接在循环内判断是否visited并根据原来颜色变浅了。js读取颜色后要另外再用CSS来判断并改色。

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 原因
  2. 2. 过程
  3. 3. 解决方案
  4. 4. TODO
,