What are cons if we use javascript to apply css selectors to that browser who do not support that property by default

Question

What are cons if we use JavaScript to apply only CSS property/selectors to that browser who do not support that property by default? to keep my HTML semantic and keep free from Deprecated HTML.

Is it against content, style and Behavior separation?

If I make accessible site then should i only use whatever i can do with pure css. shouldn't use JavaScript to apply CSS properties.

I know those css properties which I'm applying through javascript will not work if javascript is disabled. then due to this reason shouldn't use javascript to apply css never.

I'm talking about using these type of stuffs

http://www.fetchak.com/ie-css3/

http://code.google.com/p/ie7-js/

http://www.noupe.com/css/using-javascript-to-fix-12-common-browser-headaches.html

http://www.catswhocode.com/blog/8-javascript-solutions-to-common-css-problems

http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/

Answer 1

The cons include:

• worse maintainability (eg. if something doesn't look right -> check the stylesheet, if you use js then this doesn't hold)
• worse performance (visuals done through js are always slower then css)
• potential screw-ups with browser-detection

A good approach to consider is using graceful degradation - not every browser has to look the same, but all have to be accessible.

Answer 2

It is fairly common practice to use Javascript to detect CSS support and apply fixes. Go right ahead. The risk comes in when you start applying the literal CSS fixes in the Javascript, e.g element.style.border = '1px solid black', since that will be a nightmare to maintain. As long as you do your actual styles in your stylesheet, you're good to go.

For instance, Modernizr is a project that adds classes to your body tag based on what technologies are supported. This allows you to use Javascript for detection, but then apply your styles in the stylesheet. (For instance, Modernizr gives you body.borderradius if rounded corners are supported, and body.no-borderradius otherwise.)

This allows you to easily fall back on other styles if you need to. Of course, if a certain feature isn't supported, perhaps it just isn't all that important - you can probably emulate it to some extent, but does it really matter if IE7 users see pointy corners? Maybe it does, but probably not.

EDIT: Regarding those links you just added: they look fine to me. I wouldn't depend on them too significantly, but if it's just a single line you drop in, you haven't mixed your technologies significantly. In fact, I rather like how that IE-CSS3 project does it, by having you drop those lines in the actual stylesheet. That keeps everything all together.