CSS cross-browser by Javascript

Asked

Viewed 102 times

3

In CSS there are some properties that need a prefix for some browsers, for example:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

If I want to change these properties of an element by Javascript, I use:

document.querySelector('#myElment').style.transition = 'all 4s ease';

  1. When moving the property style.transition is enough to work in all browsers?

  2. Is it necessary to apply a prefix? Which ones?

  3. The properties that need to apply these prefixes are the memas that need to apply CSS prefixes?

  4. I need to apply this prefix to all browsers (as well as CSS) or just to each browser?

  5. I must change these properties so that the latter is always without prefix so that it has priority over the others (when available) or whatever?

javascript css cross-browser

  • Relacionados: https://answall.com/questions/3674/%C3%89-necess%C3%A1rio-adicionar-prefixos-em-algumas-propriedades-do-css/

  • Related2: https://answall.com/questions/245870/sorts

  • 1

    As the question is a little broad, Javascript also has the function of changing CSS properties dynamically, so what you use in CSS should be the same in JS, what changes is only the syntax camelCase that the JS works, without hyphens. For example.:, .style.webkitTransition, .style.mozTransition etc... If the property transition requires a prefix for a certain browser, only .style.transition will have no effect.

1 answer

1


  1. When moving the property style.transition is enough to work in all browsers?

No. If a property needs a prefix in a given browser, you should put it in Javascript as well. The difference is that in Javascript the syntax is used camelCase. Ex.: .style.mozTransition, .style.webkitTransition etc..

  1. Is it necessary to apply a prefix? Which ones?

Same answer as the previous question. Common prefixes are the same ones you used in the question.

  1. The properties that need to apply these prefixes are the same that need to apply CSS prefixes?

Yes. When you change CSS properties via Javascript, the rules are basically the same.

  1. I need to apply this prefix to all browsers (as well as CSS) or just to each browser?

You should do as well as in CSS by putting all prefixes, because the browser will automatically assume whatever is compatible with it. There is no way to put from each browser because, in theory, you do not know which browser the user is using to be able to choose which prefix to use. So putting them all together, you don’t have to worry about that.

  1. I must change these properties so that the last one is always without prefix so that it has priority over the others (when available) or whatever?

A while ago I did a question regarding the order of the prefixes in the CSS, and I found that the order can influence in some cases. Therefore, it is recommended to keep this order even when done via Javascript, ie, the property without prefix come last.

Browser other questions tagged javascript css cross-browser

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