Page 1 of 1

Cleaning up links.

Posted: Mon Jan 27, 2014 12:43 pm
by RSteinwand
Hi Albert,

I just got done cleaning up a bunch of junk hyperlink code.

Code: Select all

a.plainlink,a.plainlink:hover,#main a.plainlink,#main a.plainlink:hover{border:0;background:inherit;margin:0;padding:0}
Since a.plainlink defines all link states, the :hover code may not be needed.

Code: Select all

.jGrowl-notification a,.jGrowl-notification a:visited,.jGrowl-notification a:hover,.jGrowl-notification a:active{color:#fd0}
Again, since .jGrowl-notification a defines all link states, none of the other states are needed.

Then there's this mess. (Not my code.)

Code: Select all

a.aaButtonLinkA1,a.aaButtonLinkA1:link,a.aaButtonLinkA1:visited,a.aaButtonLinkA1:hover{margin:0;padding:3px 6px;border:0;transition:none}
Which could be simplified to just this, since a.aaButtonLinkA1 defines all the states:

Code: Select all

a.aaButtonLinkA1{margin:0;padding:3px 6px;border:0;transition:none}
What's your take on this?

Re: Cleaning up links.

Posted: Mon Jan 27, 2014 4:13 pm
by Albert Wiersch
Hi Rick,

My initial though without doing any testing is that the link states (pseudo-classes) may be needed to provide the desired (higher) specificity. Without explicitly specifying the link states, the specificity will be lower which could affect the application of the rule.

Now a little testing...

For example, let's say you have this:

Code: Select all

a.plainlink:visited { color: red; }
a.plainlink { color: orange; }
The a.plainlink rule is not the same as a.plainlink:link,a.plainlink:active,a.plainlink:hover,a.plainlink:visited. The a.plainlink rule will not override the previous a.plainlink:visited rule and change a visited link to orange but it will if you change the a.plainlink rule to a.plainlink:link,a.plainlink:active,a.plainlink:hover,a.plainlink:visited.

This may help:
http://meyerweb.com/eric/css/link-specificity.html

Re: Cleaning up links.

Posted: Tue Jan 28, 2014 7:17 am
by RSteinwand
Hi Albert.

Sorry, your example isn't a good one b/c of the specificity you mentioned. More to less won't work.

This works fine in my testing:

Code: Select all

.main a,label{margin:0 -3px;padding:1px 3px;text-decoration:none;border:1px solid transparent;transition:background .5s ease-in,border .5s ease-in,color .5s ease-in;border-radius:3px;background-clip:padding-box !important;color:#25428e}
.main a:hover,.main a:active,label:hover{margin:0 -3px;padding:1px 3px;color:#fff;background:#334268;border:1px solid #89a4d2;border-radius:3px;background-clip:padding-box !important;cursor:pointer}
I don't know how you'd test for it tho.

You might like that link. It's similar to yours on your site. You can see it live here.

Re: Cleaning up links.

Posted: Tue Jan 28, 2014 7:45 am
by Albert Wiersch
RSteinwand wrote:Sorry, your example isn't a good one b/c of the specificity you mentioned. More to less won't work.
Yes, that was my point... more to less specificity won't work which is why you may need to specify (keep) the pseudo-classes (link, active, hover) in order for it to work the way you want... but of course it depends on what you want and the other CSS involved as to whether you really need the higher specificity obtained by using the pseudo-classes.
RSteinwand wrote:You might like that link. It's similar to yours on your site. You can see it live here.
Yes, I like that effect. I'd probably speed it up though... maybe .2 or .3 seconds instead of .5.