Use user-agents color for links

Question

I have a reset.css file which sets a specific color for links. I MUST use this reset file and I cannot remove the link color from there.

So after applying a link color in the reset, I want to override this to use the browsers' standard link color again. Is this possible with CSS2? I'm thinking somehting like:

a:link { color: user-agent; }

You could give the new color to an anchor tag, with class "newColor" or something. Else it will always pick the UA color! — Jason van der Zeeuw, Dec 23 '14 at 10:07

score 3 · Accepted Answer · edited May 23 '17 at 12:05

Once you "reset" the color (technically, replace it with a new value) in a stylesheet, you cannot restore it to the UA default in a way that will work for all UAs. Implementation-specific values and hacks may exist, but there is no standard solution and it is possible that not every implementation will provide or accommodate such a hack.

The best you can do is to approximate the closest color(s) shared by different UAs. The HTML5 spec lists some suggested defaults which you can use as well. See my answer to this question.

score 2 · Answer 2 · answered Dec 23 '14 at 10:08

In webkit you can do:

a {
    color: -webkit-link;
}

a:active {
    color: -webkit-activelink;
}

See this jsfiddle.

You may need to add !important, depending on the priority of the other styles you're trying to override. Unfortunately, I don't know of any alternative for Internet Explorer or Firefox. You might just have to look up their colors and replicate them manually with CSS styles for those platforms specifically. For example, say IE and Firefox use #00f and #30f (they don't, but hypothetically):

a {
    color: #00f;
    color: -webkit-link;
}

a:active {
    color: #30f;
    color: -webkit-activelink;
}

Because IE and Firefox don't recognize the -webkit-prefixed colors, they'll just fall back to the previous colors declared.

Use user-agents color for links

2 Answers2