CSS Reset, corrigir problemas de renderização nos browsers

Apesar de não ser mais novidade para quem já trabalha profissionalmente com desenvolvimento web, muitos aindas não conhecem a maneira de corrigir problemas de renderização nos browsers.

CSS Reset faz com que todas as propriedades das tags sejam zeradas desde o início, através dos seletores que aplicam no HTML e/ou XHTML. Quem pesquisar por CSS Reset vai encontrar um padrão que promete fazer com que os principais browsers que dominam o mercado, renderizem de igual pra igual. Eu, que uso o IE7, IE6, Firefox, Opera e Netscape para testar meus trabalhos, tive alguns probleminhas entre eles, com a tag <table>. Então, fiz um ajuste para solucionar o problema. Abaixo, segue o CSS Reset que uso no meu dia-a-dia:

PLAIN TEXT

CSS:

/* CSS Reset de Thalis Valle */
html, body, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font-family: inherit
}
img {
display:block
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: separate;
border-spacing: 0
}
caption, th, td {
text-align: left;
font-weight: normal
}
lockquote:before, blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}

Aproveito para deixar muma dica, que é sempre setar as propriedades de estilo e tamanho de fonte no seletor body. Exemplo:

PLAIN TEXT

CSS:

body {
font-family: verdana, Arial;
font-size: 0.9em;
}

Tags: Web Design e CSS

Este artigo foi postado em Quinta, abr 10th, 2008 às 8:46 PM na categoria Web Design e CSS. Você pode ver todos os comentários deste artigo, cadastrando em seu navegador ou software, o endereço Feed: RSS 2.0.

Deixe seu comentário logo abaixo, ou envie trackback.

7 comentários em “CSS Reset, corrigir problemas de renderização nos browsers”

Bernard De Luna:
abr 17th, 2008 at 9:56 AM
Fala meu caro Thallis… bom ver que voltou com o seu blog.. Assim que aliviar minha monografia lanço o meu também.

Cara, você pode trocar aqueles codigos todos no inicio por um simples* {
}
daí dentro vc coloca tudo que vc quer aplicar a TODAS AS TAGS.
é mais fácil, mais leve e mais simples
thalisvalle:
abr 29th, 2008 at 9:46 AM

Grande bernard!

Precisamos mesmo voltar à velha fase…

Quanto ao esquema do * poderia sim ser aplicado às primeiras tags. Porém, as demais não faria o mesmo efeito apenas zerando.

No mais, farei o teste.

Abraços
Blog do Bernard De Luna - Design, web, planejamento e muito mais… » CSS Reset - zerando estilos do seu website:
mai 5th, 2008 at 11:29 AM
[...] Eric Meyer [...]
tarsis:
set 12th, 2008 at 8:12 PM
muito legal seu post!
Gostaria de saber como faco para zerar as propriedades para formularios.
Tenho um pouco de dificuldades ao renderizar forms
thalisvalle:
set 13th, 2008 at 8:23 AM
Tarsis,

Usando o CSS Reset acima, vc ja esta zerando para forms.

Leia tambem: http://www.thalisvalle.com/formulario-semantico-e-acessivel“>http://www.thalisvalle.com/formulario-semantico-e-acessivel
raquel:
jun 9th, 2009 at 5:09 PM
oque é renderização dos Browsers.
thalisvalle:
jun 10th, 2009 at 11:53 AM
Raquel,

É a forma como os navegadores tratam o código fonte HTML para exibi-los no modo visual.

Problema de renderização é quando se escreve um código HTML para fazer efeito X, mas o navegador entende como Y. Isso causa diferença entre os principais browsers do mercado: IE (Internet Explorer), FF (Firefox), Chrome e Opera.