Tudo relacionando a Otimização

Variáveis no CSS, um desejo já em teste

O WebKit é um projeto Open Source para testes de futuros releases do Safari. Ele se destaca por possuir diversas inovações, utilizando um repositório com versões geradas diariamente (nightly build).

Em uma de suas últimas versões, tivemos uma novidade, que foi a implementação do suporte a variáveis dentro de folhas de estilo. Esse novo conceito já vem sendo sugerido desde a referência do CSS2.1, a cerca de 10 anos atrás, mas nenhum browser havia se manifestado quanto essa idéia. Ponto para o WebKit!

O que ganhamos com variáveis

Simplesmente passamos a ter uma maior dinâmica entre arquivos CSS, ou seja, uma vez que variável for definida, ela pode se repetir dezenas de vezes dentro e fora de um arquivo, contanto que tudo se encontre em hierarquia.

Imagine se definimos uma div com classe equivalente ao céu e logo após uma ao mar. Resumindo bem, teríamos dois elementos de cor azul e então faríamos algo desse tipo:

div.ceu { background-color: blue; }
div.mar { background-color: blue; }

ou

div.ceu, div.mar { background-color: blue; }

Com uma variável, poderíamos evitar que o background-color fosse definido várias vezes como blue:

@variable { corNatural: blue; }
 
div.ceu, div.mar { background-color: var(corNatural); }

Ou até mesmo manter um arquivo externo com nossas nomeclaturas pessoais de cores.

/* arquivo com um @variable definindo todas as cores */
@import "cores.css";
 
div.ceu, div.dia, div.noite { background-color: var(corCeu); }
 
div.mar, div.agua { background-color: var(corAzul); }

Espero que isso vire um padrão. Vamos esperar!

Obs: Não é de hoje que o Webkit impressiona, a meses atrás foi implementado o suporte a css animado com svg e esse mesmo já está ativo desde o Safari 3.1.

APNG – Seria o fim do GIF animado?

GIF 256bitsO Firefox 3, que está com seu lançamento programado para dezembro, vem apresentando promessas interessantes. Um novo Gecko é uma delas, que além de estar sofrendo uma grande atualização desde a versão 1.5, promete grande ganho quanto ao seu desempenho. Agora vamos ver o que a concorrência irá inovar ou se beneficiar.

Outro fato curioso, é a criação do formano APNG, que se trata de um arquivo de imagem baseado no GIF Animado, com diferencial no benefício da qualidade do PNG. Pense naquele loading de suas páginas em ajax e veja o que isso poderia colaborar para a qualidade de sua identidade visual.

Talvez isso possa ser um grande ganho quando se tratamos de possibilidades, mas devemos pensar muito antes de sair desenvolvendo em nossos projetos, pois a compatibilidade será exclusiva do Firefox no momento. A própia PNG não aprova a tecnologia animada desenvolvida pela Mozilla, o que nos deixa desconfortáveis quanto uma utilização de teste, seria algo do tipo a Apple não aprovar caixinhas de som para Ipod.

Estou curioso quanto ao peso dos arquivos gerados. Vamos aguardar, quem sabe essa possa ser a substituição(finalmente) do GIF Animado.

Visual terminado

Após a promessa , finalmente consigo tempo para terminar a identidade visual do blog.

Optei por uma comunicação simples, sem muito efeito visual, algo ideal para este tipo de mídia.

Agora vem uma etapa trabalhosa, que é a otimização do código base do skin.

Conto com a opnião de vocês sobre essa nova fase do EuCrio Blog. ;)