Evitando problemas de compatibilidade em CSS

Postado por: Pedro Rogério em

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.

Desenvolvimento em CSS – Manual de boas práticas

Postado por: Pedro Rogério em

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 »

Características de um site user friendly

Postado por: Pedro Rogério em

É muito fácil se dar conta quando um site foi desenvolvido pensando no usuário ou não. Parece algo estúpido, mas não não todas as pessoas que entendem que o site irá ser visitado por pessoas que não são iguais a ela mesma. Nem todos se sentem bem em todos os lugares. Sem dúvida, sites que antes de seu desenvolvimento são extremamente “pensados” são muito mais ricos que os outros.

Esses sites compartilham algumas características que fazem a visita do usuário muito mais agradável e ajudam a cumprir seu objetivo pelo qual visitou o site de maneira muito mais simples e rápida.

Carregamento Rápido

Um site deve carregar o mais rápido possível. Se o visitante pode encontrar a informação solicitada em seu site em outro, não tenha dúvida que ele irá logo após seu site demorar alguns segundos para carregar. Existem várias maneiras de se fazer com que seu site carregue mais rápido, abaixo você pode ver algumas delas:

Continuar lendo »

Como evitar o rastro azul em volta dos inputs e textareas no Safari

Postado por: Pedro Rogério em

No Safari, quando temos o foco em algum campo input ou textarea, você pode ver que em volta deles é formado um rastro de cor azul para dizer que o campo ganhou o foco. Isso, por questões de acessibilidade é muito interessante, mas se você tem alguma imagem de fundo nos inputs que não tenham borda, isso é meio desastroso. Para solucionar esse problema, vaos utilizar a propriedade outline do CSS, que é a mesma uilizada para remover as linhas que ficam em volta dos links:


input, textarea  {
    outline:none;
}

Pronto, agora você não tem mais nenhum rastro azul em volta dos inputs e textareas.

Referências

Internet Explorer 8 passa no Acid2 Test

Postado por: Pedro Rogério em
Acid2 Test

Não, isso não é brincadeira não, isso foi anunciado no blog do Internet Explorer no MSDN, pois pelo que parece, a nova versão do IE que será lançada em um fuuro próximo passou no teste do Acid2. Pra quem não sabe no que consiste o teste, é onde os desenvolvedores de browsers podem ver o quanto de padrões web são suportados pelo browser.

Tem até um vídeo no Channel 9 mostrando o teste.

Os melhores sites de 2007 baseados em CSS

Postado por: Pedro Rogério em

Nessa galeria você pode ver os melhores sites de 2007 baseados em XHTML e CSS e ver o poder do que é capaz ter um pouco de criatividade aliado aos WebStandards. Um site que eu achei interessante foi o do Alex Buga:

Site de Alex Buga

Infelizmente meu blog não saiu nessa lista, mas vamos ver se ano que vem ele aparece né, pois agora comprei o livro do Maujor, acho que agora aprendo CSS e desenvolvo um layout interessante aqui para o Blog.

Utilizando CSS para mostrar falhas de marcação

Postado por: Pedro Rogério em

Eric Meyer criou a algum tempo uma solução muito simples com CSS para mostrar falhas de marcação em nosso HTML que podem nos passar despercebidas a não ser que você valide seu código para encontrá-las, como: imagens sem o atributo alt, links que não levam a lugar algum, facilitando e muito a vida dos desenvolvedores:


a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

Se você utiliza a Web Developer Toolbar pode identificar facilmente esses erros, mas utilizando CSS a identificação é mais apurada. Vejam só uma página de exemplo.

Páginas:«1...78910111213...27»