CODEWITHSUNDEEP
htmlcss
user7835877
user7835877

Reputation:

why pseudo-class :visited doesn't work properly like font-size or text-shadow doesn't work at all but color works

the color property works alright as it should but the other two properties (font-size and text-shadow) doesn't work. when the link is visited its font size should be reduced to 20 px and text-shadow property be applied but it doesn't

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* unvisited link */

    a{
        font-size: 30px;
    }

    a:link {
        color: red;
    }
    /* visited link */

    a:visited {
        color:orange;
        font-size: 20px;
        text-shadow: 5px 5px 5px orange;
    }
    /* mouse over link */

    a:hover {
        color:hotpink; 
        font-size: 20px;
        text-shadow: 5px 5px 5px hotpink;
    }
    /* selected link */

    a:active {
        color: blue;
    }
    </style>
</head>

<body>
    <a class="stack" href="https://stackoverflow.com/">stackoverflow</a>
</body>

</html>

Upvotes: 0

Views: 140

Answers (1)

Tschallacka
Tschallacka

Reputation: 28722

It will not work in newer browsers

The reason is privacy.

If you are able to affect css styles by a visited status, you can then use javascript to infer where that person was. A marketing script could then place a lot of offscreen links in your document and then iterate them to asses if you were at amazon.com, mcdonalds.com, pornhub.com, mylittlepony.com, facebook.com etc.. and modify advertising to your most visited sites.

This is why the standards restrict the making of style changes and reading from :visited attributes.

The color works for visiblity aspect, but when you try to access the color via javascript you'll get the default colour returned as if it wasn't visited.

$('a').each(function(index,elem) {
    $el = $(elem);
    console.log($el.text(),$el.css('color'),"red = 0, green = 0, blue = 255 ");
})
a {
  color: blue;
}
a:visited {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com">stackoverflow.com</a>
<a href="https://theanswertotheuniverselifeandeverythingis.com">unvisited I hope</a>

Even when using a html canvas screenshotting technique you can't harvest which urls have been visited by pixel sampling. It will also render as unvisited.

Example of visited links rendering default

They really take privacy protection seriously.

Upvotes: 1

Related Questions