...

View Full Version : CSS or JavaScript?



Hashim1
01-16-2012, 10:38 AM
Say I wanted to implement a rollover on my website - should I do this via CSS or JavaScript? I understand rollovers can be created in both, but which of those methods is better and more reliable, and generally just recommended to use over the other, and for what reason?

Thanks for any help in advance. :)

VIPStephan
01-16-2012, 11:33 AM
It depends on what kind of functionality you want. There are intricate rollover behaviors/interactions that can only be done with JS. But if it’s a simple rollover thing then definitely use CSS. It’s easier and it requires less processor power.

Hashim1
01-16-2012, 11:42 PM
But are there any advantages/disadvantages of using one over the other? Is it recommended to use one over the other?

Also, say I wanted to achieve something like this:

http://www.marketforceinc.net/index.html

...speaking specifically of the main menu rollover and also the ones on the smaller links at the top of the page - I realize that is done via Flash, just tested it, but would it be possible to achieve the same thing using CSS or JS just as smoothly and effectively?

teedoff
01-17-2012, 02:31 AM
The biggest disadvantage of using for javascript for ANY site functionality is that ppl can and have disabled js in their own browsers. Therefore, anything in your site that requires js to work, wouldn't work for them. You can see how this might be quite a problem for some ppl.

A good rule of thumb is, javascript should only enhance the user experience, the site shouldnt hinge on it to function.

felgall
01-17-2012, 09:03 AM
Very few people have CSS disabled or use a plain text browser (eg. Lynx).

A slightly larger percentage use browsers that don't support JavaScript or have disabled JavaScript in their browser. This group will include everyone in the above group as a subset.

A much larger percentage will have flash disabled or more likely will not have installed it in the first place.

It is therefore better to use CSS when it will do what you require.

djh101
01-17-2012, 10:03 AM
Well you can't really compare CSS and Javascript as a one versus-the-other type thing, as they are both different parts of web design that serve different functions- CSS alters the presentation of your page while Javascript allows you to dynamically alter your page (to say the least) at runtime. So, for example, your navigation buttons could be given a default background via CSS when the page loads and when a user hovers over the button, javascript could be used to change the CSS background property. If Javascript isn't necessary, though (a lot of features that could previously only be accomplished with Javascript are now possible with HTML5 and CSS3), it shouldn't be used, as it requires more resources and may be disabled on a users browser.

You should also look into JQuery. It offers lots of pretty presentation functions, from accordion menus to shaking elements.

felgall
01-17-2012, 07:38 PM
Well you can't really compare CSS and Javascript as a one versus-the-other type thing, as they are both different parts of web design that serve different functions

You obviously haven't read the thread properly as this discussion is about something that can be done in CSS in a limited way but which can be done in a more powerful way using a small amount of JavaScript. jQuery is definitely not necessary for such a simple task.

The OP needs to decide whether to implement the simple version in CSS or to implement a more powerful one with a couple of lines of JavaScript. Of course a slightly more complicated approach would be to implement both so that the CSS version works when JS is unavailable.

Hashim1
01-17-2012, 08:11 PM
Okay, thanks. :) Finally, what about the last part of my question...


...would it be possible to achieve the same thing using CSS or JS just as smoothly and effectively? Can a rollover like as seen on that page I linked to above, be created with JavaScript or CSS and work exactly the same, just as smoothly as the Flash one? Is one faster, slower, more limited, etc, than the other?

Thanks for all the help I've got in this thread, it's much appreciated and will be taken on board. :)

djh101
01-17-2012, 09:29 PM
You obviously haven't read the thread properly as this discussion is about something that can be done in CSS in a limited way but which can be done in a more powerful way using a small amount of JavaScript. jQuery is definitely not necessary for such a simple task.
The only way this can be done is with CSS. Javascript merely changes the CSS to alter the presentation, it isn't something separate that can style something all by itself. And creating a rollover as animated as the one in the example isn't really that simple a task. For animations like that, JQuery is usually the way to go.

And to answer the above question, no, the above cannot be created with pure CSS. As already mentioned, I would recommend JQuery (a nice animation tutorial can be found here (http://api.jquery.com/animate/)) to get animations similar to the one in the example.

felgall
01-17-2012, 09:31 PM
Can a rollover like as seen on that page I linked to above, be created with JavaScript or CSS and work exactly the same, just as smoothly as the Flash one? Is one faster, slower, more limited, etc, than the other?

A JavaScript version can do just about anything that a Flash version can with the added bonus of working in browsers that don't have Flash installed but do have JavaScript.

A CSS version would only be able to do a straight swap of one image for the other without any transition.

Take a look at http://www.brothercake.com/site/resources/scripts/transitions/ for examples of the sorts of transitions that can be done easily in JavaScript (using the library supplied on that site).

teedoff
01-17-2012, 09:41 PM
A JavaScript version can do just about anything that a Flash version can with the added bonus of working in browsers that don't have Flash installed but do have JavaScript.

A CSS version would only be able to do a straight swap of one image for the other without any transition.

Take a look at http://www.brothercake.com/site/resources/scripts/transitions/ for examples of the sorts of transitions that can be done easily in JavaScript (using the library supplied on that site).

Although CSS3 has the ability to do transitions without any js, but not sure how m any browser support it. I'm pretty sure FF4 and up, as well as Opera and Chrome. But even IE9 doesn;t see to support it. IE 10 possibly?

You can read about CSS3 transitions here (http://www.alistapart.com/articles/understanding-css3-transitions/).

Hashim1
01-17-2012, 11:10 PM
Thanks a lot for all the help, and teedoff, that link you provided helped immensely, it's really cleared up what transitions are in CSS, how they work, plus much more. :D One very tiny problem, but a major one at the same time - that article seems to be an excerpt from a book published in 2010, in which it mentions transitions aren't supported by all major browsers as of yet - does anyone know whether, 2 years later, the situation has changed? Are transitions supported by all major browsers now, and therefore, can I use them confidently knowing that users of all the major browsers can see them just the same?

EDIT - Sorry, teedoff, just realized you explained that in your post, too. So, everything else except IE supports it? Hmmm... to boycott IE users, or not to? :rolleyes:

Hashim1
01-17-2012, 11:13 PM
A JavaScript version can do just about anything that a Flash version can with the added bonus of working in browsers that don't have Flash installed but do have JavaScript.

A CSS version would only be able to do a straight swap of one image for the other without any transition.

Take a look at http://www.brothercake.com/site/resources/scripts/transitions/ for examples of the sorts of transitions that can be done easily in JavaScript (using the library supplied on that site).

So am I to take this to mean that, in a nutshell - JavaScript can achieve the navigation bar rollover effect used in that site I linked to (http://www.marketforceinc.net) (http://www.marketforceinc.net/index.html), and it will look just as smooth and clean as it does in Flash, but if done in CSS, it won't look as smooth and clean?

teedoff
01-17-2012, 11:29 PM
So am I to take this to mean that, in a nutshell - JavaScript can achieve the navigation bar rollover effect used in that site I linked to (http://www.marketforceinc.net) (http://www.marketforceinc.net/index.html), and it will look just as smooth and clean as it does in Flash, but if done in CSS, it won't look as smooth and clean?

You can achieve that effect in both javascript AND CSS3, but there are drawbacks to both. You could even use BOTH to cover your bases.

Many browsers dont support CSS3 properties yet, so thats the drawback to relying on CSS3.

But many user may have disabled js for one reason or another, a small percent granted, but some nonetheless.

Why not go ahead and work up a demo of both methods, then you can see how each one looks. There are plenty of demos for each method online.

Hashim1
01-17-2012, 11:53 PM
You can achieve that effect in both javascript AND CSS3, but there are drawbacks to both. You could even use BOTH to cover your bases.

Many browsers dont support CSS3 properties yet, so thats the drawback to relying on CSS3.

But many user may have disabled js for one reason or another, a small percent granted, but some nonetheless.

Why not go ahead and work up a demo of both methods, then you can see how each one looks. There are plenty of demos for each method online.

Ok, let's suppose I did both? Would I need to setup a script in place to detect whether CSS3 is supported in the user's browser (is it even possible to do so?), and whether JS is supported? Or would it just be a case of, having both the CSS and JS script active at the same time and seeing which the user's browser supports? If the latter, then wouldn't this cause issues with CSS and JS clashing somehow?

felgall
01-18-2012, 02:42 AM
to boycott IE users, or not to? :rolleyes:

Another alternative would be if you use Microsoft conditional comments to present a JavaScript solution for IE users and go with a CSS3 solution for everyone else.

Hashim1
01-18-2012, 12:51 PM
Another alternative would be if you use Microsoft conditional comments to present a JavaScript solution for IE users and go with a CSS3 solution for everyone else.

What do you mean by Microsoft conditional comments? Do you mean basically test for IE, and then use JavaScript for the feature for those users using IE?

teedoff
01-18-2012, 03:09 PM
What do you mean by Microsoft conditional comments? Do you mean basically test for IE, and then use JavaScript for the feature for those users using IE?

lol why not google them?

alykins
01-18-2012, 11:05 PM
conditional statements (http://www.quirksmode.org/css/condcom.html)

MichaelGWorkman
01-19-2012, 05:36 PM
I would have to say that CSS is better than using javascript, simply because not every user has javascript enabled on thier website, while CSS runs by default. Also there is a new way of doing rollovers in CSS using CSS sprites.

Some mouseover menus do use javascript, such as the ones created using JQuery.

We have mousover menus that works without javascript on our website for selling Hard to Find Electronic Components and Semiconductors, such as transistors, diodes, resistors, and memory chips.

Divinityfound
01-20-2012, 05:09 PM
Complexity = Javascript
Simplicity = CSS
Usually you can get away with a simple solution.

Jacobhine
01-21-2012, 12:09 PM
From my point of view CSS is much better than JavaScript because JavaScript has some limitations. In some computer JavaScript will not work properly. But CSS is enabling on any OS. The web page is load quick with CSS than JavaScript. Also the spider of the search engines does not read the JavaScript when it visits the web page and this is the big disadvantage of using JavaScript.

felgall
01-21-2012, 11:53 PM
JavaScript has some limitations. In some computer JavaScript will not work properly.

Properly written JavaScript will work in any browser that has JavaScript enabled.


But CSS is enabling on any OS.

No - it is enabled in most but not all browsers. It is a part of the browser, not a part of the OS. Some text only browsers do not support it.


The web page is load quick with CSS than JavaScript.

When CSS and JavaScript are attached to the correct places in the web page (CSS immediately before the </head> and JavaScript immediately before the </body) neither has any noticeable affect on loading times.


Also the spider of the search engines does not read the JavaScript when it visits the web page and this is the big disadvantage of using JavaScript.

Some search engines are starting to read JavaScript - certainly more of them are likely to read the JavaScript than will read the CSS since the CSS cannot contain any meaningful content whereas the JavaScript might.

guizza
01-24-2012, 06:53 PM
Of course Javascript!
Javascript offers so much features, like WebGL. WebGL for example is really new: www.WebGLForDummies.blogspot.com is blog with some good tutorials.

You can also use AJAX in Javascript, which is also very very good.

I would recommend you to use Javascript

Jennifert
01-25-2012, 10:09 AM
Nice discussion is being carried out here. I am new in this field and I am also looking for solution of the same problem as stated above. Please provide some satisfactory solution to it. Although CSS is simple to use but will it be a good idea to use it?

felgall
01-25-2012, 10:37 AM
Nice discussion is being carried out here. I am new in this field and I am also looking for solution of the same problem as stated above. Please provide some satisfactory solution to it. Although CSS is simple to use but will it be a good idea to use it?

HTML = content
CSS = presentation/appearance
JavaScript = behavious/action

that's the usual split between the three in building a web page. Some basic actions are also built directly into CSS (such as being able to make things change position when you hover over them) allowing you to build basic but important actions such as displaying and hiding menus into the page that will work even without JavaScript.

Both the CSS and JavaScript can be overridden or turned off by your visitors but having JavaScript off is the most common of these. With JavaScript off only those simple actions you implemented with CSS will still work.

It is even worth testing the page three times - once after you finish the HTML before you start the CSS, again once the CSS is finished before you start the JavaScript and a third time once the JavaScript is finished. Your page needs to work in each of these situations to allow for the CSS and/or JavaScript being off. So implement the basic functioning with CSS if you can and then enhance it with JavaScript - so that it works without JavaScript and works better with JavaScript.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum