pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Aplicando Progressive Enhancement no CSS

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.

Exemplo melhoria progressiva transparência

.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…
Exemplos colunas

… Usuários sem suporte terão o conteúdo apresentado em formato de lista
Visualização em listas

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.

Exemplo menu CSS

Exemplo do menu acima

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.

Categorias: CSS |

Comentários desativados.

Topo