CSS Hacks para o Firefox 3

Por: Diego Franco - [ July 2nd, 2008 ]

Primeiramente parabéns ao Firefox, mais de 8 milhões de downloads em 24 horas, garantindo o seu lugar no Guinness Book.

Bom, chega de elogios e vamos ao trabalho.

Firefox 3, IE8, este último polêmico por sinal, resumindo, diferente do que a galera do Casseta & Planeta diz: nossos problemas não acabaram! Muito pelo contrário talvez até aumentem só o tempo dirá.

Nas primeiras impressões alguns problemas foram realmente melhorados, principalmente em relação a performance, porém já percebemos comportamentos estranhos em alguns atributos CSS, como por ex.:

Problemas com display:table quebrando DIVS no Firefox 2;
Facilmente corrigido com a substituição por overflow:auto;

Porém nos deparamos com comportamentos estranhos com overflow:auto; no Firefox 3;

Para corrigir use:
Use: overflow:visible;

A medida que encontrar mais problemas com CSS e suas devidas soluções no Firefox 3 vou escrever aqui.

E vamos para a declaração dos HACKS para o Firefox 3, título deste post. Lembrando que você poderá usar Conditional comments, depois falamos sobre este.

A resolução é simples escreva sempre o nome da classe do seu elemento seguido de uma vírgula seguido de x:default { atributos } conforme exemplo abaixo:

Hack for Firefox 3
.nomedasuadiv, x:default { atributos }

Vamos lembrar outros Hacks.

Hack for Firefox 2
.nomedasuadiv, x:-moz-any-link { atributos }

Hack for Internet Explorer 7
.nomedoseuelemento { *display:none; }

Hack for Internet Explorer 6
.nomedoseuelemento { _display:none; }

Hack for Opera
@media all and (min-width: 0px){

.content { }

}

Qualquer problema comentem!

Bons testes!

Procure por: DVD, MP3, LCD, Plasma, HDTV, Home Theater

[...] Continuar lendo...

CSS, Desenvolvimento, Firefox, Hacks | 11 Comentários » View blog reactions

Bugs | CSS | firefox3 | Hacks

Declarando cores com códigos Hexadecimais como é isso?

Por: Diego Franco - [ October 25th, 2007 ]

Minha idéia neste post não é de aprofundar no assunto mas de ter uma referência rápida sobre os hexadecimais.

Em nosso ambiente de criação estamos acostumados a selecionar as cores que desejamos e pronto lá está ela naquele círculo, quadrado, fonte ou qualquer outro elemento no qual se deseja preencher. Diferente dos trabalhos Arte-finalistas criados para materiais em papelaria onde selecionamos a cor que se deseja, e se, é RGB ou CMYK (isso depende do tipo de material que é produzido), na web, em nosso CSS mais especificamente trabalhamos com cores escritas em códigos hexadecimais. Mas como é isso?

O nome hexadecimal vem da união de 2 palavras do latin hexa( sexto) e decimal(10, base 10, ou décimo), unindo as duas palavras podemos ter (base do décimo sexto) ou falando em miúdos matemáticos o código hexadecimal é derivado de uma base de cálculo 16, contendo 16 símbolos.

Abaixo você tem uma tabela que mostra como uma base de cálculo 10 é convertida para a base 16.

Os números hexadecimais são utilizados para converter valores RGB para que o HTML possa interpretar quais cores você escolheu. As cores RGB variam de 0 à 255. Hoje você pode fazer essa conversão usando a prória calculadora do windows, mas aqui vai uma tabelinha bem simples e prática para se converter valores RGB em hexadecimais.

Tabela RGB - Hexadeximal

Procure por: MP3, iPod, celulares, notebooks, câmeras

[...] Continuar lendo...

CSS, Cores, Desenvolvimento, Hexadecimal | 6 Comentários » View blog reactions

Cantos arredondados sem imagens com Nifty Corners Cube

Por: Diego Franco - [ July 21st, 2007 ]

Recentemente um cliente me fez uma solicitação para que os cantos do menu horizontal que ia no topo da página fosse com cantos arredondados. Geralmente usamos soluções com imagens, mas dessa vez fiz diferente usei o Nift Corners Cube, um script baseado em CSS e Javascript escrito por Alessandro Fulciniti no site HTML.it. Já na sua segunda versão o script sofreu algumas alterações para que fosse mais versátil e mais simples de se usar do que as versões anteriores. O script foi testado no IE5.5, IE6 e IE7, ópera 8.5, Firefox 1.5 e Safari 2.0, todos com sucesso.
No site você vai encontrar vários exemplos de se usar este script e como implementá-los em sua página. Para aqueles que querem arredondar os cantos de suas divs, menus, abas, colunas, ou até montar um site inteiro com cantos arredondados simplesmente sem usar imagens minha recomendação é: Nifty Corners Cube “Uma mão na roda que arredonda”.

Procure por: DVD, MP3, LCD, Plasma, HDTV, Home Theater

[...] Continuar lendo...

CSS, Javascript, Nifty Corners | Nenhum Comentário » View blog reactions