Pinceladas da Web

Umas das coisas que mais atormentam os desenvolvedores hoje em dia é a forma como cada browser trata diferentemente as propriedades CSS. Já basta as diferenças de renderização que existem entre os Internet Explorer 6 e 7, onde acaba aumentando ainda mais nossos problemas. Durante muio tempo eu sofri com isso, ao decorrer do desenvolvimento de um site, tudo corria bem, mas derrepente, tudo ia por água abaixo no IE, mais uma vez ele, estragando a nossa vida, insistindo em ser superior em tudo, não seguindo corretamente padrões estabelecidos. Mas espera aí, sempre que eu iniciava meu CSS, as primeiras declarações eram sempre essas:

* {margin:0; padding:0}

Isso fazia com que todos os objetos da página iniciassem com suas margens e paddings zerados, para tentar igualar os objetos entre os browsers, mas não era suficiente. Foi então que conheci uma solução proposta por Eric Meyer, onde ele reseta todas as propriedades HTML para que fiquem iguais em todos os navegadores.

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,
b, u, i, center,
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%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

No começo senti uma certa resistência em utilizar todas essas propriedades CSS em meus projetos, sendo que um simples seletor universal resolvia tudo, mas após utilizá-los meus problemas diminuiram quase que totalmente, no Internet Explorer então, dava até gosto de ver, tudo bonitinho. Experimente você também, pelo menos uma vez, e poste aqui sua experiência. Depois não diga que eu não avisei.

Esse manual é uma tradução do artigo de Reinhold Weber: 50+ CSS Best Practices and Coding Guidelines.

Coisas a evitar

• CSS in-line.
• Tamanho de fontes absolutas.
• Utilizar “aspas” para marcar o caminho das imagens.
• CSS Hacks.
• Redeclarar valores herdados.
• Aplicar padding, bordas e larguras fixas para os elementos.
• !important e position:absolute.
• Nomes para Classes e IDs baseados em sua aparência.

Continuar lendo »