Blog Web Standards

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

Última modificação: 31 maio 2011

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

Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

Última modificação: 31 maio 2011

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

Quer saber como inserir vídeos do YouTube em seu site, mantendo seu código validado? Veja abaixo o código para fazer isso de maneira simples:

<!--[if !IE]> -->
              <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/id-do-video" width="425" height="344">
            <!-- <![endif]-->
            <!--[if IE]>
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="425" height="344">
              <param name="movie" value="http://www.youtube.com/v/id-do-video" />
              <!--><!--dgx-->
              <param name="loop" value="true" />
              <param name="menu" value="false" />
              <p>Seu navegador não suporta o vídeo.</p>
              </object>
<!-- <![endif]-->

Bom, como pode-se perceber, é só substituir o “id-do-video” pelo próprio id do vídeo, localizado na URL do mesmo. Simples, não é? 🙂

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

Fugindo um pouco do nosso foco, vamos mostrar a vocês nosso mascote: Firefox. Nada mais justo não é?

Vindo diretamente da Mozilla, este querido “panda avermelhado” veio alegrar nosso ambiente de trabalho 😉

Ah, e pra arrematar também encomendamos um pôster… Assim a gente sensabiliza sensibiliza qualquer um que ainda se atreva a usar Internet Explorer!

Poster Firefox

Quer saber alguma maneira de testar seu site no Internet Explorer 6, 7 e 8?

A melhor opção que encontramos atualmente é o IETester, aplicativo que já utilizamos há algum tempo. Seu maior trunfo é a opção de abrir todas estas versões do IE, cada uma em uma aba distinta, deixando seu trabalho de revisão muito mais fácil. O único porém é que você precisa do IE7 original para que funcione corretamente no programa.

Além desta opção temos o Multiple IE, que oferece um instalador para cada versão do Internet Explorer, ferramenta que também já foi muito utilizada em nossa equipe.

Além dessas opções, há alguns sites que geram imagens da sua página, uma para cada browser. O melhor exemplo é o Browsershots, mas é uma opção que não se compara aos softwares citados anteriormente.

Para finalizar, outra opção promissora é o Xenocode Browser Sandbox, que permite visualizar o site em diversos browsers, não se prendendo somente ao IE. Na teoria é algo muito bonito, mas na prática se mostrou bem lento… Talvez com o tempo o serviço melhore e mostre mais viável para o trabalho do dia-a-dia.

Muitos desenvolvedores iniciantes vem nos perguntar maneiras de diminuir o peso dos seus sites. O primeiro passo, com certeza, é fazer um código limpo, semantico, seguindo os princípios dos Web Standards.

Mas há casos, como em grandes portais, que necessitamos dimiuir o carregamento do site ao máximo e uma boa alternativa para isso é a técnica CSS sprites.

Como funciona o CSS sprites?

O princípio é o seguinte: se você utiliza diversos ícones em seu site, ao invés de salvar cada ícone separadamente, pode unir todos em um só arquivo, como no exemplo abaixo:

Exemplo de imagem com diversos ícones, para CSS sprites

Créditos: famfamfam.com

Para usar cada ícone específico, deve-se criar uma classe para o elemento desejado (um link, por exemplo) que use esta imagem como background deslocando seu posicionamento conforme desejado.

Por exemplo, caso seja necessário usar o ícone do Flash, é só fazer o seguinte HTML:

<a class="flash" href="#" title="Flash">Flash</a>

O CSS neste caso é bem tranquilo de fazer necessitando, somente, mudar a posição do fundo:

.voltar, .avancar, .flash { background-image: url(icones.png); background-repeat: no-repeat; }
.flash { background-position: -209px 0; }

A primeira linha é só um exemplo das várias classes criadas para os ícones distintos, definindo a imagem e a repetição de fundo, enquanto a classe específica (segunda linha) só define o posicionamento do mesmo.

Mas por que este método deixa meu site mais leve?

A resposta para esta pergunta é muito simples. Ao invés do usuário carregar imagem por imagem, ele carrega todas de uma vez, fazendo apenas uma requisição para o servidor, o que torna todo o processo mair rápido. Além disso, quando carregada, a imagem exibirá todos os ícones do site de uma só vez, proporcionando uma melhor navegação aos usuários.

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

Porque utilizar botões expansíveis:

  • Reduz número de arquivos;
  • Reduz arquivos a serem baixados pelo usuário;
  • Carregamento da página mais rápido;
  • Reduz classes no HTML / linhas de CSS;
  • Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Botão expansível CSS

Convencido disto, aprenda como fazer:

  1. Criar a imagem do botão:
  2. Dividir a imagem em 2 partes:
    • O botão será formado por duas peças: o lado esquerdo, e o direito.
    • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

      Botão expansível CSS - Passo 1

      Botão expansível CSS - Passo 1

      Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

    • Selecione o lado direito
    • Abra um novo arquivo (só para ele) Criando a imagem do lado direito
    • Coloque a borda de um lado da imagem (cole no canto direito)
    • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
    • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
      Photoshop Redimensionamento

      Photoshop Redimensionamento

    • Salve como: botao_direito.png
  3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

          <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
        

    – Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

  4. Código CSS*:

          .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
          .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
        

Quem usa os botões expansíveis (HTML + CSS)?

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS

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]-->