a:visited priority : a bug or a feature
VK
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive,
so visited links will not "hover".
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}
I used this fix for year and just got curious: is it a bug or
considered to be a documented feature?
Els
How about just putting them in the right order?
Like:
a:link
a:visited
a:focus
a:hover
a:active
?
No bug - no fix needed :-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
VK
Els wrote:
> VK wrote:
>
> > a:active { color: #FF0000; text-decoration: underline}
> > /* a:visited color rule has higher priority over
> > a:hover if viewed from your local drive,
> > so visited links will not "hover".
> > To fix this bug (feature?) one should use
> > additional !important instruction: */
> > a:hover { color: #FF0000 !important; text-decoration: underline}
> > a:link { color: #0000FF; text-decoration: underline}
> > a:visited { color: #800080; ; text-decoration: underline}
> >
> > I used this fix for year and just got curious: is it a bug or
> > considered to be a documented feature?
>
> How about just putting them in the right order?
> Like:
>
> a:link
> a:visited
> a:focus
> a:hover
> a:active
What do you mean by "right order"? Alphabetically it should be active,
focus, hover, link, visited. Logically (from state to state)it should
be link, hover, focus, active, visited.
What's so right in the order you've indicated?
And why this sequence has effect on link color style priority?
Els
> Els wrote:
>> VK wrote:
>>
>>> a:active { color: #FF0000; text-decoration: underline}
>>> /* a:visited color rule has higher priority over
>>> a:hover if viewed from your local drive,
>>> so visited links will not "hover".
>>> To fix this bug (feature?) one should use
>>> additional !important instruction: */
>>> a:hover { color: #FF0000 !important; text-decoration: underline}
>>> a:link { color: #0000FF; text-decoration: underline}
>>> a:visited { color: #800080; ; text-decoration: underline}
>>>
>>> I used this fix for year and just got curious: is it a bug or
>>> considered to be a documented feature?
>>
>> How about just putting them in the right order?
>> Like:
>>
>> a:link
>> a:visited
>> a:focus
>> a:hover
>> a:active
>
> What do you mean by "right order"?
The right order for the effect you want - which happens to be the
effect most people want.
> Alphabetically it should be active,
> focus, hover, link, visited.
I've only once seen someone alphabetize their style rules, and believe
me, it did not quite have a good effect on the displayed page.
> Logically (from state to state)it should
> be link, hover, focus, active, visited.
In that order, you are assuming no one hovers over visited links. In
fact, it makes for the unwanted effect you are trying to beat.
> What's so right in the order you've indicated?
Did you try it?
> And why this sequence has effect on link color style priority?
Because of the cascading effect of style rules. If two rules are
equally specific, the last one in line has effect.
Las Vegas (Forest) Has Animals.
link - visited - focus - hover - active.
Just try it.
VK
I did - it works. Thank you for your clear answers and your patience.
I'm still staying with !important (it seems more explicit and secure)
but now I know *the truth* ;-)
Remi Villatel
>>How about just putting them in the right order?
>>Like:
>>a:link
>>a:visited
>>a:focus
>>a:hover
>>a:active
> What do you mean by "right order"? Alphabetically it should be active,
> focus, hover, link, visited. Logically (from state to state)it should
> be link, hover, focus, active, visited.
>
> What's so right in the order you've indicated?
>
> And why this sequence has effect on link color style priority?
I think it's a kind of urban legend. Someone tried to make all these
link styles work and find that this particular order works. Now, every
time you complain one of your link styles doesn't work as expected, the
only answer you get is to use the "right order".
According to the W3 docs, there's two kinds of link "styles": The link
pseudo-classes (link, visited) and the dynamic pseudo-classes (active,
focus, hover) --which are not reserved for the links by the way.
If anything is the "right order" that can be to define first the link
classes then to add extra-properties with dynamic classes. The so-called
"right order" doesn't matter if you respect this rule and use:
a:visited:hover { ... }
So, for me, the "right order" is:
a:link
a:hover
a:focus /* Not a good idea IMHO to touch this one */
a:active
a:visited
a:visited:hover
It makes sense and it works.
Myth busted! ;-)
--
==================
Remi Villatel
maxilys_@_tele2.fr
==================
Els
> a:focus /* Not a good idea IMHO to touch this one */
Why not?
When tabbing from link to link, it makes it much easier to see which
link is selected.
VK
Remi Villatel wrote:
> a:link
> a:hover
> a:focus /* Not a good idea IMHO to touch this one */
> a:active
> a:visited
> a:visited:hover
Bingo!
That has at least some CSS-ruled sense.
"It's all legacy, man... legacy..."
(Changed quote from the "Platoon" movie)
Gus Richter
Remi Villatel
>>a:focus /* Not a good idea IMHO to touch this one */
> Why not?
> When tabbing from link to link, it makes it much easier to see which
> link is selected.
Yes but it's already defined at browser level and has some kind of
system consistancy: it's a dotted frame everywhere in the GUI. So, in
order not to fool the user, it's better to leave it this way. Unless the
standard focus becomes unusable, there's no valid reason to change it.
It's not meant to be pretty... if the purpose of CSS is to beautify
everything. ;-)
kchayka
> Els wrote:
>
>>>a:focus /* Not a good idea IMHO to touch this one */
>
>> Why not?
>> When tabbing from link to link, it makes it much easier to see which
>> link is selected.
>
> Yes but it's already defined at browser level and has some kind of
> system consistancy: it's a dotted frame everywhere in the GUI.
Setting :focus rules doens't mean the focus outline (that dotted frame)
goes away.
> It's not meant to be pretty...
It's meant to be useful. Keep in mind, too, that web page color schemes
rarely match the user's GUI. The focus outline can be very hard to see
on a lot of sites.
I usually set :focus and :hover the same. Then those who use keyboard
navigation get pretty much the same interactivity that mouse users do.
BTW, I'm a keyboard user, so I have some personal experience with this.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
VK
> http://meyerweb.com/eric/css/link-specificity.html
In the programming you can either carefully arrange statements in
operator precedents:
var a = 1+2;
var b = a*3;
or simply use parenthesis to be the boss:
var b = (1+3)*3;
I consider !important statement as CSS equivalent to math parenthesis
and don't understand why only the first option (precedents slavery) is
explored.
But I never thought of myself as a CSS profi so I may be missing some
evident issues.