2

No código abaixo, o que faz os trechos -webkit- -moz-box-?

.hh1 {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: auto;
    height: auto;
    position: relative;

cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal 72px/normal Arial Black, Gadget, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
2
  • Formula melhor sua pergunta, porque não dá pra saber se você não sabe o que o trecho faz (o que muda ao adicionar -moz-box-sizing: content-box;) ou pra que serve o Vendor (o que é webkit e etc.). Commented 14/12/2017 às 23:53
  • 1
    Você quer saber sobre o que faz o box-sizing ou o que é webkit, moz, ms, o...? Commented 14/12/2017 às 23:55

2 Respostas 2

3

Estas são as propriedades prefixadas pelos mecanismos de renderização relevantes ( -webkit para o Chrome e o Safari, -moz para o Firefox, -o para o Opera, -ms para o Internet Explorer).

Normalmente, eles são usados ​​para implementar recursos CSS novos ou proprietários, antes do esclarecimento final / definição pelo W3.

Isso permite que as propriedades sejam definidas especificamente para cada navegador/mecanismo de renderização individual para que as inconsistências entre implementações sejam contabilizadas com segurança. Os prefixos serão, ao longo do tempo, removidos (pelo menos em teoria), uma vez que a versão não pré-fixada, final, da propriedade é implementada nesse navegador.

Para o efeito, geralmente é considerado uma boa prática especificar primeiramente a versão prévia do fornecedor e, em seguida, a versão não prefixada, para que a propriedade não prefixada substitua as configurações de propriedade do prefixo vendido uma vez que ela for implementada; por exemplo:

.elementClass {
-moz-border-radius: 2em;
-ms-border-radius: 2em;
-o-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
}
1

Prefixos de navegadores.

Por existirem muitos navegadores, e cada um com sua especificação, é necessário adicionar esses prefixos para que um estilo CSS funcione em todos.

Assim temos que:

-webkit-

(Chrome, Safari, versões mais recentes do Opera.)

-moz-

(Firefox)

-o-

(Versões antigas do Opera)

-ms-

(Internet Explorer)

Link de Referência da Mozilla

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