Blog da TeHospedo

CSS com melhorias à Prova de Futuro

O desenvolvedor web que nunca usou uma imagem de 1px para formatar uma página, que atire a primeira pedra. Ops, vai doer!

Sabemos que há uma guerra contínua entre os fabricantes dos principais browsers do mercado, e o saldo desta batalha de titãs, são padrões e novas funcionalidades do HTML e CSS, surgindo num ritmo acelerado. Estamos num momento promissor pra programação front-end.

Neste artigo vou falar um pouco sobre uma nova tendência, de como desenvolver com uma metodologia de “melhorias progressivas”.

O que é o conceito de melhorias progressivas?

Sabemos que padrões web como HTML5 e CSS3, não tem suas propriedades suportadas para todos navegadores do mercado. Então por que ainda temos a preocupação, de que o design de seu site deva renderizar ( ser exibido ) igual em todos eles.

Graded Browser Support, é a nomenclatura usada pelo Yahoo ( www.developers.yahoo.com/yui/articles/gbs ), para esta prática que se tornou definição comum do suporte gradual a navegadores. Abordagem que significa usar propriedades experimentais client-side, em elementos não críticos e fundamentais da sua estrutura de design, sem se preocupar se elas serão ignoradas em browsers mais antigos e não suportados.

Este conceito moderno, tem em sua essência, forçar os padrões web futuramente, melhorando a acessibilidade sem perder funcionalidade. Com isso, a degradação do design em navegadores antigos, se torna mais suave. É óbvio que nunca teremos a mesma experiência de navegação, entre um Konqueror e o Mozilla Firefox 8, mesmo que ambos sejam suportados.

Em suma, evitamos sujar o markup com hacks antigos, antes necessários pra uma tentativa frustrada, de alcançar  resultados exatamente iguais . Então vamos falar de alguns exemplos práticos.

Bordas no Photoshop pra quê?

O atributo CSS3 border-radius, por exemplo, garantirá que no futuro, designers nunca mais precisem do Photoshop para editar cantos arredondados. Este é um exemplo básico nas especificações do W3C:

#seletorCSS {
    border-radius: 10px;
}

Cada navegador tem seu prefixo CSS3, uma vez que as especificações vem sendo adicionadas gradativamente nos navegadores.

• -moz-: Firefox
• -webkit-: Safari e Chrome
• -ms-: Microsoft
• -o-: Opera

Este link tem uma abordagem mais técnica de como usar o border-radius, uma vez que meu objetivo não é aprofundar na sintaxe, e sim enfatizar que devemos usá-la sem preocupação. Note que não ficou feio sem as bordas, e que o botão não perderá sua funcionalidade de clicar =)

Cores RGBA? Transparência com velocidade.

Imagens em PNG transparente normalmente ficam muito pesadas pra web, e seu uso quase sempre é estético. Muitos navegadores já aceitam cores no formato RGBA, com um canal Alpha de tranparência de valor entre 0 e 1, onde 1 é 100% opaco.

Os três primeiros parâmetros são referentes aos canais RGB e o quarto é o canal Alpha. No exemplo abaixo o elemento terá uma opacidade de 80%.

#seletorCSS {
	background-color: rgba( 0, 0, 0, .8 );  /* fundo preto, com 80% de opacidade */
	color: rgba( 0, 0, 0, .8 );
}

Note a sutileza do menu de fundo preto, que exibi apenas 20% da imagem abaixo. O IE8 entre outros navegadores mais antigos não terão suporte, mas isso também não fará diferença na navegação.

Sombra Projetada

O atributo box-shadow  nos  permite criar sombras projetada como os softwares de edição de imagem, especificando o deslocamento horizontal e vertical da sombra, o raio de defoque e sua cor. Veja este sintaxe para cores RGBA:

#seletorCSS {
   -webkit-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0);

-moz-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0);

box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0);

}

O uso de filtros pra compatilibilidade com o IE8 ou inferior eu não recomendo, exceto se o objetivo  do site é visual, por que os mesmos sobrecarregam a CSS.

Ferramentas úteis

Outras propriedades CSS3, como gradientes, múltiplas colunas, @font face, transições, etc. são úteis e ótimas pra substituirem elementos de imagem e hacks desnecessários, otimizando seu projeto. Deixarei pra falar deles mais tarde junto com HTML5.

Dentre as ferramentas que não deixo de usar mais, está a CSS3 Generator. Como o nome diz, ajuda e muito a criar as propriedade CSS3 com seus devidos prefixos e precisão na compatibilidade.

O Addon Firebug do Firefox é fundamental pra debugar, editar e monitorar o CSS e HTML. Facilita muito a vida na hora que u m valor de atributo sobrescreve o outro, deixando você horas pra saber que diabos aconteceu <o>. O Chrome tem uma ferramenta de desenvolvedor nativa, e seu debugger exibe em tempo real os elementos sendo modificados pela CSS … Awesome!

Designers e desenvolvedores formadores de opinião! Devemos divulgar esta prática e espalhar este conceito. Rezamos pela morte do IE7, e por um futuro, onde um projeto web realmente não precise ser visto igual em todos navegadores da galáxia.