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:
- Por que alguns estilos não precisam de prefixos (como
background
, por exemplo)? - 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;
}
- 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
}