Por muitas vezes, disponibilizamos códigos que funcionam em um só navegador (como por exemplo, somente para o Chrome). Mas isso acaba deixando o blog feio para alguns e bonitos para outros. É por esse motivo, que iremos aprender como converter os códigos em CSS para todos os navegadores mais utilizados (Chrome, Firefox e Opera).

Na postagem anterior, mostramos um código que funciona somente do navegador Google Chrome e nos demais navegadores fica o padrão da caixa de seleção. Por esse motivo resolvemos criar este artigo que é muito simples para ser aplicado em qualquer blog na plataforma Blogger.

Convertendo do Google Chrome para o Firefox

Para fazer a conversão de códigos no formato do Chrome (Webkit) para o Firefox (Moz) é bem simples. Utilizaremos o seguinte código:

input[type='radio'] {
-webkit-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 3px;
-webkit-transition: border 500ms;
background: -webkit-linear-gradient(#fafafa, #dcdcdc);
\*Restante do código*/
}
\*Restante do código*/
input[type='radio']:not(:disabled):not(:active):hover {
background: -webkit-linear-gradient(#fff, #e6e6e6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
input[type='radio']:not(:disabled):active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
background: -webkit-linear-gradient(#f0f0f0, #bebebe);
\*Restante do código*/
}
input[type='radio']:checked::before {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-webkit-margin-start: 4px;
\*Restante do código*/
}
\*Restante do código*/

1. Observe as partes destacadas em negrito no código acima. Para converter esse código, basta substituir as partes em negrito pela palavra moz. Veja o exemplo.

input[type='radio'] {
-moz-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
-moz-appearance: none;
-moz-margin-start: 0;
-moz-margin-end: 3px;
-moz-transition: border 500ms;
\*Restante do código*/

Convertendo do Google Chrome para o Opera

Tomaremos como exemplo, o mesmo código usado anteriormente com o formato para Google Chrome (Webkit).

1. Substitua as partes em negrito pela palavra o. Veja o exemplo.

input[type='radio'] {
-o-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
-o-appearance: none;
-o-margin-start: 0;
-o-margin-end: 3px;
-o-transition: border 500ms;
\*Restante do código*/

Caso o código já esteja em moz ou em o e você quer convertê-lo para o Chrome e Safari, basta substituir o moz ou o pelo webkit.

Fazendo a substituição corretamente

Por muitas vezes, você "come" alguma letra ao fazer a modificação e o código acaba não funcionando. Para que isso não ocorra, utilize o programa que já padrão no Windows: o Bloco de Notas! Veja como é simples.

1. Abra o Bloco de Notas seguindo os passos: Menu Iniciar, Todos os Programas, Acessórios e Bloco de Notas. Logo após, utilize o comando Ctrl+V para colar o código desejado dentro do Bloco de Notas.

2. Depois de colar o código, vá para Editar e depois em Substituir (Ctrl+H).

3. Na caixa de que abre, digite no campo Localizar, o nome do formato (exemplo: webkit) e no campo Substituir por, digite o formato que deseja (exemplo: moz). Logo após, clique em Substituir Tudo.