Privacy and the :visited selector

  • Revision slug: CSS/Privacy_and_the_:visited_selector
  • Revision title: Privacy and the :visited selector
  • Revision id: 92456
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ gecko_minversion_header("1.9.3") }}

Note: It's not yet known what version of Gecko this will land in. This page will be updated once that's known.

Historically, the CSS {{ cssxref(":visited") }} selector has been a vector for sites to query the user's history, by using getComputedStyle() to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity based on tidbits included in URLs (such as determining email addresses by looking at URLs from web mail services).

To mitigate this problem, changes have been made in {{ Gecko("1.9.3") }} to limit the amount of information that can be obtained about visited links.

Little white lies

The first change is that Gecko will lie to web applications under certain circumstances. In particular, getComputedStyle() and similar functions such as {{ domxref("element.querySelector" }} always return values indicating that a user has never visited a site.

Also, if you use a sibling connector such as :visited + span, the {{ htmlelement("span") }} will be styled as if the link were unvisited.

And, in a rare scenario, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element is drawn as if the link were unvisited as well.

Limits to visited link styles

You will still be able to visually style visited links, but there are now limits on what styles you can use. Only the following properties can be applied to visited links:

  • {{ cssxref("color") }}
  • {{ cssxref("background-color") }}
  • {{ cssxref("border-color") }} (and its sub-properties)
  • {{ cssxref("outline-color") }}
  • The color parts of the {{ cssxref("fill") }} and {{ cssxref("stroke") }} properties

In addition, even for the properties you can set for visited links, you won't be able to use rgba() or hsla() color values, or the transparent attribute.

Impact on web developers

Overall, this shouldn't affect web developers too significantly. There are, however, a few special cases that may require changes to sites:

  • Using background images to style links and indicate whether or not they've been visited will no longer work, since only colors can be used to style visited links.
  • CSS transitions won't be supported for visited links. Fortunately, CSS transitions are very new, and there are few sites using them at this point, so this isn't likely to impact many people at this point.

See also

Revision Source

<p>{{ gecko_minversion_header("1.9.3") }}</p>
<div class="note"><strong>Note</strong><strong>:</strong> It's not yet known what version of Gecko this will land in. This page will be updated once that's known.</div>
<p>Historically, the CSS {{ cssxref(":visited") }} selector has been a vector for sites to query the user's history, by using <code>getComputedStyle()</code> to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity based on tidbits included in URLs (such as determining email addresses by looking at URLs from web mail services).</p>
<p>To mitigate this problem, changes have been made in {{ Gecko("1.9.3") }} to limit the amount of information that can be obtained about visited links.</p>
<h2>Little white lies</h2>
<p>The first change is that Gecko will lie to web applications under certain circumstances. In particular, <code>getComputedStyle()</code> and similar functions such as {{ domxref("element.querySelector" }} always return values indicating that a user has never visited a site.</p>
<p>Also, if you use a sibling connector such as <code>:visited + span</code>, the {{ htmlelement("span") }} will be styled as if the link were unvisited.</p>
<p>And, in a rare scenario, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element is drawn as if the link were unvisited as well.</p>
<h2>Limits to visited link styles</h2>
<p>You will still be able to visually style visited links, but there are now limits on what styles you can use. Only the following properties can be applied to visited links:</p>
<ul> <li>{{ cssxref("color") }}</li> <li>{{ cssxref("background-color") }}</li> <li>{{ cssxref("border-color") }} (and its sub-properties)</li> <li>{{ cssxref("outline-color") }}</li> <li>The color parts of the {{ cssxref("fill") }} and {{ cssxref("stroke") }} properties</li>
</ul>
<p>In addition, even for the properties you can set for visited links, you won't be able to use <code>rgba()</code> or <code>hsla()</code> color values, or the <code>transparent</code> attribute.</p>
<h2>Impact on web developers</h2>
<p>Overall, this shouldn't affect web developers too significantly. There are, however, a few special cases that may require changes to sites:</p>
<ul> <li>Using background images to style links and indicate whether or not they've been visited will no longer work, since only colors can be used to style visited links.</li> <li><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a> won't be supported for visited links. Fortunately, CSS transitions are very new, and there are few sites using them at this point, so this isn't likely to impact many people at this point.</li>
</ul>
<h2>See also</h2>
<ul> <li><a class=" external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/" title="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">privacy-related changes coming to CSS :visited</a> on Mozilla Hacks</li>
</ul>
Revert to this revision