O que são os CSS Hacks?

Css Hacks não são mais do que “gambiarras” no código do css que abusam de erros de renderização dos navegadores.

Para que serve?!

Talvez você já tenha enfrentado um problema parecido:
Quando você está implementando um layout, e compara o resultado em vários navegadores, percebe que ficou certo em dois deles mas exclusivamente em um, ficou totalmente diferente. Você sabe que o defeito é simples de ser resolvido… sabe que é só mudar o tamanho do div, para fazer funcionar, mas se você o fizer, vai dar defeito nos outros dois navegadores que estavam certos. Então, O que fazer?

É exatamente aqui que entra o Css Hack.
Você irá usá-lo para fazer funcionar seu layout neste único browser que está errado.

Resumindo: Css Hack é um código CSS que faz funcionar ou não, um certo código CSS em um browser.

Existem quantos tipos?

Existem várias formas de fazer os Hacks de CSS. Basta procurar no google o tipo de hack que você deseja.

Hacks que escondem código css para Netscape, Opera, Mozilla, IE para Mac, e por aí vai.
O fato é que você quase não irá usar hacks para estes browsers, mas com certeza terá que usar para o Internet Explorer 6.

Vou mostrar aqui 3 tipos de hack. São os que mais uso. Como os problemas acontecem na maioria das vezes com o Internet Explorer, você precisa apenas de um hack que esconda o css deste browser ou que faça o código funcionar apenas nele.

Exemplo 1

Este Hack fará que o determinado código só funcione no IE, os outros Browsers irão ignorar este código.
Isso funciona em Internet Explorer 5 e 6.

div { width:700px; }

No código acima fizemos todos os divs terem 700 pixels de largura.
Suponha que por alguma razão, com este tamanho de largura, o layout ficou quebrado apenas no Internet Explorer… no Firefox, Opera e Safari ficou certinho.
Você precisa então fazer com que esse tamanho diminua apenas para o Internet Explorer, veja o código abaixo:

div { width:700px; _width:650px; }

Note que coloquei um underline na segunda propriedade.
Todo browser decente não entenderá essa propriedade e a ignorará, pelo simples motivo de que não existe nada no CSS que tenha um underline na frente da propriedade. Isso é errado, não existe, portanto é ignorado.

Mas por algum motivo, que ainda não tem explicação, o Internet Explorer aceita essa propriedade.
Logo, no Internet Explorer, a largura dos divs terão 650 pixels de largura.

Cuidado.
Esse hack deve vir depois da propriedade correta. Se vir antes, o IE aceitará a última propriedade que vier, ela sobrescreverá a propriedade underline e dará prioridade para a propriedade que está sem underline.

Outra coisa: Esse hack faz seu CSS não ser validado pelo W3C.
Nesse caso, você decide.

Exemplo 2

Dá mesma forma que no Ie 6, as vezes no Ie 7 nosso layout fica quebrado, funcionando corretamente no ie6 (utilizando o hack acima) e demais Browsers mas não fica certo no Internet Explorer 7.

Isso acontece por que o Ie7 não reconhece o underline. E como faço para resolver o problema?

É simples, ao invés de utilizar o underline

_width:650px;

utilizamos o *. o nosso código ficaria da seguinte forma

*width:650px;

Lembrando sempre que o hack deve vir por último no elemento onde está sendo aplicado

Exemplo 3

Nesse exemplo, usarei um seletor que irá ser desconhecido de muitos. Não vou entrar em muitos detalhes. Sinta-se à vontade para pesquisar pela internet. Abaixo temos o seguinte seletor

div>p span { background-color:red; }

Agora preste atenção no código HTML:

Aqui vai o texto.

O seletor de css acima funciona assim:

Todo

que estiver dentro de um

p

que por sua vez seja diretamente filho de um

terá a cor de fundo vermelha.
Então, se tiver algum outro ?span?, dentro de um ?p?, mas que não esteja dentro de um ?div?, não terá o fundo vermelho.

O Internet Explorer simplesmente não reconhece este seletor, ele não sabe que isso existe, não sabe que faz parte do CSS. Portanto, ele ignora totalmente.

Então, se você quisesse fazer com que os spans tivessem uma cor de fundo diferente de vermelho no Internet Explorer, você faria assim:

span { background-color:blue; }  div>p span { background-color:red; }

O Ie, relevaria o primeiro código. Ele não reconhece o segundo seletor, logo ele ignora.

Interessante notar que ele reconhece um código que não existe e não reconhece outro que existe.

Todos os outros navegadores que tem uma melhor abordagem ao css, reconhece este seletor e não ignorará.
Uso muito esse hack porque ele não impede que seu CSS valide.

Aqui estão 2 Hacks para você usar abusar. Vai ao seu gosto escolher qual dos dois você usará.
O primeiro tem menos código, embora não valide. O segundo valida, mas usa mais linhas de código para ser feito.

Google Chrome Frame

Como a maioria já sabe o Internet explorer 6 é um pesadelo para quem desenvolve websites.
Quando pesamos que o site está pronto e vamos testar no IE6.. Lá se vão inúmeras horas para resolver todos os bugs. Mesmo sabendo alguns bugs do ie e procurando fazer tudo certo no desenvolvimento ainda assim temos que fazer mais ajustes ao final do projeto.

Conheço algumas empresas e alguns desenvolvedores que ignoram o IE6, desenvolvendo sites sem se preocupar com que tipo de navegador o visitante tem. Analisando relatórios de alguns clientes, verifiquei que 30% das visitas vem de pessoas com o Internet explorer 6, o que me obriga a ter suporte a esse navegador.

A boa notícia é que o Google lançou um plugin para resolver estes problemas, o Google Chrome Frame.

Para ativar o plugin do Google Chrome Frame, no Internet Explorer, os desenvolvedores devem adicionar a tag (abaixo) no código-fonte da página.

Quando o Google Chrome Frame, detecta a tag, ele o plugin altera automaticamente o motor de renderização para utilizar o WebKit do Google Chrome. Com este plugin, todos vão poder acessar os aplicativos web mais avançados e com uma ótima velocidade, através de qualquer versão do Internet Explorer.

Veja abaixo o Vídeo de lançamento do plugin e o Link para download.

Clique aqui para assistir o vídeo inserido.

Baixe o Google Chrome Frame

Você pode usar o Google Analytics para monitorar o tráfego do seu domínio Blogspot. Basta seguir estas etapas:

1. Faça login na sua conta do Blogger.
2. Selecione o blog que deseja monitorar e clique em “Configurações” nas opções de Gerenciar.
3. Selecione a guia “Modelo”.
4. Selecione a guia “Editar HTML”.
5. Role até o final do código.
6. Localize “</body>”, que geralmente aparece próximo ao fim do código no modelo.
7. Cole o código de monitoramento do Analytics acima da tag </body>.
8. Clique em “Salvar Modelo”.
9. Clique em Republicar para atualizar seu site ativo.

Para a nova versão da sua conta do Blogger, as etapas são um pouco diferentes:

1. Faça login na sua conta do Blogger.
2. Selecione o blog que deseja monitorar e clique em “Configurações” nas opções de Gerenciar.
3. Selecione a guia “Modelo”.
4. Clique em “Elementos de página”.
5. Clique em “Adicionar um elemento de página”.
6. Selecione a opção HTML/JavaScript na janela pop-up e clique em “Adicionar ao blog”.
7. Crie um nome (ou seja, Código de monitoramento do Google Analytics) para o campo Título na janela “Configurar HTML/JavaScript”. Cole o código de monitoramento do Analytics diretamente no campo Conteúdo.
8. Clique em “Salvar alterações” para concluir.

Após concluir as etapas acima, aguarde 24 horas para ver os dados na conta do Analytics.

Links patrocinados são anúncios pagos nos buscadores (Google, YAHOO, MSN).

Você já deve ter notado que ao pesquisar algum termo no google ao lado direito e acima alguns anúncios com a descrição links patrocinados são mostrados (ver figura abaixo). Estes anúncios aparecem de acordo com as palavras digitadas, no exemplo fiz a pesquisa por notebooks usados, onde algumas empresas “compraram” estas palavras chaves e quando alguém digitar Notebooks usados, irá aparecer seu anúncio.

No google o sistema de links patrocinados se chama GOOGLE ADWORDS, onde criamos campanhas diversas de acordo com o negócio do cliente.

Um grande diferencial de anunciar em links patrocinados é que seu anúncio só aparece para pessoas que estão pesquisando no google pelos produtos ou serviços que você comercializa. Além disso você só paga quando alguém clicar no seu anúncio, o que normalmente, significa alguém interessado nos seus produtos/serviços.

Além dos anúncios na busca do google, podemos anunciar na rede de conteúdo do google, composta por diversos sites tais como: Orkut, Youtube, Uol, Terra etc..

Estes anúncios na rede de conteúdo são direcionados de acordo com o segmento do seu negócio. Por exemplo, se você trabalha com artigos esportivos, selecionamos os sites cadastrados na rede de conteúdo referetes a este assunto, assim seu anúncio aparece apenas para pessoas interssadas em esportese possivelmente em artigos esportivos.

Os anúncios na rede de conteúdo podem ser gráficos, texto ou Vídeos. (Os anúncios para celular ainda estão em fase de testes, mas é uma ótima alternativa para o futuro. )

Um boa utilização para anúncios em rede de conteúdo é quando precisamos divulgar um produto ou alguma promoção, assim atingimos um maior número de pessoas e podemos fazer anúncios gráficos e de Video. Seria algo como criar um vídeo interessante sobre o produto ou promoção e segmentarmos na rede de conteúdo, e o melhor, você só paga quando o internauta clica no link após ver o vídeo, ou seja, o anúncio aparece, o internauta vê o vídeo e você só paga se ele clicar no link, caso o internauta somente assista ao vídeo você não paga nada.

Existem diversos cases de sucesso na internet utilizando o Adwords. Estes cases mostram campanhas com objetivos diferentes, alguns mostram o tráfego gerado para o site, outros o número de cadastros em determinados serviços, outros o resultado de uma campanha que começou na televisão e terminou na internet. No canal GoogleBrasil do youtube você pode ver estes exemplos.

Se quiser aparecer nestes anúncios faça um contato solicitando um orçamento. Com certeza é um ótimo investimento.

Por hoje é isso, espero que o texto tenha sido útil. Se tiver alguma sugestão, crítica ou queiram adicionar mais alguma informação enviem comentários.

abraço!!

Neste mesmo site vi a indicação de um livro GOOGLE MARKETING, que achei muito interessante.

O autor é Conrado Adolfo Vaz, um ex. professor de química que é apaixonado por internet.

Ainda não terminei minha leitura mas achei muito interessante o livro, seus tópicos e assuntos abordados, uma boa literatura.

Boa leitura..

O pessoal do google fez um artigo muito bom dizendo o que realmete interessa para eles. 

Neste artigo: Official Google Webmaster Central Blog eles mostram as meta tags que realmente interessam e as que eles não estão mais considerando na hora em que o Googlebot visita os sites.

O artigo está em inglês e é leitura recomendada para qualquer webdesign.

Abraço

Juliano Torriani

Para o pessoal, que  está estudando um pouco

sobre adwords, abaixo tem um link para os

seminários que o google está oferecendo.

Estes seminários são sempre as 15 horas e as quartas feiras.

http://www.google.com/events/brazilagency/

Outra dica para estudo é acompanhar a lista de discusão no google groups: http://groups.google.com/group/adwords-help-basics-pt_BR/

Até a próximo

Juliano Torriani

Este é o meu primeiro post. Neste blog irei relatar as minhas experiências no mundo da informática, além de publicar informações sobre tecnologia, principalmente de marketing digital.

Participem, mandem seus comentários, sugiram assuntos, abraço a todos

Juliano Torriani Lehugeur