Arquivo da categoria: css

Animação com jQuery, não funciona como esperado no IE7 IE8.

Bom isso não é um espanto para desenvolvedor web nenhum :D,  todos sabemos o quanto as simples três letras juntas ie6/ie7/ieX são sinonimo de problemas talvez no ie18 seja algo correto! Nossa radicalizeiiiii!!!!! hihihiHAihaHAIaH … bom parece que o ie9 já implenenta até HTML5. Uau! -_-

Evangelizando.

Isso não tem nada a ver com o bug, pode pular para o próximo tópico ;).

É por isso que eu digo, use Firefox, use o Chrome use algo atualizado e seja feliz! Já discuti muito com amigos web-dev’s sobre a questão dos navegadores da raça ieX e o que geralmente dá mais discussão é ele o ie6, pois todos dizem que tem que funcionar no ie6, e eu digo que o ie6 só atrasa com a evolução dos padrões e das novas tecnologias web que podem e vão surgir, justamente porque este navegador não suporta nem as tecnologias básicas de desenvolvimento web como CSS/JS, tipos de imagens etc.

O problema em usar o método da jQuery .animate().

A função .animate() em sua descrição já diz tudo: “.animate(): Executa uma animação personalizada de um conjunto de regras CSS”, com este métodos pode-se desenvolver animações incríveis(exemplos, exemplos e mais exemplos.) para seu site sem a necessidade de utilizar FLASH.

Quando tenta-se utilizar a propriedade ‘position’ dentro das regras de animação no método .animate(), podemos nos deparar com um erro de javascript no navegador ie7/8, indicando um erro em nosso framework jQuery, apontando que a propriedade em questão não é reconhecida pela jQuery, mas como nós sabemos quem não consegue reconhecer a tag é o navegador, achei um post muito interessante onde os web-dev’s falavam sobre a questão da falha da animação no ie7.

Solução

Se o problema é utilizar a propriedade ‘position’ dentro do código js, ex:

$(‘#topicos_desta_secao li’).hover(function(){
$this = $(this);
var bottom = ‘-45px’; //valor default para subir.
if( $this.css(‘height’) == ‘320px’ ){bottom = ‘-115px’;}
$this.css(‘cursor’, ‘pointer’).find(‘p’).stop().find(‘.first’).hide().end().animate({position:’absolute’, bottom: bottom}, {queue:false, duration:300});

.,…..

Não as utilizem, pois o motor de JS do ie7/8 não reconhecem essa propriedade corretamente. A solução é colocar a propriedade ‘position’ dentro da regra CSS do elemento que se quer animar.

.topicos_solucoes li p {
position:absolute;
left:0;
bottom:-178px; color:white;
background-color:#4d4d4d;
height:100%;
padding:30px 10px 0 10px;
}

Simples!!!!

E sem mais blah’s… “é isso ae pessoal”

1 comentário

Arquivado em bugs, css, jQuery, xhtml

Acrescentando mais acessibilidade aos seus sites com CSS e XHTML.

Olá amigos leitores, hoje, após uma rápida olhada nos meus feeds, um assunto interessante me chamou a atenção o assunto tratava sobre uma propriedade do CSS muito utilizada na técnica de Image Replacement a propriedade display:none o artigo real sobre o assunto tem o nome de “Hiding with CSS: Problems and Solutions” (tradução: Esconder com CSS: Problemas e Soluções). Não vou traduzir o artigo neste poste apenas vou fazer uma pequena reflexão sobre a solução e o problema que me chamou a atenção, então vamos ao que interessa.

O Problema em esconder elementos (X)HTML com a propriedade display:none da CSS.

No artigo o autor diz que o problema em esconder um elemento com CSS é diretamente ligado a acessibilidade que o site pode ter. Pois quando usamos a propriedade:

elemento {display:none}

Estamos dizendo ao navegador que ele não deve apresentar esse elemento  ao usuário, o que de uma forma visual este é o objetivo da propriedade, porém, para pessoas com deficiência física e que precisam utilizar leitores de tela para acessarem o site pode ocorrer um problema, pois o leitor não irá ler nem falar  a propriedade com display:none.

Ok até ai blz. Agora vou aprensentar uma coisa interessante sobre acessibilidade que costumo colocar em meus projetos. Trata-se de um menu escondido que fica disposto apenas para fins de acessibilidade. Eu crio um menu normalmente com as opções para que o usuário deficiente possa acessar as seções do site usando o teclado, ficando algo como:

<div id=”atalhosdeacessibilidade”>

<p>Menu, acesse o conteúdo do site utilizando o menu abaixo para facilitar sua navegação.</p>
<a href=”#conteudoPrincipal” accesskey=”1″ tabindex=”155″>ir para conteúdo</a>,
<a href=”#menu” accesskey=”2″ tabindex=”160″>ir para menu</a>,
<a href=”#conteudoInformativo” accesskey=”3″ tabindex=”165″>ir para conteúdo informativo</a>
</div>

E mando esconder com a propriedade display:none

#atalhosdeacessibilidade {display:none}

E voylá! Temos um menu especial para usuários deficientes, e consequêntemente um site mais acessível. Bom tenho que deixar claro que a idéia inicial deste menu não foi de minha autoria e sim andei copiando do meu Prof. e Chefe o Thiago TPC (Twitter – http://twitter.com/thiagotpc) 😛 .

Agora depois de ler o artigo sobre o problema de esconder o elemento com a regra CSS display:none é que o programa leitor de tela não irá pronunciar o paragrafo dentro da DIV #atalhosdeacessibilidade.

A solução para esconder um elemento na tela de forma que possa ser lido por um programa leitor de tela.

No artigo o autor detalhe que ao invés de usar a propriedade display:none para não apresentar um determinado elemento na tela sem deixar a acessibilidade de lado é usar  a propriedade position:absolute e movimentar o elemento para fora da viewport do navegador. Ficando algo como:

#atalhosdeacessibilidade { position:absolute; left:-9999px; }

Assim desta forma o programa leitor de tela irá encontrar a DIV e irá ler o parágrafo dentro desta para o usuário e assim ele saberá sobre o recurso de acessibilidade disponível no site.

Bom é isso ai, galera, axo que isso sirva pra acrescentar conhecimento a vocês para que não esquecam dos usuários deficientes que também querem acessar o os sites por nós desenvolvidos.

Dica: para saber sempre sobre novos POSTS no meu blog me sigam no Twitter 🙂
http://twitter.com/anestesya

Té a próxima.

4 Comentários

Arquivado em css, Javascript, xhtml

Assegurando que sua página será renderizada no Modo IE8.

A cada nova versão do Windows Internet Explorer, o suporte aos padrões de Cascading Style Sheets ( CSS ) tende à melhorar. o IE8 ( Internet Explorer 8  ) é a mais nóva versão do   navegador da Microsoft e seguindo a tendência de evolução da sua familia  é o que tem maior compatibilidade dos padrões web ( apesar de ainda não está totalmente  padronizado 😐  ) de acordo com a Microsoft é totalmente compatível com o CSS 2.1 e com suporte há algumas funcionalidades das CSS 3 ( http://www.css3.info ).

De acordo com este artigo no site MSDN (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#lists) para garantir que seus sites usem os novos recursos de CSS suportados pelo  IE8, você tem fazer com que o navegador ative o modo de renderização especial do IE8, conhecido como “IE8 mode”, incluindo na sua seção de <head></head> a  metatag especial  que faz com que o IE8 ative o “IE8 mode”.

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Com esta metatag no head do site, você estará garantido o uso do IE8 Mode, um maior suporte as  CSS e os padrões web.

5 Comentários

Arquivado em css, xhtml