Is it correct to use JS to make the effects of an HTML?

Asked

Viewed 428 times

13

What I want to know is whether it is right to use Javascript/Jquery to do some button and screen effects, center the content horizontally and do certain tasks that can be done by CSS.

The company’s design here said it’s best to use JS/Jquery for performance and maintenance convenience, but I was researching on the subject and it seems that if I use JS it may have several compatibility errors and that it is more difficult to fix spot errors in certain resolutions, devices and software versions.

To develop web/mobile in a way that supports several screen sizes and different browsers is it correct to use Javascript to make animations and layout corrections or is it correct to use CSS/HTML only? Why?

javascript css mobile

  • Incorrect is not, you can be sure, as there are libraries like this to give compatibility to older browsers, the problem is that maintenance is much more complicated and probably more time consuming. Use only when necessary. I’m not going to formulate an answer because it’s a little broad and the answer may sound like "opinion", but it’s like this, use "javascript to control the layout position when necessary", if it can be done with css+html, then avoid js.

  • 1

    http://davidwalsh.name/css-js-animation

  • 1

    Your question is with two closing votes as "mostly based on opinions". You can improve it to avoid being closed?

  • I think so, I’ll do that.

  • @Victorstafusa Got better? I don’t have much creativity to lecture -_-

  • One of the problems of using js for animations is the large volume of gambiarras that is inserted to do something (due to the inexperience of the programmers) that would have been easily developed with css. As @Victorstafusa put it, it takes common sense to know in which situation to use each technology.

Show 1 more comment

2 answers

6


What may occur is that you want to use CSS features that do not exist in all browsers currently available in the market, and in this case, you will have problems when going to a browser that does not have any particular CSS feature that you used.

When working with Javascript (with or without jQuery, but it is much easier to do with it), this problem is mitigated, since javascript is able to change the DOM dynamically, and with it even detect the resolution of the screen in Runtime and choose the best CSS settings.

However it is neither 8 nor 80. Doing everything in Javascript is not a good idea, and doing everything in CSS should not be either. It takes a certain common sense to know what goes in CSS and what goes in Javascript.

In the case of static properties of classes and ids, it is best to put them in the CSS. In Javascript, the most you can do is add or remove classes of elements from the DOM tree.

In the case of widely varying properties, such as animations of position, size, color, and object format, doing so in CSS would result in a horrible monstrosity to work with, if at all possible. Already in Javascript, you would probably put a few lines of code to fix it.

Anyway, you have to know which of the two is easier, lighter and more natural to change. Don’t put everything on one side and not everything on the other, put everything on the side where it gets better, analyzing case-by-case.

2

The question is somewhat based on opinion, but come on. In my answer, I will bridge the gap with your other questions presented here at stackoverflow.

When you work with the css to add style, you end up generating a convenience for changes because, yourself or any other programmer can have simplified access via "inspect element", for example.

In everything I create, I try to consider the use of css and jquery as follows:

  • CSS: I create the initial scenario, assign colors, sizes and positions.
  • JSS: Work with events, that is, create small functions that generate some visual effect or complete navigation, such as a nav that stays fixed after reaching a scroll X

We can bridge to the frameworks and illustrate a little better. Usually people work with bootstrap on websites and even web systems with more vertical appearance. In it you have components css and also js working in a similar way to the above.

We also have some frameworks with a larger base on javascript, as is the case of DHTMLX, which generates an interface more focused on online systems and has a more centralized aspect, without so much vertical work, thinking about user usability. In this case, we have few style sheets and in general, most of the work done via scripts because you can simply drag the div or even resize, for example.

There is no way to say that one method is totally right and another is totally wrong, so your question is about to be closed.

One point I find interesting to hit is: If you work with a structure based on general construction css, try to fix any style problems by yourself css and vice versa

Browser other questions tagged javascript css mobile

You are not signed in. Login or sign up in order to post.