Skip to main content
Tweeted twitter.com/StackOverflowPT/status/918900913347158022
adicionou 491 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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
}

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:

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

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
}
adicionou 110 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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:

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

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!

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:

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

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Ordenar estilos com prefixos no CSS

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!