Contemporary web browsers have significantly restricted the CSS properties applicable to style rules employing the :link pseudo-class. For those unfamiliar with this peculiar pseudo-class, it may come as a surprise that visited links on your website are not displaying as anticipated. Attempts to style these links, for example, by altering their color, will likely be unsuccessful in modern browsers.
Consequently, one might initially suspect a browser glitch, as the CSS in question appears to be valid:
However, when employing alternative pseudo-classes, such as the :hover pseudo-class, the style properties are applied as expected.
It appears that the only permissible property for the :link pseudo-class is the color property. Moreover, browsers are unlikely to render colors with alpha transparency, even when specified using standard color units like rgba.
This anomaly is not without cause. The W3C specifications for the link pseudo-classes grant web browsers the authority to disregard :link and :visited style rules, as these can potentially be exploited to obtain information about a user’s browsing history without their consent.
Authors of style sheets can misuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user’s consent. As a result, user agents may treat all links as unvisited links, or implement other measures to safeguard user privacy while differentiating between visited and unvisited links.” Source: Selectors Level 3: The link pseudo-classes: :link and :visited
In the referenced excerpt, the term “UAs” refers to “user agents,” which encompass software used to access websites, with web browsers being the most common type.
Understanding the limitation on CSS properties with the :link pseudo-class requires an exploration of a hypothetical scenario. While modern browsers do not permit the rendering of certain properties, imagine a scenario where a browser does allow the rendering of the color property. Without proper precautions, an abuser could create a list of anchor elements pointing to specific websites and then conceal them from the page visitor:
HTML
These anchor elements could then be concealed using CSS.
CSS
The browser would need to download an external asset from a web server to render the property specified by the CSS author, referred to as “visited.jpg.” Using JavaScript, all links on the page could be scanned to determine if they have the “visited.jpg” background, indicating a visited URL. This information, along with other details like the user’s IP address, could then be sent to a server-side script for processing.
As an example, jQuery can be used to achieve this:
JavaScript/jQuery
For further insights into this privacy concern, refer to the explanation on Mozilla.org. In addition to limiting the CSS properties used with the :link pseudo-class, JavaScript functions like those in the example provided return values that make it impossible to differentiate between visited and unvisited links.
Currently, there is no standard regarding which CSS properties can be used with the :link pseudo-class selector, leading to inconsistencies and uncertainties in styling visited links. Future W3C CSS specifications do not provide clarity on this matter. The current draft of CSS4 leaves the treatment of :link and :visited pseudo-classes open to browser interpretation:
“UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.” Source: Selectors Level 4: The Link History Pseudo-classes: :link and :visited
The Mozilla.org blog post discusses the privacy issue, noting that only color, background-color, border-color, and outline-color are allowed for styling visited links. The official documentation on the Mozilla Developer Network also states that for privacy reasons, browsers strictly limit the styles that can be applied using this pseudo-class:
“Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill, and stroke.” Source: :visited – CSS | MDN
However, when testing these allowed properties in the latest version of Firefox, only the color property works. Thus, even official documentation and browser vendor blogs are not definitive. Internet Explorer is the most definitive source, though the information is found in an obscure MSDN documentation entry:
:visited and :link styles can only differ by color. Some styles were not applied to :visited.” Source: F12 developer tools console error messages (Windows)
The suggested fix to resolve this error is to change only the color attribute, indicating that Internet Explorer strictly adheres to the color property for :visited links.
Currently, web browsers generally render only the color property specified in a :link selector, ignoring all other CSS properties.
Designing the Perfect Hyperlink – It’s Not as Simple as You Think
Designing Hyperlinks: Tips and Best Practices
HTML5 Download Attribute Guide
