3

No CSS exitem algumas propriedades que precisam de um prefixo para alguns navegadores, por exemplo:

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

Se eu quiser alterar essas propriedades de um elemento pelo JavaScript, uso:

document.querySelector('#myElment').style.transition = 'all 4s ease';
  1. Ao mudar a propriedade style.transition é o suficiente para que funcione em todos navegadores?

  2. É necessário aplicar algum prefixo? Quais são?

  3. As propriedades que precisam aplicar esses prefixos são as memas que precisam aplicar os prefixos do CSS?

  4. Preciso aplicar esse prefixo em todos os navegadores (assim como no CSS) ou apenas o de cada navegador?

  5. Devo alterar essas propriedades de forma que o último seja sempre sem prefixo para que tenha prioridade sobre os demais (quando disponível) ou tanto faz?

3
  • Relacionado: pt.stackoverflow.com/questions/3674/…
    – hugocsl
    20/09/2018 às 23:09
  • Relacionad 2: pt.stackoverflow.com/questions/245870/…
    – hugocsl
    20/09/2018 às 23:10
  • 1
    Como a pergunta é um pouco ampla, o JavaScript tem também a função de alterar as propriedades CSS de forma dinâmica, sendo assim, o que vc usa no CSS deve ser o mesmo no JS, o que muda é apenas a sintaxe camelCase que o JS trabalha, sem hífens. Por ex.:, .style.webkitTransition, .style.mozTransition etc... Se a propriedade transition necessita de um prefixo para certo navegador, só .style.transition não vai fazer efeito.
    – Meu ovo
    20/09/2018 às 23:27

1 Resposta 1

1
  1. Ao mudar a propriedade style.transition é o suficiente para que funcione em todos navegadores?

Não. Se uma propriedade necessita de prefixo em um determinado navegador, deve-se colocá-lo no JavaScript também. A diferença é que no JavaScript utiliza-se a sintaxe camelCase. Ex.: .style.mozTransition, .style.webkitTransition etc.

  1. É necessário aplicar algum prefixo? Quais são?

Mesma resposta da pergunta anterior. Os prefixos comuns são os mesmos que você utilizou na pergunta.

  1. As propriedades que precisam aplicar esses prefixos são as mesmas que precisam aplicar os prefixos do CSS?

Sim. Quando você altera propriedades CSS via JavaScript, as regras são basicamente as mesmas.

  1. Preciso aplicar esse prefixo em todos os navegadores (assim como no CSS) ou apenas o de cada navegador?

Você deve fazer assim como no CSS, colocando todos os prefixos, porque o navegador automaticamente irá assumir o que lhe for compatível. Não tem como colocar de cada navegador porque, em tese, você não sabe qual navegador o usuário está usando para poder escolher qual prefixo usar. Logo, colocando todos, você não precisa se preocupar com isso.

  1. Devo alterar essas propriedades de forma que o último seja sempre sem prefixo para que tenha prioridade sobre os demais (quando disponível) ou tanto faz?

Há um tempo eu fiz uma pergunta a respeito da ordem dos prefixos no CSS, e constatei que a ordem pode influenciar em alguns casos. Sendo assim, é recomendável manter essa ordem mesmo quando feito via JavaScript, ou seja, a propriedade sem prefixo vir por último.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .