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:

[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: “” “”
}
[/css]

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

[css]
body {
font-family: verdana, Arial;
font-size: 0.9em;
}
[/css]

Tema Portal WordPress - PortalPress


8 Responses to “CSS Reset, corrigir problemas de renderização nos browsers”

  1. Bernard De Luna

    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 🙂
     
     

    Reply
  2. thalisvalle

    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

    Reply
  3. tarsis

    muito legal seu post!
    Gostaria de saber como faco para zerar as propriedades para formularios.
    Tenho um pouco de dificuldades ao renderizar  forms

    Reply
  4. thalisvalle

    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.

    Reply
  5. Marcus

    Thalis,

    Muito bom esse seu CSS Reset, me ajudou muito, agora tenho um site compativel com IE6, 7, 8, Firefox, Google Chrome e Opera.

    Abraços

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>