CSS Reset: páginas web com um estilo verdadeiramente cross-browser

Neste breve artigo vamos ver o que CSS é a técnica de redefinir CSS ea melhor forma de usá-lo para criar páginas web browser verdadeiramente-cross.

CSS Reset: o que são eo que eles estão

Criar páginas web totalmente cross-browser é um problema que, durante vários anos (isto é, quando o Internet Explorer não é mais uma quota de mercado de 95%) afeta todos os web designers. Mas mesmo quando o resultado é compatível com todos os navegadores (você não tem, ou seja, mau funcionamento ou defeitos mostrar capaz de afetar a usabilidade do serviço), a saída da página web quase sempre dependendo diferentes sobre se visto com IExplorer , Firefox, Safari, Chrome ou Opera.

Estou falando de pequenas diferenças, às vezes quase imperceptível, mas, no entanto, envolvem uma partida de expectativas do resultado final de designers web (por exemplo, porque o espaço entre dois elementos é ligeiramente maior do que um browser para outro).

Este problema é devido à configurações padrão do software de navegação individual, que envolvem diferenças, mais ou menos visível, quando você renderizar a página web mesmo.
, A fim de resolver este problema recorremos a uma técnica que se chama CSS Reset, que consiste, essencialmente, um conjunto de instruções no uso de CSS, a fim de "reset" as configurações padrão nos navegadores individual.

CSS Reset: uma solução simples

A solução, mesmo refinados, é declarar o início de uma regra de folha de estilo que cancela, para cada elemento da página, geralmente um número de atributos definidos pelos navegadores (como, por exemplo, a margem de preenchimento)

 



 * {



  



 margin: 0;



  



 padding: 0;







 }

 

ou:

 



 * {



  



 margin: 0;



  



 padding: 0;



  



 border: 0 none;



  



 esboço: 0;







 }

 

ou, mais elaboradamente:

 



 * {

 

  



 vertical-align: baseline;



  



 font-weight: inherit;



  



 font-family: inherit;



  



 font-style: inherit;



  



 font-size: 100%;



  



 margin: 0;



  



 padding: 0;



  



 border: 0 none;



  



 esboço: 0;







 }

 

Na verdade eu não posso recomendar o uso destas soluções fáceis como o uso do seletor universal (asterisco) pode levar a resultados nem sempre ideais.

• <<
• 1
• 2
• >>