CSS Global Reset – Elimine as diferenças entre browsers

Recentemente a Belinha comentou de CSS Global Reset num post falando de construção de sites cross browsers , mas acho que isso é tão importante que merece um post só pra ele.

Para entender o que faz o reset, pense que todo browser tem prioridades para definir o CSS de uma página. A ordem é:

1º – CSS inline : aquela porqueira <div style=”float:left”>

2º – CSS na página : outra coisa que não recomendo, e não vejo necessidade. É quando coloca a tag style dentro da tag head
<style> .publicidade { width: 200px; } </style>

3º – CSS externo : esse é o css normal, quando invocamos dentro do head <link href=”home.css” type=”text/css” rel=”stylesheet”/>

4º – CSS definido pelo browser: sim, isso existe e é isso que nos causa problemas.

Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, bordas dos elementos, etc…

É aí que entra o CSS Global Reset, que são uma série de propriedades css atribuidas a todos os elementos html, justamente para retirar o css definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Mac, Ie, Opera, etc.

Existem diversos CSS Global Reset ( normalmente as pessoas colocam alguma coisa a mais pra facilitar no seu projeto ), mas todos eles variam pouco. Vejam o que eu utilizo:

*{outline-color:invert;outline-style:none;outline-width:medium;}
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, 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-weight: normal; font-style: inherit; font-size: inherit; 
	font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

E normalmente, quando vou começar a montar um html, um projeto novo, eu altero as propriedades da fonte, por exemplo: se o layout for usar sempre arial, vale a pena trocar “font-family: inherit;” para “font-family: arial;”

Seja lá qual CSS Global Reset escolherem, usem sempre um quando iniciarem um projeto, isso evita muitooo trabalho.

10 thoughts on “CSS Global Reset – Elimine as diferenças entre browsers

  1. Olá Danilo, só uma correção, a ordem de prioridade das regras de estilo é o inverso, primeiro a folha do browser, as externas (link ou @import) ou incorporadas (tag style) e por último, o atributo style. De resto, está tudo certinho ;-)

  2. Muito obrigado pelo toque, mas… no site da w3c schools, fala que a ordem é a do post mesmo. Da uma olhada:

    “What style will be used when there is more than one style specified for an HTML element?

    Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

    1. Browser default
    2. External style sheet
    3. Internal style sheet (inside the tag)
    4. Inline style (inside an HTML element)”

    http://www.w3schools.com/css/css_intro.asp

    []s

  3. Danilo, acho que o Marcelo estava correto.

    Na realidade o efeito cascata, usa como regra de prioridade diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
    Veja o efeito cascata em ordem crescente (ordem de aplicação):

    1. folha de estilo padrão do navegador do usuário;
    2. folha de estilo do usuário (definida no navegador);
    3. folha de estilo do desenvolvedor (autor);
    3.1 estilo externo (importado ou linkado).
    3.2 estilo incorporado (definido na seção head do documento);
    3.3 estilo inline (dentro de um elemento HTML);
    4. declarações do desenvolvedor com !important;
    5. declarações do usuário com !important;

    O nível de importância é, portanto, o inverso da lista acima.

    http://www.w3.org/TR/CSS2/cascade.html#cascade

  4. Aff… acho que todos estão certos… no post está a ordem de PRIORIDADE e eu escrevi acima a ordem de APLICAÇÃO (ou seja, do menos prioritário até o mais, que fica por definitivo). Ou seja, está correta a afirmativa do post, pois o Danilo mencionava a ordem de prioridade e não de aplicação.

  5. Pingback: Você não precisa de css hacks | TidBits

  6. Valeu msm cara resolveu o meu problema tava vendo ate plugin para fazer isso sabe muito kkkkk….além deste site onde mais posso ler dicas suas de programação web ou até php ? Obrigado msm abraços

Leave a Reply

Your email address will not be published. Required fields are marked *