Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

18 2009 fevereiro

Hack para Safari e Google Chrome

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Fugindo um pouco de soluções específicas para o IE6 (já estava ficando cansativo!) vamos mostrar como fazer um hack específico para o navegador Safari e Google Chrome.

Sim, nós sabemos que usar hacks é “feio”, mas estamos aqui para apresentar soluções e, caso essa seja sua última opção, use!

Como os dois browsers utilizam a mesma engine de renderização, a Webkit, este hack acaba servindo para os dois navegadores:

body:nth-of-type(1) elemento { propriedade: valor; }

—–

* Update: Post atualizado, pois o hack antigo era interpretado pelo o IE7 também. Este novo método funciona somente para os navegadores Google Chrome e Safari.

* Update: Solução nos comentários, alguns usuários comentaram a mesma solução, conforme a necessidade verifique esses comentários, pois raramente fazemos ajuste apenas no chrome.

17 2009 fevereiro

Rodapé fixo

Autor: g3 em CSS

Última modificação: 22 outubro 2009

O post seguinte ensina como fazer um rodapé fixo no fim da página independente do conteúdo.

Primeiro passo é escrever um XHTML na seguinte estrutura:

...
<body>
<div id="limites">
<div id="conteudo" class="contemfloat">
<div id="coluna1">
Coluna 1
</div>
<div id="coluna2">
Coluna 2
</div>
</div>
<div id="rodape">
Rodapé
</div>
</div>
</body>
...

A div#rodape tem que estar no mesmo nível que a div#conteudo dentro da div#limites.

|-----------------------------------|
| body                              |
|                                   |
| |-------------------------------| |
| |                               | |
| | limites                       | |
| |                               | |
| |  |-------------------------|  | |
| |  |                         |  | |
| |  | conteudo                |  | |
| |  |                         |  | |
| |  |  |-------------------|  |  | |
| |  |  | coluna1           |  |  | |
| |  |  |-------------------|  |  | |
| |  |  | coluna2           |  |  | |
| |  |  |-------------------|  |  | |
| |  |                         |  | |
| |  |-------------------------|  | |
| |                               | |
| |  |-------------------------|  | |
| |  | rodape                  |  | |
| |  |-------------------------|  | |
| |                               | |
| |-------------------------------| |

Feito o XHTML escreva os seguintes estilos(CSS):

* { margin: 0; padding: 0; z-index: 1; }
html, body { height: 100%; }

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

#limites { position: relative; width: 600px; min-height: 100%; margin: 0 auto; background-color: #eee; }
* html #limites { height: 100%; }

#conteudo { padding-bottom: 80px; border-bottom: 1px solid red; }

#coluna1 { float: left; width: 400px; background-color: #ecc; }
#coluna2 { width: 200px; margin-left: 400px; background-color: gray; }

#rodape { position: absolute; bottom: 0; left: 0; width: 600px; height: 50px; padding-top: 10px; background-color: #cce; text-align: center; }

No html, body e div#limites precisam ter altura 100%. No caso da div#limites coloque altura mínima (min-height) 100%, mas como essa propriedade não renderiza no Internet Explorer 6 é preciso adicionar uma linha apenas para o IE6 com altura (height) 100%, isso funciona porque o IE6 não respeita uma altura definida caso o conteúdo do elemento ultrapasse essa altura.

Atenção, A div#limites tem posição relativa para possibilitar a div#rodape ficar sempre na base da div#limites em posição absoluta.

No XHTML foi inserido a classe “contemfloat” na div#conteudo porque dentro dela contém elemento com float.

No CSS a div#conteudo deve ter valor no padding-bottom igual ou maior que a altura da div#rodape, isso é feito para a div#rodape não ficar por cima da div#conteudo.

No exemplo a div#conteudo está com uma borda vermelha para mostrar o espaço do padding-bottom entre o conteúdo até a borda.

Veja o exemplo.

17 2009 fevereiro

Hack para Internet Explorer 6

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Já que estamos entrando no mundo “obscuro” dos hacks, iremos comentar sobre o caso específico do IE6, o qual temos que passar tantas vezes!

Ao adicionar esta linha em seu CSS, ela será interpretada somente pelo IE6:

* html { propriedade: valor; }

Particularmente preferimos adotar essa prática ao invés de um conditional comment para o IE6, para evitar de termos diversos CSS específicos para cada navegador. Portanto só usamos o CSS para IE7 caso seja extremamente necessário.

Além do mais, este hack é válido ao contrário de outras opções que encontramos em outros exemplos.

* Update: Classe no html. Como usamos html5, colocamos na tag html por conditional comments uma classe relativa ao navegador Internet Explorer.

Última modificação: 31 maio 2011

Uma boa maneira de fugirmos dos hacks é usar os conditional comments.

Por padrão, utilizamos este para o Internet Explorer 7, para evitarmos utilizar hack específico para este navegador:

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/estilo_ie7.css" media="screen" /><![endif]-->

Se quisermos fazer um CSS específico para o IE6, basta trocar o conditional comment:

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

Caso queira algum outro tipo específico, segue abaixo uma listagem de várias possibilidades:

<!--[if IE]>
De acordo com o conditional comment, este código é para  Internet Explorer
<![endif]-->
<!--[if IE 5]>
De acordo com o conditional comment, este código é para  Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
De acordo com o conditional comment, este código é para  Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
De acordo com o conditional comment, este código é para  Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
De acordo com o conditional comment, este código é para  Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
De acordo com o conditional comment, este código é para  Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
De acordo com o conditional comment, este código é para  Internet Explorer 5 e mais novos
<![endif]-->
<!--[if lt IE 6]>
De acordo com o conditional comment, este código é para  Internet Explorer mais antigo que 6
<![endif]-->
<!--[if lte IE 5.5]>
De acordo com o conditional comment, este código é para  Internet Explorer mais antigo ou igual a 5.5
<![endif]-->
<!--[if gt IE 6]>
De acordo com o conditional comment, este código é para  Internet Explorer mais novo que 6
<![endif]-->

Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.

Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.

Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:

– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:

body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

Última modificação: 26 março 2009

Para usar o atributo target="_blank" para que links abram em uma nova janela sem usar window.open() e ainda ter seu XHTML Strict válido, basta incluir o seguinte trecho de código no cabeçalho da sua página:

window.onload = function() {
  var links = document.links;
  for (var i = 0, s = links.length; i < s; i++) {
    if (links[i].rel == 'external') {
      links[i].target = '_blank';
    }
  }
};

Usando jQuery, o trecho de código que deve ser incluído é bem menor:

$(document).ready(function() {
  $('a[rel=external]').attr('target', '_blank');
});

Após usar este script, basta incluir o atributo rel="external" em seus links para que estes abram em nova janela:

&amp;amp;lt;a href=&amp;amp;quot;http://www.webstandards.blog.br/&amp;amp;quot; title=&amp;amp;quot;Melhor blog sobre Web Standards&amp;amp;quot; rel=&amp;amp;quot;external&amp;amp;quot;&amp;amp;gt;Blog Web Standards&amp;amp;lt;/a&amp;amp;gt;

Obs: este script foi escrito por Gustavo Straube.

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.

Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.

Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:

overflow: hidden;

* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.