I am making my way through Lynda.com's JS tutorial, and they have a whole chapter on image rollevers for buttons. Why would I use JS when I could just use CSS-- to create image rollevers?
-
It might be because that tutorial is freaking old.metrobalderas– metrobalderas2010-12-14 21:30:47 +00:00Commented Dec 14, 2010 at 21:30
-
javascript provided a way to implement image rollovers before CSS existed and/or was widely adopted (we're talking circa 1998). Now days, you should always use CSS for this sort of thing - I can't think of a single reason to favor Javascript instead.Lee– Lee2010-12-14 21:33:58 +00:00Commented Dec 14, 2010 at 21:33
-
I can find one - crossbrowser compatibility.easwee– easwee2010-12-14 21:46:04 +00:00Commented Dec 14, 2010 at 21:46
-
1@easwee - Cross browser compatibility? Unless you're talking about IE 5 or less then this isn't a concern in the lease sense. The number of IE 5 users or less is monumentally small. If you're arguing that javascript rollovers should be used for cross-browser compatibility, then you're pretty much claiming that CSS is useless altogether!Qix - MONICA WAS MISTREATED– Qix - MONICA WAS MISTREATED2010-12-14 22:01:05 +00:00Commented Dec 14, 2010 at 22:01
-
@easwee I agree with @Di-0xide. You're effectively arguing against using any CSS when a "cross-browser" JS alternative exists.user229044– user229044 ♦2010-12-14 22:42:30 +00:00Commented Dec 14, 2010 at 22:42
|
Show 5 more comments
5 Answers
Why would I use JS when I could just use CSS-- to create image rollevers?
You shouldn't, it sounds like the tutorial may be simply using it as an example to teach you JS. There is no case where you should prefer JS to CSS when identical results can be achieved with CSS.
5 Comments
zkidd
Awesome. . . at least my gut was right. . . I'm thinking this is way to much work here, when I can just use psuedo classes :-)
easwee
Note - not all psuedo classes work in every browser - js does.
Qix - MONICA WAS MISTREATED
@easwee - True, however for a CSS rollover all you really need is the hover psudo-class, which has been supported since CSS1, and consequently almost every browser that supports CSS.
user229044
@easwee That's specifically why I said when identical results can be achieved. Also, JS doesn't work in every browser, and while many people browse with JS turned off either explicitly or via something like NoScript, I don't think anybody browses with CSS turned off.
easwee
IE6 supports :hover only on <a> - at work we still have to support that so in case i need rollover on a div i have to use js. In case you don't care about old browsers than obviously use css only. The amount of users who browse without js on is less than 1% - and it's not that it doesn't work - they choose to turn it off (and they can turn off css too). But don't get me wrong - if it can be done with css - do it with css.
At the time of those writings, the :hover pseudo class did not exist and/or was not supported by all browsers. Therefore, javascript was the preferred method of achieving the rollover effect.
Nowadays the CSS :hover pseudo class exists and is supported in all major browsers; therefore, the CSS method is preferred.
answered Dec 14, 2010 at 21:33
Qix - MONICA WAS MISTREATED
15.3k17 gold badges95 silver badges158 bronze badges
Comments
Sometimes you want to change a content image on rollover and not a background image (and putting two versions of a content image next to each other then using :hover to hide and show them puts a foot into the realm of "content not making sense without the presentation layer")
1 Comment
Qix - MONICA WAS MISTREATED
Dorward - Interesting theory. While this may not have been the reasoning behind those specific tutorials, it is definitely something to think about. Of course this would be on a per-project basis; it's up to the designer to decide which method is best suited for the site -- either content-aware or visually-aware.
Only reason I can think (other than the ones already mentioned) is that using :hover pseudo-selector on non-anchor elements, cause performance problems in IE7 and IE8 when a strict doctype is used.
reference: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
But in my opinion, that still isn't an enough reason to use JS over CSS.
1 Comment
Qix - MONICA WAS MISTREATED
I agree. Strict doctypes are, in my view, used for extremely basic or project-specific HTML that needs to not deviate in the least sense (like embedded HTML displays, etc.)
I think this answer css hover vs. javascript mouseover of kingjeffrey is great. I would prefer this method because users with js turned off can still use the menu with most browers and users using old browsers still have a functional menu if they did not turn off js. I think this solution would make the menu usable for most cases.
