CSS

Pensando em deixar o desenvolvimento de códigos mais prático, publicamos nosso Repositório de Snippets, lugar onde colocaremos trechos de código modulares que usamos comumente em nossos projetos.

Obviamente deixamos aberto a todos e, por isso, deixamos espaço aberto a sugestões, tanto para melhoria dos códigos, como outros snippets a serem implementados.

Além disso, disponibilizamos o download dos snippets em formato de Clips para o editor Coda (Mac OS), assim os códigos podem ser utilizados de maneira mais prática!

Por questões de compatibilidade entre os navegadores, nós adotamos como padrão a unidade de medida “em”, principalmente para definição do tamanho das fontes.

“em” é uma medida relativa, isso quer dizer que ela pega como base um valor de referência anteriormente definido.

Exemplo

Coloque em um arquivo html, as seguintes marcações:

Dentro do body:

<div id="conteudo">
  <h1>Olá, aqui é o título</h1>
  <p>E aqui é um <strong>paragráfo</strong>.</p>
</div>

Defina o css abaixo para o html de cima:

html { font-size: 100%; }
body { font-size: .68em; }

#conteudo h1 { font-size: 1.45em; }
#conteudo p { font-size: 1.1em; }
#conteudo p strong { font-size: 1.16em; }

Explicação

1. html “100%”. Isso atribuí ao html o tamanho da fonte padrão dos navegadores, que é 16px.
2. body “.68em”. Como o tamanho da fonte padrão dos navegadores é 16px, pegamos 11px que é o valor que queremos e dividimos por 16px. Com isso chegamos no valor “0.68″.

Cálculo feito: 11/16 = 0.68

A idéia é que 11px é igual a 0.68em de 16px.

Em outros casos será da mesma forma, pegamos o valor que queremos e dividimos pelo valor de referência que foi definido anteriormente.

Na tabela abaixo estão os dados sobre as medidas dos elementos h1, p e strong.

Para compreender melhor esses valores definidos, veja a tabela:

O valor do strong é dividido por 12 porque ele pega o valor do elemento de referência dele, que é o parágrafo e que tem 12px de tamanho da fonte.

Então temos uma fórmula para conversão de “px” para “em” que é:

(valor a ser convertido) / (valor de referência) = (valor que desejamos)

Usando essa medida conseguimos a compatibilidade desejada entre os navegadores.

Veja mais conteúdo sobre unidades de medida usadas no css:

• Unidades de medida de comprimento CSS – Maujor
• Font size: the ‘font-size’ property

Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

• Todos itens da linha se adaptam ao tamanho do maior;
• Sem float: sem preoupações com clear, contemfloat, etc;
• Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

• Hack para IE6;
• Hack/script para IE7;

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  <!-- abre listagem -->
    <ul>
      <li>
        <img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />
        <p>Quadro em Aquarela 60x60px. Pode ser comprado em até <strong>6x no cartão</strong> ou à vista com desconto de <strong>50%</strong> - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />
        <p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
        <p>Obra em Aquarela</p>
      </li>
    </ul>
    <!-- fecha listagem -->

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }

• Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
• Todos itens se alinham ao topo
• Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.

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

Com os recursos que temos atualmente, podemos fazer cantos arredondados diretamente pelo CSS para os browsers Firefox e Safari, graças a propriedades exclusivas de suas engines.

O CSS3 promete unificar tudo isso introduzindo a propriedade border-radius mas, até o momento, a melhor opção que temos é o DD_roundies, um script que possibilita fazermos bordas arredondadas sem imagens para os browsers mais populares: Internet Explorer 6, 7 e 8 além de Firefox e Safari (Google Chrome).
Continuar lendo…

Sei que email marketing não tem muita ligação com Web Standards, mas todo mundo precisa saber que já existem projetos relacionados e também serve como um guia para produzir esse tipo de material.

Quais são os limites do email marketing utilizando HTML? O que podemos colocar de CSS também, levando em conta algo que funcione nos programas desktops e também nos webservices?

CSS

Pode ser utilizada a tag “style” no head ou no body (só não funciona no AOL MAC, Note 6, Gmail e Hotmail). Mas como no GMail isso não funciona, a dica é usar style inline. Como o Notes 6 tem um suporte mínimo, não levei ele em conta ok?

Propriedades CSS válidas para todos*:

• Background-color:
• Border;
• Border-collapse;
• Color;
• Display, Float e Height(só não funciona no Outlook 07);
• Font-family (não funciona no Gmail);
• Font-size;
• Font-style;
• Font-weight;
• Line height;
• Table-layout;
• Text-align;
• Text-decoration;
• Text-indent;
• Text-transform;
• Letter-spacing;
• Padding;

* Todos testados (Yahoo antigo/novo, Gmail antigo/novo, Live Mail, Hotmail, AOL Web, MobileMe.) / (Outlook (2003 e 07), Windows Mail, Mac Mail, Entourage (2004, 2008), Thunder-bird 2, AOL (9, 10), Mac).

Existem pessoas focadas nos webstandards para os emails: os chamados e-mail standards. Eles mostram screenshots de cada browser como resultados de seus testes, além de dizer o que falta para cada Email Client ficar show para suportar os standars. Ex.: Para o Google Mail ainda é necessário suportar o CSS no header, e não utilizar mais a técnica inline.

Estrutura HTML / CSS

Resumindo: Como construir um e-mail marketing utilizando pelo menos um pouco de webstandards?

• A estrutura deve ser em tabelas;
• Utilizar as propriedades que todos os emails clients aceitem (ou pelo menos a maioria deles);
• CSS inline (apesar de não ser standard, é o que podemos usar);
• Layout com largura fixa até 580px e a altura pode ser variável (dependendo do layout).
• Mesmo com todos os cuidados, é possível que o usuário veja a mensagem desconfigurada. Por isso um link do tipo “se você está vendo o email desconfigurado, acesse a outra versão.”

HTML: tags que devemos evitar

Tags HTML que não devem ser utilizadas, por não serem suportadas por muitos clientes de email: (segundo um HTML Email Guide que li).

• DOCTYPE
• HTML tag
• BODY tag
• Meta tags
• Head tag
• Base tag
• Link tag
• Script tag
• Title tag
• Applet tag
• Frameset tag
• Frame tag
• IFrame tag
• Comments

Template de E-mail Marketing HTML, utilizando o que falei nesse post. *No topo a mensagem para visualizar o outro formato do email, evitei usar o “clique aqui” por ser termos que são buscados para codificar como Spam.

. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.

Se você tem dúvidas em quais clientes testar, pode dar preferência aos clientes que mais cresceram em 2009: iPhone, Apple Mail, Hotmail e Gmail – (fonte).

Link relacionado/fonte: Campaing Monitor.

A forma seguinte de alinhamento vertical e horizontal é uma combinação de:

• Posicionamento absoluto
• Margens negativas

Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:

  <div id="limites">
    <div id="conteudo">
      <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
      <p>Olá mundo!</p>
    </div>
  </div>

Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.

Como padrão de documento base para CSS coloque o seguinte reset:

  * { margin: 0; padding: 0; z-index: 1; }

E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:

  #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }

Isso vai fazer que a div#limites tenha os seguintes estilos:

• posição absoluta
• canto superior esquerdo a uma distância igual a 50% do tamanho da tela
• largura e altura
• fundo cinza.

Com isso o resultado será meio estranho visualmente, mas esta tudo ok.

Veja ampliado

Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.

Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).

Veja ampliada

Com isso é possível posicionar a div#limites exatamente no meio da tela.

Veja ampliada

Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.

Outros exemplos e links interessantes

• Exemplo de alinhamento horizontal e vertical relativo a um elemento
• Posicionamento relativo
• Alinhamento horizontal e vertical

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:

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.

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).

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

     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)
   • 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

   • 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)?

• Construtora Tecnisa: ex.: botão de busca no topo.
• Porto Seguro: os botões verdes no meio do conteúdo.

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

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.

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.