Cleaning up links.

Discussion about CSS related issues.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Cleaning up links.

Post by RSteinwand » Mon Jan 27, 2014 12:43 pm

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?
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3417
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Cleaning up links.

Post by Albert Wiersch » Mon Jan 27, 2014 4:13 pm

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
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Cleaning up links.

Post by RSteinwand » Tue Jan 28, 2014 7:17 am

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.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3417
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Cleaning up links.

Post by Albert Wiersch » Tue Jan 28, 2014 7:45 am

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.
Image
Albert Wiersch

Post Reply