Após escrever seu HTML tendo em mente Progressive Enhancement (melhoria progressiva) e ter a certeza que caso um navegador não tenha suporte ao um determinado elemento o usuário não será prejudicado, podemos começar a implementar nossa segunda camada de tecnologia, nesse caso o CSS, responsável pelo design da nossa página.
Igual ao HTML, o CSS também evoluiu bastante nos últimos anos. Igual ao que ocorre com o HTML também, alguns navegadores não implementam essas novidades em seus navegadores. No CSS é relativamente fácil incrementar a melhoria progressiva. Quando temos uma propriedade duplicada, apenas a última propriedade é considerada.
Perceba o exemplo abaixo. A primeira imagem possui uma legenda com uma cor de fundo sólida. Isso é o que os usuários sem suporte a opacidade vão enxergar. Já na segunda imagem temos um exemplo de um navegador com suporte a opacidade. Perceba que o conteúdo (a legenda da foto) é mostrado, porém de uma forma um pouco diferenciada.
.txt-leg {
position: absolute;
bottom: 0;
color: #fff;
width: 685px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
Perceba que temos duas propriedades de background. Navegadores mais antigos ou sem suporte a essa propriedade só entenderão a primeira declaração background, os mais novos ou com suporte a essa propriedade entenderão as duas mas vão aplicar apenas a última declaração. A ideia é escrever as propriedades mais recentes abaixo das mais antigas….
Um segundo exemplo é o uso da propriedade de colunas das CSS.
Usuários com navegadores que tenham suporte a propriedade CSS de colunas mostrará o conteúdo em colunas. Para aqueles usuários com navegadores antigos ou que não dão suporte a essa propriedade verão o conteúdo em formato de lista. Repare que independente do suporte ambos os usuários verão a mesma informação, porém um pouco diferente. Isso que é importante, nunca crie um conteúdo que dependa de uma propriedade CSS para ser lido, entendido, etc. O segredo é sempre priorizar a informação, o conteúdo do seu site.
HTML
<div class="coluna">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing </li>
<li>Lorem Ipsum is simply dummy text of the printing </li>
<li>Lorem Ipsum is simply dummy text of the printing </li>
<li>Lorem Ipsum is simply dummy text of the printing </li>
<li>Lorem Ipsum is simply dummy text of the printing </li>
<li>Lorem Ipsum is simply dummy text of the printing </li>
</ul>
</div>
CSS
.coluna {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}
Usuários com suporte à propriedade colum vão ver o conteúdo em colunas…
… Usuários sem suporte terão o conteúdo apresentado em formato de lista
Outro ponto importante é só partir para uma outra tecnologia, por exemplo JavaScript, quando você realmente não conseguir fazer o que quer apenas com uma determinada tecnologia. vejo muitas animações simples feitas com JavaScript que poderiam facilmente ser feita com CSS.
Navegadores como IE 8, por exemplo, não vão mostrar o efeito de transição que foi aplicado com CSS, mas o conteúdo estará lá para ser acessado.
CSS tem novos recursos impressionantes para o desenvolvedor. Escrevendo seu CSS e principalmente pensando na melhoria progressiva podemos tirar o máximo de proveito de tudo que o CSS tem para nos oferecer, proporcionando benefícios para seus visitantes
Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.