Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
676 views
in Technique[技术] by (71.8m points)

css - Why did browsers limit :visited selector?

I understand the privacy concerns, but in this article Mozilla states that they are lying to querySelector() and getComputedStyle().

If they are already lying to sites, than why limit :visited to just simple colors? Couldn't full styling still be hidden from sites using the same method?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Limiting the styles that can be applied to visited links prevents them from affecting the layout of unrelated elements in a way that can be queried by getComputedStyle() — something that cannot be spoofed without secretly computing the layout of the entire page as if all links were unvisited, which would be extremely expensive performance-wise. This is in the same vein as things like :visited + span no longer being applied (not even the properties still allowed in :visited).

Consider this proof-of-concept, in which you can click a link to toggle a class name that simulates its visitedness, and see how toggling between :link and :visited can affect layout:

var a = document.querySelector('a'),
    p = document.querySelector('p + p');

a.addEventListener('click', function(e) {
  a.className = a.className == 'unvisited' ? 'visited' : 'unvisited';
  console.log('a is now ' + a.className + '; top pos of following p is now ' + p.getBoundingClientRect().top);
}, false);
a.unvisited {
  font-size: 1em;
}

a.visited {
  font-size: 2em; /* A property not normally allowed on :visited */
}
<p><a class="unvisited" href="#">Toggle visitedness</a>
<p>Another paragraph

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...