Blog Web Standards

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

07 2011 outubro

Google Chrome Frame

Autor: g3 em Ferramenta

Última modificação: 13 junho 2012

Chrome Frame

O Google Chrome Frame possui uma proposta de simplesmente “substituir” o motor de renderização do Internet Explorer, habilitando praticamente todos os recursos que estariam disponíveis no navegador Google Chrome.

É como um Plugin que pode ser instalado mesmo por usuários que não possuam permissões de Administrador no Sistema Operacional, funcionando de forma oculta sem mudar a forma de navegar que o usuário já esta acostumado.

Disponível somente para Internet Explorer a partir da versão 6 em Windows a partir da versão XP.

Implementando Chrome Frame

Para ativar o Chrome Frame ao renderizar uma página basta incluir a meta abaixo dentro da tag head.

  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

Além do código para ativar o Chrome Frame incluímos a informação para forçar o Internet Explorer a renderizar com a sua última versão (IE=Edge).

Incluíndo aviso de instalação

Coloque o código abaixo antes de fechar a tag body.

<!--[if lt IE 8]>
  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
  <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

Definimos com conditional comments que ao carregar a página, será apresentado o aviso de instalação apenas aos usuários de Internet Explorer 7 e versões anteriores.

Veja nosso Documento base para HTML, nele utilizamos esse recurso. Devido a mensagem default de instalação do Chrome Frame ser muito invasiva, fizemos uma versão customizada. Faça download do Framework padrão e teste o código em versão inferior ao Internet Explorer 7 para visualizar a nossa customizacao.

Mais sobre Chrome Frame:

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!

03 2010 dezembro

Unidade de medida – em

Autor: g3 em CSS

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:

Elemento Cálculo para restaurar o valor em pixel. Valor na unidade “px” Cálculo para mudar pixel para “em”. Valor na unidade “em”
h1 1.45(em) * 11(px) 16px 16(px) / 11(px) 1.45em
p 1.1(em) * 11(px) 12px 12(px) / 11(px) 1.1em
strong 1.16(em) * 12(px) 14px 14(px) / 12(px) 1.16em

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:

18 2010 novembro

Documento base para HTML

Autor: Carlitos em HTML, Web Standards

Última modificação: 13 junho 2012

Aqueles que acompanham o Blog Web Standards, sabem que já temos o Documento base para XHTML, que serve como o primeiro passo para qualquer projeto, inserindo meta tags e a estrutura necessária para iniciar um XHTML 1.1 Strict.

Agora, com a demanda cada vez maior pelo HTML5, estamos atualizando o Documento base para HTML5:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <link href="humans.txt" rel="author" />
  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->
  <script src="js/modernizr.custom.83845.js"></script>
</head>
<body id="inicial">

<!-- abre .limites -->
<div class="limites">

<!-- abre .topo -->
  <header class="topo">
    
  </header>
<!-- fecha .topo -->

<!-- abre .conteudo -->
  <div class="conteudo">
    
  </div>
<!-- fecha .conteudo -->

<!-- abre .rodape -->
  <footer class="rodape">
    
  </footer>
<!-- fecha .rodape -->

</div>
<!-- fecha .limites -->

<!-- abre scripts finais, visando a melhor performance do site -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js">\x3C/script>')</script>
<script src="js/swfobject.js"></script>
<script src="js/funcionalidades.js"></script>
<!--[if lt IE 8]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><![endif]-->
<!-- fecha scripts finais -->

</body>
</html>

Scripts usados

Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.

Última modificação: 12 abril 2011

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

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

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.

Última modificação: 31 maio 2011

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…

Sabe aquele bug que você encontra em situações específicas e pede ajuda pra alguém e, um tempo depois, acaba esquecendo a solução?

Pensando nisso, criamos o Histórico de Bugs, um repositório que lista diversos tipos de erros e suas respectivas soluções. Você pode contribuir colocando seu comentário, aprimorando a solução, ou até enviar um novo bug (com sua solução, é claro!) através de nosso formulário de contato.

O objetivo, como sempre, é fazermos algo simples e direto.

15 2009 outubro

Ordem dos atributos HTML

Autor: g3 em HTML

Última modificação: 16 outubro 2009

Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

Além de termos inaugurado nosso tema personalizado para o Blog Web Standards, vocês podem nos seguir no Twitter e acompanhar nossas últimas atualizações na caixa lateral do site.

Gostaríamos de agradecer os elogios que temos recebido e vários links, tudo isso pois temos o objetivo de ajudar os desenvolvedores a encontrar a solução de seus problemas!

Última modificação: 31 março 2010

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.

Template email marketing. 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.