11

Não foi raro passar por situações em que o próprio browser interfere na folha de estilo adicionando parâmetros defaults, como tamanho de margens e fontes dos cabeçalhos, altura padrão da linha.

Existe alguma maneira de resetar uma CSS, ou seja, "zerar" todos os parâmetros para prevenir a interferência do browser?

2
  • Eu usava o Normaliza, mas alguns dias atrás conheci esse outro normalizador aqui christianfortes.github.io/normaset dê uma testada nele. 21/12/2013 às 3:31
  • Já foi bem respondido, mas é sempre bom lembrar que a interferência do browser em geral é sinal de que faltou o autor definir uma regra para aquele elemento. Geralmente fazendo um css dedicado pro site e/ou aplicação em questão torna os normalizadores desnecessários.
    – Largato
    21/12/2013 às 17:35

7 Respostas 7

11

Não existe uma solução padrão e absoluta para remover a interferência do browser, mas você pode sim atualizar as normas para um certo padrão inserindo um arquivo de normalização do CSS que define todas as regras CSS para um padrão, recomendo utilizar o normalize.css (código).

Parece ser a opção mais completa e mais bem atualizada para essa função.

Página de demonstração.

0
7

Você pode usar o seletor generico e resetar tudo da forma que achar melhor...

*{
margin: 0;
padding: 0;
...
}
2

Este poderia ser um ponto de partida.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126   
   License: none (public domain)*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, 
    img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, 
    i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, 
    caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, 
    embed, figure, figcaption, footer, header, hgroup, menu, nav, output, 
    ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, 
    nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
4
  • 2
    Em cssreset.com Tem esse e mais 4 opções, vale uma olhada.
    – bfavaretto
    16/12/2013 às 14:49
  • Acho que se limpar o cache do navegador também ajuda em alguns casos
    – renedet
    16/12/2013 às 14:51
  • 1
    O cache do navegador nada tem a ver com isso...ele limpa os dados em cache do css da aplicação em questão, e não dados default do browser... 16/12/2013 às 17:31
  • Meyer é meu favorito porque é o que menos me dá problema de cross-browser.
    – Marta
    21/08/2014 às 14:25
2

Conheço dois modos, um deles é um reset bem conhecido e discutido

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Mas existem criticas de que um reset não é o modo ideal, que ao invés de acabar com todos estilos o mais apropriado seria normalizar os estilos entre os browsers. Para isto criaram o normalize.css

1

Conhece o Normaset? É um normalizador e reset de CSS.

Segundo o site ele:

  • Redefine todos os estilos padrões HTML, como margens, preenchimento, entre outros.
  • Normaliza estilos para uma ampla gama de elementos.
  • Corrige erros e inconsistências comuns navegador.
  • Melhora a usabilidade com melhorias sutis.
0
1

Geralmente eu uso o Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

traduzindo:

Normalize.css faz os navegadores reproduzirem todos os elementos mais consistentemente e conforme padrões modernos. Ele atinge única e precisamente os estilos que necessitam ser normalizados.

0
1

Cada faz o css reset de acordo com a forma de trabalha eu por exemplo gosto do meu css reset assim

* {margin:0; padding:0; list-style:none; vertical-align:baseline;}

ou você pode ser um pouco mais violento e resetar ele assim

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, 
    img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, 
    i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, 
    caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, 
    embed, figure, figcaption, footer, header, hgroup, menu, nav, output, 
    ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, 
    nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

isso vai de cada um

1
  • Lucas, bem vindo! Esta resposta é quase identica à resposta aceite. Assim parece-me desnecessário publicá-la. Se quiser desenvolver mais e explicar o código pode ser que outros achem util e votem, senäo sugiro apagá-la.
    – Sergio
    29/01/2014 às 20:55

Você deve fazer log-in para responder a esta pergunta.

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