Css/Javascript/Hacking: Detect :Visited Styling on a Link *Without* Checking It Directly or Do It Faster Than Me

Javascript Find The Colour Of Link

The detection of visited links is disabled as a privacy measure. And thanks for that.

Ref. privacy-related changes coming to CSS :visited

In short, it can't be done. That said, there might be hacks, but those would most likely quickly be patched and as a result being unreliable.

From what I read, this is implemented in most browsers.

---

As an example of how one could hack the history is using timing attacks. That is in short:

1. You want to know if user has visited aleister_crowley.com
2. You find an item which all users would have cached, lets say aleister_crowley.com/profile.jpg
3. You add a script to load this picture in your site, and time how long it takes.

If user has visited the page the image would load quickly due to caching in the users browser. As such you can estimate the user has, in fact, visited that page.

More in this paper.

---

Then of course, this would be a case were your site has flipped to the dark side.

Can I have an onclick effect in CSS?

The closest you'll get is :active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.

How best to make a link submit a form

loop through parent nodes until you find an element with tagname that indicates it's a form!

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="get_form(this).submit(); return false">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>

<script type="text/javascript">
    //<![CDATA[
    function get_form( element )
    {
        while( element )
        {
            element = element.parentNode
            if( element.tagName.toLowerCase() == "form" )
            {
                //alert( element ) //debug/test
                return element
            }
        }
        return 0; //error: no form found in ancestors
    }
    //]]>
</script>

Use a new CSS file to override current website's

Besides using !important that most answers are advising you to use, this is a matter of CSS specificity

The concept

Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.

How is it calculated?

The specificity is calculated on the concatenation of the count of
each selectors type. It is a weight that is applied to the
corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.

Some rules of thumb

• Never use !important on site-wide css.
• Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
• Never use !important when you're writing a plugin/mashup.
• Always look for a way to use specificity before even considering !important

can be represented by 4 columns of priority:

inline = 1|0|0|0

id = 0|1|0|0

class = 0|0|1|0

element = 0|0|0|1

Left to right, the highest number takes priority.

---

Here is a snippet with a Full example of a CSS specificity

/*demo purposes*/body {margin: 0;padding: 0}div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY: 0/1/0/0 */#id {  background-color: green}
/* SPECIFICITY: 0/0/1/0 */.class {  background-color: yellow }
/* SPECIFICITY: 0/0/0/1 */section {  background-color: blue }  /* ------------ override inline styles ----------- */
/*to override inline styles we  now use !important */
/* SPECIFICITY  0/0/1/0 */
.inline {  background-color: purple !IMPORTANT /*going to be purple - final result */ }

<article>  <div id="id">    <div class="class">      <section>        <div class="inline" style="background-color:red">          <!--SPECIFICITY 1/0/0/0 - overridden by "!important -->        </div>      </section>    </div>  </div></article>

Is it possible to detect a visitor's browsing history using JavaScript or PHP?

Unfortunately, this is possible this is possible.

You can apply a CSS rule to a:visited that has a background image for a PHP script.

How to load up CSS files using Javascript?

Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute unfortunately IE6 doesn't support it consistently.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.example/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

This example checks if the CSS was already added so it adds it only once.

Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.

VanillaJS

Here is an example that uses plain JavaScript to inject a CSS link into the head element based on the filename portion of the URL:

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Insert the code just before the closing head tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js) file will cause a Flash of unstyled content (FOUC) to appear.

---

Related Topics