title: CSS/JavaScript/hacking: Detect :visited styling on a link *without* checking it directly OR do it faster than me
body: <p>This is for research purposes on <a href="http://cssfingerprint.com" rel="nofollow noreferrer">http://cssfingerprint.com</a></p>
  
  <p>Consider the following code:</p>
  
  <pre><code>&lt;style&gt;
    div.csshistory a { display: none; color: #00ff00;}
    div.csshistory a:visited { display: inline; color: #ff0000;}
  &lt;/style&gt;
  
  &lt;div id="batch" class="csshistory"&gt;
    &lt;a id="1" href="http://foo.com"&gt;anything you want here&lt;/a&gt;
    &lt;a id="2" href="http://bar.com"&gt;anything you want here&lt;/a&gt;
    [etc * ~2000]
  &lt;/div&gt;
  </code></pre>
  
  <p>My goal is to detect whether foo has been rendered using the :visited styling.</p>
  
  <ol>
  <li><p>I want to detect whether foo.com is visited <em>without</em> directly looking at <code>$('1').getComputedStyle</code> (or in Internet Explorer, <code>currentStyle</code>), or any other direct method on that element.</p>
  
  <p>The purpose of this is to get around a potential browser restriction that would prevent direct inspection of the style of visited links. </p>
  
  <p>For instance, maybe you can put a sub-element in the <code>&lt;a&gt;</code> tag, or check the styling of the text <em>directly</em>; etc. Any method that <em>does not</em> directly or indierctly rely on <code>$('1').anything</code> is acceptable. Doing something clever with the child or parent is probably necessary.</p>
  
  <p>Note that for the purposes of this point only, the scenario is that the browser will lie to JavaScript about all properties of the <code>&lt;a&gt;</code> element (but not others), and that it will only render <code>color:</code> in <code>:visited</code>. Therefore, methods that rely on e.g. text size or <code>background-image</code> will not meet this requirement.</p></li>
  <li><p>I want to improve the speed of my current scraping methods.</p>
  
  <p>The majority of time (at least with the jQuery method in Firefox) is spent on <code>document.body.appendChild(batch)</code>, so finding a way to improve that call would probably most effective. </p>
  
  <p>See <a href="http://cssfingerprint.com/about" rel="nofollow noreferrer">http://cssfingerprint.com/about</a> and <a href="http://cssfingerprint.com/results" rel="nofollow noreferrer">http://cssfingerprint.com/results</a> for current speed test results.</p></li>
  </ol>
  
  <p>The methods I am currently using can be seen at <a href="http://github.com/saizai/cssfingerprint/blob/master/public/javascripts/history_scrape.js" rel="nofollow noreferrer">http://github.com/saizai/cssfingerprint/blob/master/public/javascripts/history_scrape.js</a></p>
  
  <p>To summarize for tl;dr, they are:</p>
  
  <ol>
  <li>set color or display on :visited per above, and check each one directly w/ <code>getComputedStyle</code></li>
  <li>put the ID of the link (plus a space) inside the <code>&lt;a&gt;</code> tag, and using jQuery's :visible selector, extract only the visible text (= the visited link IDs)</li>
  </ol>
  
  <p>FWIW, I'm a <a href="http://en.wikipedia.org/wiki/White_hat" rel="nofollow noreferrer">white hat</a>, and I'm doing this in consultation with the <a href="http://en.wikipedia.org/wiki/Electronic_Frontier_Foundation" rel="nofollow noreferrer">EFF</a> and some other fairly well known security researchers. </p>
  
  <p>If you contribute a new method or speedup, you'll get thanked at <a href="http://cssfingerprint.com/about" rel="nofollow noreferrer">http://cssfingerprint.com/about</a> (if you want to be :-P), and potentially in a future published paper.</p>
  
  <p>ETA: The bounty will be rewarded only for suggestions that</p>
  
  <ul>
  <li>can, on Firefox, avoid the hypothetical restriction described in point 1 above, or</li>
  <li>perform at least 10% faster, on any browser for which I have sufficient current data, than my best performing methods listed in the graph at <a href="http://cssfingerprint.com/about" rel="nofollow noreferrer">http://cssfingerprint.com/about</a></li>
  </ul>
  
  <p>In case more than one suggestion fits either criterion, the one that does best wins.</p>
  
  <p>ETA 2: I've added width-based variants of two previous-best test methods (reuse_noinsert, best on Firefox/Mozilla, and mass_insert, its very close competitor). Please visit <a href="http://cssfingerprint.com" rel="nofollow noreferrer">http://cssfingerprint.com</a> several times from different browsers; I'll automatically get the speed test results, so we'll find out if it's better than the previous methods, and if so by how much. Thanks!</p>
  
  <p>ETA 3: Current tests indicate a speed savings using <code>offsetWidth</code> (rather than <code>getCalculatedStyle</code>/<code>currentStyle</code>) of ~2ms (1.8%) in Chrome and ~24ms (4.3%) in Firefox, which isn't the 10% I wanted for a solid bounty win. Got an idea how to eke out the rest of that 10%?</p>