9

Vez em quando vejo em códigos CSS prefixos como -webkit, -moz e até -ms. Então me surgiram algumas dúvidas em relação à elas:

  1. Por que alguns estilos não precisam de prefixos (como background, por exemplo)?
  2. Existe uma ordem correta (ou recomendada) de escrevê-los no código?

Exemplo:

.class {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

Ou:

.class {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
  1. Caso haja uma ordem correta, há (ou haverá no futuro) algum problema em escrever fora dessa ordem?

Obrigado!

ATUALIZAÇÃO 1:

Mesmo escrevendo em qualquer ordem, o efeito prático é o mesmo. Por isso a pergunta 3.

ATUALIZAÇÃO 2:

Estive pesquisando e constatei que a ordem pode ser "crucial" quando o estilo envolver mais de um valor (ex., border-radius: 30px 10px;), podendo ocasionar uma enorme diferença na apresentação do elemento (Veja aqui um exemplo). Portanto, é mais recomendado colocar os prefixados acima do não-prefixado:

.class {
-moz-border-radius
-webkit-border-radius
border-radius
}

2 Respostas 2

1

O que te referes são os prefixos e geralmente existem para os navegadores criarem suas próprias propriedades de maneiras diferentes.

Actualmente existem vários prefixos de css diferentes como:

  • -ms-, mso- Microsoft
  • -moz- Mozilla
  • -o- ou -xv- Opera Software
  • -webkit- Apple
  • etc...

Podes gera automaticamente os teus prefixos com ajuda de alguns websites como: https://autoprefixer.github.io/

Ou então alguns IDE já têm essa opção incluída.


Porque é que nem todas estilos precisam?

Nem todas as propriedades de css precisam de prefixos porque algumas delas já são nativas por defeito e o comportamento vai ser igual independentemente do navegador que estiveres a usar.

Podes ver algumas delas aqui:


Qual deve ser a ordem?

Eu pessoalmente costumo usar a seguinte ordem:

display: -webkit-box;
display: -ms-flexbox;
display: flex;

É a mesma ordem que costuma ser usada pelo https://autoprefixer.github.io/, porém penso não haver problemas com a ordem pois cada navegador vai ler o seu prefixo e executar o elemento dessa maneira.

2
  • Achei sua resposta mais coerente, porém acredito que seu último parágrafo esteja equivocado. Veja neste exemplo como a ordem pode afetar o estilo: codepen.io/css-tricks/pen/pqgKH
    – Sam
    Commented 13/10/2017 às 17:31
  • Boas @DvD, eu próprio já tive problemas com a ordem, mas isso vai um pouco com o browser utilizado. Não consegui abrir o link porque está quebrado, mas imagino o que estejas a falar. O problema é que ao corrigir em determinado navegador, poderás estar a modificar a apresentação noutro. Commented 16/10/2017 às 17:30
0

Por que alguns estilos não precisam de prefixos (como background, por exemplo)?

Por que suas especificações já foram adotadas em praticamente todos os browsers, ou seja, os prefixos funcionam geralmente quando o navegador está se adaptando a um novo recurso css, é uma forma de abordar de maneira particular aquele atributo.

Existe uma ordem correta (ou recomendada) de escrevê-los no código?

Não, independentemente da ordem o navegador irá tratar primeiro os atributos prefixados, por ultimo atributos não prefixados.

Por isso que esse tipo de prefixação se tornou popular a partir do css3.

É realmente necessário?

Isso fica a seu critério, observe o suporte das flexbox (unprefixed)

inserir a descrição da imagem aqui

Diferença absurda? óbvio que não, mas se o seu nicho não for tão avançado tecnologicamente, é sempre bom usar.

Edit

Vale ressaltar que esse tipo de prefixação é temporária, ou seja, se haver conformidade da especificação em todos os browsers, os prefixos devem ser retirados, alcançando ai alguns bytes de desempenho.

fonte thoughtCo, caniuse

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 .