Progressive Enhancement em CSS

Após escrever o HTML tendo em mente o Progressive Enhancement (optimização progressiva) e ter a certeza que caso um browser não tenha suporte ao um determinado elemento o utilizador não será prejudicado, podemos começar a implementar a nossa segunda camada de tecnologia, nesse caso o CSS, responsável pelo design da nossa página.

No CSS é relativamente fácil incrementar a optimização progressiva.

Quando temos uma propriedade duplicada, apenas a última propriedade é considerada.

 

.txt-leg {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 685px;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
}

Temos duas propriedades de background. Browsers mais antigos ou sem suporte de propriedade só entendem a primeira declaração background, os mais recentes ou com suporte da propriedade entendem 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.

Utilizadores com Browsers que tenham suporte à propriedade CSS de colunas mostram conteúdo em colunas.
Para aqueles utilizadores com browsers antigos ou que não têm suporte da propriedade vêm o conteúdo em formato de lista.
Repara que independente do suporte, ambos os utilizadores Vêm a mesma informação, embora de forma diferente.
Isso que é importante, nunca criar um conteúdo que dependa em exclusivo de uma propriedade CSS para ser lido.
O segredo é sempre prioridade à 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;
}

Utilizadores com suporte à propriedade colum vão ver o conteúdo em colunas…
Exemplos colunas

… Utilizadores 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 realmente não conseguir fazer o que quer apenas com uma determinada tecnologia. existem 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 acedido.

CSS tem novos recursos impressionantes para o developer, como por exemplo animção de elementos e transições.

Escrevendo CSS e principalmente pensando na optimização progressiva aliada a um correto padrão de desenvolvimento  podemos tirar o máximo de proveito de tudo o que o CSS tem para nos oferecer, proporcionando benefícios para visitantes.

Leave a Reply

Your email address will not be published. Required fields are marked *