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 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:
-
body {
-
font-family: verdana, Arial;
-
font-size: 0.9em;
-
}
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
muito legal seu post!
Gostaria de saber como faco para zerar as propriedades para formularios.
Tenho um pouco de dificuldades ao renderizar forms
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
oque é renderização dos Browsers.
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.
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