Hide CSS rule from validator w/ javascript

Can this be done?

[iseem]

I need to use the -moz-outline property to get ride of the dotted outlines around links (at clients request) but the CSS *must* validate (also at clients request). Can I hide that rule w/ javascript? I'm a javascript newbie so any help would be appreciated.

[mrhoo]

a, a:focus{outline: none;}

[iseem]

That's only for IE and FF 1.5+. It's the older FF property that doesn't validate.

[Fotiman]

Why use the old methods when you were just provided with the correct one?

[encyclo]

There are three glaring problems here. The first is the client's request itself: the dotted outline is there for accessibility reasons, as it allows for navigating the site via the keyboard rather than just by using a mouse. Removal of the visual clue showing the focus is very damaging to your site's accessibility for little or no advantage.

The second problem is that the client is demanding 100% validity but is requesting something which would force invalidity (if you want good cross-browser support) - so the two demands are diametrically opposed. You can't have it both ways in this instance.

The final problem is your approach - the answer to your question is yes, you can use Javascript to hide the code and therefore make your document validate, but there is a difference between a document that validates and one that is valid. You are proposing simply to hide the fact that you are using invalid CSS - you are just going to fool a validation tool into showing an incorrect result.

I would recommend that you speak to your client and explain the situation, firstly by emphasising the importance of the focus indicator, and secondly by confronting him with the choice between having a valid and accessible site or an invalid site with reduced accessibility.

[Fotiman]

Very well put encyclo!

[iseem]

encyclo:

If we all loved default browser styles as much as you seem to, then CSS wouldn't exist. Do you object to styling a:focus with something other than an ugly dotted outline? And how the heck does the outline around a:active aid in accessibility?

Anyway my question was about javascript if anyone cares to help.