Luan Garcia » xhtml, css, jquery e webstandards

Como aplicar corretamente este filtro, e qual a melhor maneira de usá-lo.

Como todos já estamos carecas de saber, o nosso querido amigo IE6, não nos dá suporte ao nosso grande aliado png.

Existem algumas formas mais comuns de se faze-lo funcionar no ie6, na sua maioria, por javascript. Porém, este não vai ser meu foco hoje. Vou propor a solução usando apenas css, ou seja, os filtros para ie6.

Muita gente usa, pouca gente consegue fazer funcionar, e muitos não entendem como funciona o mecanismo, mas há pouco tempo eu descobri o porque as vezes a desgraça não funcionava, e a partir daí, meus problemas com png acabaram.

Primeiramente e antes de mais nada, eu aconselho a usar uma condicional apenas para o ie6. Sendo assim, apenas o ie6 vai ler o trecho do codigo que irá conter os filtros de css para fazer com que o png fique transparente. Para quem não sabe, as condicionais são if’s, que determinam qual navegador vai conseguir ler o trecho de código que está dentro.

O código que faz isso acontecer é o seguinte:

<!–[if IE 6]>
<link href="css/comum.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]–>

Ou seja, apenas o IE6 vai interpretar este arquivo de css. O resto dos navegadores vai entender como um comentário simples. Apenas ele precisa interpretar este código que faz com que o png fique transparente, os outros navegadores (IE7+, ff, opera, chrome etc..) ja possuem suporte ao png.

Bom, chega de papo furado vamos ao que interessa.

No css normal, usa-se o backgroun da seguinte forma:

CSS: (css/comum.css)
h1 {background: url(../img/logo.png) no-repeat 0 0;
width: 480px;
height: 110px;}

Obs.: Este filtro não aceita imagem repetida em y ou x (ie6), tem que se usar a imagem inteira.

E no css que apenas o ie6 irá ler:

CSS: (ie6.css)
h1 {background: url(../img/logo.png) !important;
background: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/logo.png‘,sizingMethod=’image’);}

Bom..agora vamos a lógica. Levem em conta minha estrutura de pastas, onde index.html está na raiz e tanto o css quanto as imagens estão em pastas com seus respectivos nomes.

Reparem que o caminho da imagem do background esta diferente do caminho da imagem do filtro. Muitas vezes não funciona porque não sabemos colocar certo o caminho do filtro. É bem simples, na verdade a referência que o filtro usa para chegar até a imagem, é o proprio html (se o html esta na raiz, entao o caminho fica img/logo.png, ao contrário do css que tem que voltar um nível parar acessar a pasta da imagem). Se é do próprio html então ele nao precisa subir um nivel para chegar a imagem (neste caso). Logo, isso é o grande “x” de se usar o filter.

E é isso galera, é bem simples na verdade. Já tomei muita surra por causa disso e acho interessante compartilhar com vocês. Abaixo está o link para fazer o download do meu exemplo e ir acompanhado ao tutorial.

Link do exemplo

Obs.: Não postei o código html pois ocuparia muito espaço, além de não ser o essencial.

Flw galera..abs!

Fala ae galera! Como estou em um momento inspirado, resolvi fazer um post simples mas que ainda é a dúvida de muitos desenvolvedores.

Todos já sabem que para centralizar horizontalmente qualquer elemento, o mais apropriado é usar margin: 0 auto; (para elementos que possuirem uma largura fixa) e pronto, seu elemento estará centralizado.

Porém, centralizar horizontalmente é moleza, todos ja sabem. E centralizar verticalmente? É isso que vamos ver agora.

Antes de tudo, vamos deixar claro uma coisa: o elemento deve possuir uma altura fixa (senão voce só consegue realizar isso via js), e js não é nosso foco no momento.

Primeiramente, vamos montar uma estrutura simples, uma div com a classe class=”centralizar”. E para visualizar nosso bloco, colocaremos no css o seguinte codigo. Vendo no browser, aparecerá um quadrado vermelho.

HTML:
<div class="centralizar">
Algum conteudo.</div>

CSS:
.centralizar {
background-color: red;
width: 300px;
height: 400px;
}

Beleza, bacana, mas ainda não está do jeito que queremos. Então vamos ao que interessa. Para centralizar esta div primeiramente precisamos dizer que ela tem um position: absolute;. Em seguida, temos que atribuir top:50%; e left:50%;. Nosso código ficará assim:

CSS:
.centralizar {
background-color: red;
width: 300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
}

Como já era de se esperar, nossa div ficou torta, nao ficou centralizada. Mas isso é óbvio, pois ainda não terminamos . Agora então, vamos para o pulo do gato.

Metade do caminho andado, agora temos que fazer o seguinte: “atribuir margin top e margin left negativos, com metade da altura e da largura.”.

Hã? Quem? Cuma? Calma, calma… vamos por partes. Temos que pegar a metade da altura total da div(150px) e atribuir esse valor ao margin top, porem, negativo. E o meso vale para a largura. Pega-se a metade da largura total da div(200px) e atribui esse valor a margin-left, porém, negativa tb. E assim ficará nosso código:

CSS:
.centralizar {
background-color: red;
width: 300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;/* centraliza a div verticalmente */
margin-left: -150px;/* centraliza a div horizontalmente */}

E é isso galera, nossa centralização está pronta. E ainda aprendemos a centralizar horizontalmente de outra forma: com position. Para vizualizar este exemplo clique aqui e baixe o arquivo.

Vlw galera até a próxima!

Vamos falar de um bug muito chato e que atrapalha demais a nós desenvolvedores.

Quantas vezes nos deparamas com um bug chato e que a príncipio nao saberíamos como resolver? Então é sobre um destes que vou falar agora.

Este bug ocorre em div’s que possuem elementos com float. Qual é o bug? Simples, toda vez que uma div possui elementos com float, essa div perde altura. Ahh nao entendi nada.. calma, vai entender, mas antes baixe meu exemplo abaixo.

Obs.: Esse bug ocorre tanto no FF quanto no IE.

Clique aqui para baixar este exemplo.

Reparem que eu praticamente fiz um tutorial dentro do html. Vou dar uma resumida do que tem lá.

Primeiramente voce irá se deparar com o html todo bonitinho, sem nenhum bug. A princípio vou pedir para comentar os css’s(no tutorial dentro do arquivo vem explicando) para que o bug possa aparecer. Depois disso começa a fase de teste.

Na estrutura que montei existe uma div chamada #container e dentro dessa div tem duas div’s com as respectivas classes: .c1 e .c2. E logo abaixo da div #container (fora dela), está a div .teste.

Vocês vão reparar que de primeira vou dar uma solução que resolve porém que não é a ideal. Isso servirá para abrirmos um leque de opções para “n” tipos de bugs. No exemplo que dei, o bug começa quando peço para comentar no css de #container os atributos overflow e zoom. Neste mesmo momento tiraremos também o atributo clear: both; de .teste.

O que acontece é o bug que estamos estudando. A div #container perde altura e ai com isso, a div .teste que esta abaixo, vai parar ao lado das divs .c1 e .c2.. Repare isso pelas bordas que coloquei em cada div, cada borda com uma cor diferente para podermos diferencia-las.

Num dos primeiros testes que fiz, eu coloquei a div .teste para baixo, no lugar onde ela, de fato, deveria estar, mas para que isso aconteça, é necessário descomentar o atributo clear: both; que colocamos no início. Este é apenas um meio de resolver, porém, longe de ser a solução ideal, pois reparamos que por mais que a div .teste vá para o seu lugar certo, a div #container continua sem altura… e para corrigir isso vamos para o próximo passo.

Existem pelo menos umas 2 maneiras parar resolver esta tipo de bug(que eu conheça). A primeira é com o famoso clearfix. Acho que todos ja ouviram falar desse camarada, mas não é o foco de hoje, vou mostrar como resolver de outra forma.

Vocês lembram que no início do tutorial, eu pedi para comentar os atributos overflow e zoom da div #container? Iremos por partes. Vamos precisar do FF e os IE’s da vida para fazer os teste… Então abram FF,IE7 / IE8, e o IE6.

Abertos os navegadores, vamos no css e descomentem o atributo overflow, apenas ele. Testem nos navegadores. Como podem ver, o bug foi corrigido apenas no FF, porém nos IE’s, ele nao funfou. Logo, vamos ter que descomentar o atributo zoom, pois é este elemento que vai fazer com que a solução funcione nos IE’s.

Pronto..e ai está nossa solução mega simples para corrigir a perda de altura em divs que possuem elementos com floats. Neste tutorial eu usei o overflow:hidden; porém, pode-se usar o overflow: auto; que funciona da mesma forma.

Valeu galera, espero que gostem e que sirva para algo útil. Abs!

Um milagre galera!!! Dois posts no mesmo dia!

É o seguinte,há um tempo atrás me deparei com um bug muito chato do ie6 e que suei pra descobrir como resolver, então vale apena a dica.

Muitas vezes nós não entendemos alguns bugs do ie6 mas mesmo assim estamos la firmes e fortes. Alguem por acaso ja se deparou com o bug de duplicar a última letra? Pois bem, se já aconteceu isso com você, agora não vais mais acontecer.

Uma tendência dos desenvolvedores mais organizados, é comentar algumas partes do seu código afim de não se perder e deixá-lo mais intuitivo. Porém, alguns desenvolvedores abusam um pouco dos comentários (não que não possa, mas eu adoto a seguinte postura para meus sites: coloco comentários apenas nos pontos mais importantes, ou seja, na maioria dos casos, no fechamento das tags mais importantes de estruturação) e esse abuso causa este bug.

Pelo menos comigo, todas as vezes que tive esse problema, consegui resolver tirando o excesso de comentários que estavam a volta do elemento com esse problema.

Então é isso galera, é um bug bem simples de evitar mas que com certeza já deu dor de cabeça a muitos desenvolvedores.

Se alguém tiver outra solução acho interessante postar, pois eu mesmo desconheço

Abs!

Como sabemos, o IE6 é composto por dezenas de bugs chatos e incovenientes.

E é sobre um deles que vamos falar agora: em elementos com float, se dermos uma margem para a direita ou esquerda, o IE6 tem mania de duplicar essa margem.

Normalmente os(alguns) desenvolvedores falam: “Ah mas resolver isso é facil, é so colocar um hack pro ie6 dizendo que ele tem metade da margem que estao nos outros.”

Sim claro, isso é óbvio, mas que tal resolvermos isso sem hack?

Então faremos o seguinte:

- No elemento que possui o float e a margem, se ocorrer do ie6 duplicar essa margem, use o display: inline; que este bug irá ser corrigido automaticamente.

Ex.:

elemento {
width: 300px;
float: left;
margin-right: 50px; /*essa margem dobra no ie6, logo fica com 100px*/
display: inline; /*corrige o erro da margem duplicada*/}

Valeu galera, até a próxima

Como sabemos, um html feito em modo strict, não permite alguns elementos eventualmente usados no modo transitional (aceitos na validação do w3c), como por exemplo o target=”_blank”. Quando digo “não permitem” quero dizer “não validam o código html”.

Porém, para tudo tem uma solução, e para este caso não é diferente. Poderíamos fazer isto com javascript puro, mas perderíamos tempo e utilizaríamos muitas linhas de código. Logo vamos a praticidade, vamos usar jquery para poder fazer este simples efeito e validar seu html strict.

Para começar é válido lembrar: o jquery pode ser baixado no próprio site do jquery. Sem ele, este tutorial nao servirá de nada.

Pra começar, vamos fazer com que o html leia nossa função no momento em que a página for carregada:

$(document).ready(function(){
linkExterno();})

Como podemos ver, eu já coloquei o nome da minha função dentro da chamada, logo a função que vamos criar, terá o mesmo nome.

Nossa função é bem simples… Não tem nenhum mistério e com certeza será muito útil para muitos desenvolvedores. Então lá vai a função:

function linkExterno() {
$(’a.linkOut’).attr(’target’,'_blank’);}

O que eu fiz neste exemplo é bem simples e vou explicar. Eu simplesmente disse que toda tag “a” que tiver uma classe “linkOut” terá um target _blank ao ser carregada a página. Sem dúvidas se fosse ser feito com javascript normal, usariamos muitas linhas de código e ainda teriamos mais dor de cabeça.

Como nós, desenvolvedores, nos preocupamos muito com a modularização, que é a separação dos conteudos (js, css e html), acho que fica valido esta dica.

Bom, este é meu primeiro post e espero que gostem. Fico aberto a críticas, elogios, sugestões, entre outros.

Um forte abraço!