Por que não funciona no , mas funciona em outros?

Eu tentei usar a transition no Firefox 15 e não funcionou, embora funcionasse em outras versões do Firefox e outros navegadores como o Chrome e o Safari.

Quando vejo as propriedades usando o inspetor do Firefox, a transition é atingida e dá um erro de “Valor da propriedade inválido”. MDN e caniuse dizem que é suportado no Firefox 4 e acima!

 #mydiv { transition: width 1s; /* Did I do this wrong? */ background: #f00; width: 100px; height: 100px; } #mydiv:hover { width: 200px } 

Por que algumas vezes, propriedades como transition e animation funcionam em alguns navegadores e são inválidas em outros?

Disclaimer : Esta é a duplicata canônica para todas as questões solucionáveis ​​completamente, adicionando prefixos de fornecedores. As perguntas do Stack Overflow não devem ser tão amplas a menos que sejam discutidas em meta e uma resposta canônica criada a partir de então como esta .

Embora nem sempre seja o caso, um dos motivos mais comuns pelos quais uma propriedade como transition ou animation funciona em alguns navegadores e não em outros é por causa dos prefixos do fornecedor .

Quais são os prefixos de fornecedores?

Na época em que a versão 4 do Firefox foi introduzida, a especificação do módulo de transição CSS era um Rascunho Operacional. Antes de uma especificação ser finalizada (na prática, é quando ela atinge a Recomendação de Candidato), os fornecedores de navegadores adicionam prefixos de fornecedor a propriedades, valores e @ -rules para evitar problemas de compatibilidade caso a especificação seja alterada.

Os prefixos de fornecedores são exatamente o que o nome deles descreve – um prefixo específico do fornecedor (fornecedor que significa uma empresa que desenvolve um navegador) de uma propriedade ou valor. Eles geralmente são implementados de uma maneira específica para cada navegador, porque a propriedade ou o valor ainda está em uma das muitas fases experimentais antes do estágio Recomendação do Candidato, que é o estágio em que eles são considerados prontos para implementação .

Os mais comuns são -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.) e -ms- (Microsoft Internet Explorer), mas existem mais .

Quando preciso usá-los?

Isso depende completamente dos navegadores que você deseja veicular, de quais propriedades e valores você está usando e em que momento você está desenvolvendo seu website. Existem sites que tentam manter uma lista atual, mas nem sempre são precisos ou mantidos atualizados.

A seguir estão algumas das propriedades e valores mais comumente prefixados. Se o seu projeto não suporta os navegadores mencionados no comentário à direita da propriedade, não há necessidade de incluí-lo no seu CSS.

Transições

Uma propriedade não-redefinida às vezes tem equivalentes prefixados, como -webkit-transition .

Para obter suporte de navegador completo possível, é necessário o seguinte:

 .foo { -webkit-transition: ; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */ -moz-transition: ; /* Firefox 4-15 */ -o-transition: ; /* Old opera */ transition: ; /* Modern browsers */ } 

Observe que existe um prefixo -ms- para a transition , no entanto, ele foi implementado apenas por versões de pré-lançamento do IE10 que não são mais funcionais e, portanto, nunca são necessárias. Ele é implementado sem ajustes no IE10 RTM e mais recente.

Transformações

 .foo { -webkit-transform: ; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */ -ms-transform: ; /* IE9 */ transform: ; } 

Animações

As animações precisam ter a propriedade prefixada e os frameworks-chave correspondentes prefixados, assim:

 .foo { -webkit-animation: bar; /* Safari 4+ */ -moz-animation: bar; /* Fx 5+ */ -o-animation: bar; /* Opera 12+ */ animation: bar; /* IE 10+, Fx 16+ */ } @-webkit-keyframes bar { /* Keyframes syntax */ } @-moz-keyframes bar { /* Keyframes syntax */ } @-o-keyframes bar { /* Keyframes syntax */ } @keyframes bar { /* Keyframes syntax */ } 

Flexbox

Os valores também podem ser prefixados, como no caso do flexbox . Nota : Para compatibilidade máxima do navegador, as propriedades específicas do flexbox, como ordinal-group , flex-flow , flex-direction , order , box-orient , etc. precisam ser prefixadas em alguns navegadores , além do seguinte:

 .foo { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-flex: ; -moz-box-flex: ; -webkit-flex: ; -ms-flex: ; flex: ; } 

Calc

 .foo { width: -webkit-calc(); /* Chrome 21, Safari 6, Blackberry browser */ width: -moz-calc(); /* Firefox <16 */ width: calc(); /* Modern browsers */ } 

Gradientes

Veja Gradientes de CSS em CSS-Tricks para mais informações.

 .foo { background-color: ; /* Fallback (could use .jpg/.png alternatively) */ background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */ background-image: -webkit-gradient(linear, left top, right top, from(), to()); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */ background-image: -webkit-linear-gradient(left, , ); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background-image: -moz-linear-gradient(left, , ); /* Firefox 3.6 - 15 */ background-image: -o-linear-gradient(left, , ); /* Opera 11.1 - 12 */ background-image: linear-gradient(to right, , ); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */ } 

Observe que left e to right representam a mesma direção, da esquerda para a direita e, portanto, da left to left , em direções opostas . Veja esta resposta para algumas informações básicas.

Border-radius (não é necessário na maioria dos casos)

 .foo { -webkit-border-radius: ; /* or iOS 3.2 */ -moz-border-radius: ; /* Firefox 3.6 and lower */ border-radius: ; } 

Box shadow (não é necessário na maioria dos casos)

 .foo { -webkit-box-shadow: ; /* iOS 4.3 and Safari 5.0 */ -moz-box-shadow: ; /* Firefox 3.6 and lower */ box-shadow: ; } 

Como eles podem ser implementados com JavaScript?

Para acessar atributos e events prefixados em JavaScript, use o equivalente camelCase do prefixo CSS. Isso também é verdade para ouvintes de events como foo.addEventListener('webkitAnimationIteration', bar ) ( foo é um object DOM, como document.getElementsById('foo') ).

 foo.style.webkitAnimation = ''; foo.style.mozAnimation = ''; foo.style.oAnimation = ''; 

Ferramentas de prefixação

Os prefixos on-line podem ser úteis, mas nem sempre são confiáveis. Sempre certifique-se de testar seu projeto nos dispositivos que deseja suportar para garantir que cada um deles tenha o prefixo apropriado incluído.

Funções pré-processador CSS :

  • Prefixador de propriedades SASS e SCSS
  • Prefixo de propriedades LESS

Funções prefixer JavaScript :

  • -prefix-free para propriedades e valores CSS
  • Prefixador de evento

Veja também: Por que os navegadores criam prefixos de fornecedores para propriedades CSS?