I tried different variations of this code fo Stylish:
a:visited {
text-decoration: line-through;
}
What i need to do for "line-through" visited links?
I found this by using addEventListener("click"...)
document.getElementById("link1").addEventListener("click",function(){
document.getElementById("link1").style.textDecoration = "line-through";
});
document.getElementById("link2").addEventListener("click",function(){
document.getElementById("link2").style.textDecoration = "line-through";
});
Link 1
Link 2
EDIT: Warning text-decoration styling is not permitted due to the user's privacy issues.
src: https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
Limits to visited link styles
You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:
color
background-color
border-color (and its sub-properties)
column-rule-color
outline-color
The color parts of the fill and stroke attributes
Related
Is there any reason why this does not work on Internet Explorer or Chrome:
<html>
<head>
<style>
A {font-weight: bold; color:black;}
A:visited {font-weight: normal; color: black; }
.Empty {font-weight: bold; color: black; }
</style>
</head>
<body>
click me
</body>
</html>
The link I click never goes to normal and just stays bold. On some other browsers it works.
Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.
One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
In rare scenarios, 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 will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
One useful attribute that does work with :visited is background-color. So try:
:visited {background-color:red;}
:visited also works on non-a elements.
The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.
I came up with the following workaround to reach the desired effect.
It is possible to change the background-color of the visited link.
The solution is very simple:
set a background-image on the link with the same height as your link
and 1px width and repeat the image horizontally
the image has the same color as the background of the link
make one pixel of that image transparent, in the vertical middle
on :visited state just change the backgroundcolor of that link to the text-color of the link
Only one line of the background-color wil be visible, because the background-image is masking it
Here's an example:
a:link {
color:#000;
background:#FFF url('../img/linethrough.png') repeat-x top left;
}
a:visited {
background-color:#000;
color:#000;
}
CSS itself is not case-sensitive, but if the HTML file using this style has an XML declaration and an XHTML doctype, that CSS is not going to work, because tags are case-sensitive. You'll have to set the "a" tags to lower-case.
Explained here:
http://reference.sitepoint.com/css/casesensitivity
Perhaps try changing the color attribute and see whether that has an effect at all.
To troubleshoot, you might want to try to utilize the developer tools in chrome to see what style is applied.
You need to have separate declarations for a:link, a:visited, a:active, etc.
Remove your first style that does not contain a colon. It's overriding. Replace with a:link.
Is it possible to use link a:visited only when it is needed? When i do't use link a:visited it work fine except one or more mobile browsers (one browser). It show violet colored link. When i use link a:visited this selector is superordinate. I created jsfiddle example. I know that i can use a:visited color same as a:link color but what if i want to use more as one links color? It show me all links with color defined in a:visited selector. How i can fix violet colored links on mobile browsers?
My visited links for a web project won't underline, however, the rest of the visited modifications are working, and underline is working for hover. I showed my instructor this and he was confused, and said he would try to find time to look at it, however, the due date is nearing si I can no longer wait. Here is my the section of my layout page dealing with the anchor tag:
a:link
{
text-decoration: none;
color: #d1bd22;
font-size: 1.3em;
}
a:visited
{
text-decoration: underline;
color: white;
font-size: 1.3em;
}
a:hover
{
text-decoration: underline;
color: #d1bd22;
font-size: 1.3em;
}
a:active
{
text-decoration: none;
color: white;
font-size: 1.3em;
}
Here is a link to my website:
http://cis.luzerne.edu/~ds0002/morlansfamousshop.html
Hat tip to #pwdst for spotting this.
See this documentation for Firefox. Similar rules apply to Chrome.
Since JavaScript can read the styles applied to an element (as well as other elements, and the computed styles of the same), allowing changes to a link when it is :visited can reveal information about what others sites a person has visited.
In order to protect users' privacy, browsers limit which properties can be changed by :visited and text-decoration can not be altered.
See also: The Selectors specification which blesses this behaviour:
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.
I was correct in the surmise in the comments. If you create a test example (in JS Fiddle or a test HTML file) then the property is being applied when you inspect in Dev Tools, but cannot be seen visually. Why is this?
There were several stories about users privacy being compromised by malicious sites adding links (often hidden) to their pages, and then using the :visited pseudo class to determine if the user had visited the URL or not.
As a result the Mozilla Developer Network states-
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. Note also that the
alpha component will be ignored: the alpha component of the
not-visited rule is used instead (except when the opacity is 0, in
that case the whole color is ignored, and the one of the not-visited
rule is used.
Though the color can be changed, the method getComputedStyle will lie
and always give back the value of the non-visited color.
For more information on the limitations and the motivation for them,
see Privacy and the :visited selector.
See https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
The fact that the colour property was being applied was also only half true, in that it is reported as applied and visually present - but the getComputedStyle method will lie and return the colour as if the rule was not applied.
As a result malicious webmasters can no longer determine websites you have been visiting using this technique.
I believe the reason this is happening is precedence.
Because you've defined a:link before the others, and the others aren't adding any additional weight, the first definition is being used by the browser.
Try putting the a:link at the end and it should work as expected (since only the specific hover and visited will match the previous definitions)
Why I am unable to change padding for the visited link? I am trying this:
HTML:
link
CSS:
a{
display: block;
background: green;
padding-left: 100px;
}
a:visited{
background: red;
padding-left: 0;
}
Demo:
http://jsfiddle.net/ZVZWW/
Unfortunately, due to security concerns, the list of styles you are allowed to apply to :visited elements is limited. In the past, hackers have been able to sniff history from users by checking for differences in styles of normal links, and ones the user had previously visited. More on the security concerns here, and what styles are allowed: https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/
As for allowed styles and modifications to :visited elements, here is a what MDN has documented on the subject:
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:
color
background-color
border-color (and its sub-properties)
outline-color
fill and stroke colors
In addition, even for the properties you can set for visited links,
you won't be able to change the transparency between unvisited and
visited links, as you otherwise would be able to using rgba() or
hsla() color values or the transparent keyword.
Only the following properties can be applied to visited links:
color
background-color
border-color (and its sub-properties)
outline-color
Source : - Privacy_and_the_:visited_selector
In the following example, a mouse hover over each link changes the image:
http://www.prism.gatech.edu/~dm257/sprite.html
The trick is the following line of code:
#home a:hover {
background: transparent url('sprite.png') 0px -37px no-repeat;
}
The a:hover selector sets the background to a green part of of sprite.png.
Can I do the same thing with a:visited? Make the icon turn green after the user has clicked it?
I changed a:hover to a:visited and nothing happens.
Styling of :visited is currently limited to prevent security risk related to exposing user's browsing history:
https://developer.mozilla.org/En/CSS/%3Avisited:
Starting in Firefox 4, major limitations to the styles you can apply
using this selector have been introduced. For more information on the
limitations and the motivation for them, see Privacy and the :visited
selector.
The same limitations have been adopted by other browsers, including
Safari 5/4.1 and Chrome 6.
you can accomplish with the help of this plugin - Visited links plugin
Download JS: jQuery.visited.js
See below lins which is related:
set a:visited style with javascript or jquery
Setting CSS pseudo-class rules from JavaScript
You absolutely can. Of course, the :visited state will only be visible upon the next load of the page. Browsers are able to determine whether or not a page has been previously accessed via header information.
Here's a jsFiddle that demonstrates the proper declaration order with helpful comments:
http://jsfiddle.net/fmYdD/4/