Esta é a proposta do eCSStender, um framework CSS que conheci esta semana. Com o slogam “Take control of your CSS”, o framework promete ajudaro designer a resolver problemas causados pelas diferenças entre os browsers e a forma como cada um interpreta o código CSS.
Através do eCSStender, você poderá utilizar seletores avançados, propriedades tais como border-radius, e font-face personalizado, com a garantia que tudo funcionará redondinho, até mesmo em browsers que geralmente não suportam essas novidades (leia-se Internet Explorer 6).
O framework está em constante desenvolvimento, e as novidades você pode conferir no site, ou então seguindo@ecsstender no Twitter.
Os styles padrões que acompanham o Fireworks ajudam bastante em tarefas simples, mas com o tempo tendem a cansar. Isso me levou a procurar no Google alguns novos styles. Achei vários interessantes (e outros repetidos). Abaixo seguem 4 dicas de sites onde você pode baixar bons styles pro seu Fireworks. → Continue
O uso de imagens PNG no Internet Explorer é um problema que me incomoda a anos. Ficava muito frustrado em ter que limitar meus layouts por causa dessa falta de suporte. Pior é que eu não posso simplesmente ignorar isso e criar layout “for Firefox only”.
Sempre que necessitei utilizar imagens PNG com transparência, eu recorria ao script PNG Fix. Mas a desvantagens dessa é que ela suporta apenas as imagens inseridas através da tag IMG. Ou seja, nada de utilizar PNG transparente como fundo através de CSS.
Hoje, durante uma pesquisa me deparei com uma solução que funcionou da forma como eu precisava. Está no blog do AMF Designer. Tomei a liberdade de transcrever a solução para fins de arquivamento:
Cross-browser PNG background
Muitas vezes temos problemas para implementar transparência (PNG ou filtro de transparência) com sucesso em todos os browsers sem muita dor de cabeça. Reuni aqui uma forma que acredito seja eficaz porque está tudo no mesmo CSS e não precisa de JavaScript.
Define a imagem de fundo do elemtento, no caso o div, e o !important define que esta linha é a definição de background-image que vai prevalecer sobre todas as outras declarações desse atributo. Note que o Internet Explorer (IE) 6.0 e anteriores ignora o !important se tiver alguma declaração do mesmo atributo depois dessa linha.
O caminho da imagem quando você usa ela em um .css no background-image é relativo ao arquivo .css.
background-image: none;
Filtro para o IE 6.0 e anteriores. Como ele ignora o !important da linha acima ele não vai mostrar a imagem de fundo no elemento.
filter: none !important;
O, recém lançado, IE 7.0 já trabalha com o comportamento padrão do !important no CSS. Se não existir essa linha, ele vai renderizar dois PNG’s um sobre o outro, já que essa nova versão já tem suporte para PNG de 24bits.
Mais uma linha para IE 6.0. Ele vai ignorar o !important da linha anterior e vai usar o filtro para exibir o PNG com todos os níveis de transparência.
O caminho da imagem quando você usa ela em um .css no filter é relativo à página que você está chamando.
No filtro AlphaImageLoader você têm três opções para o atributo sizingMethod:
sizingMethod='image' – mantém a imagem do tamanho original, ele “estoura” o tamanho do elemento se a imagem for maior que ele
sizingMethod='scale' – redimensiona a imagem pra caber dentro do elemnto, distorcendo ela se for necessário
sizingMethod='crop' – corta a imagem do tamanho do elemento
position: static;
Quando o IE 6.0 aplica o filtro, ele renderiza todo o conteúdo e o elemtento fica “chapado” como se fosse uma imagem. Links (a), campos de formulário (input) e outros elementos, perdem o seu comportamento padrão e os eventos não funcionam para o elemento. Para resolver esse problema usamos position: static; que contorna essa falha de renderização. Se for necessário posicionar o elemento na tela vai ser necessário colocá-lo dentro de um container (div) e este elemento “pai” pode ter a posição absoluta ou relativa na tela.
Essa solução tem se mostrado ideal nos projetos que tenho trabalhod. Foi testado no Firefox 1.5, Internet Explorer 5.5; 6.0; 7.0 e Opera 9.0, todos rodando Windows XP.
Os styles padrões que acompanham o Fireworks ajudam bastante em tarefas simples, mas com o tempo tendem a cansar. Isso me levou a procurar no Google alguns novos styles. Achei vários interessantes (e outros repetidos). Abaixo seguem 4 dicas de sites onde você pode baixar bons styles pro seu Fireworks. 
