Atualizamos o post do Documento base para CSS. Agora no arquivo “geral.css” contém os estilos necessários para estilizar um formulário default.

Abaixo está nosso HTML pré-definido para formulário:

<!-- abre form -->
<form action="#" method="post">
  <fieldset>

    <!-- abre #instrucoes_formulario -->
    <aside id="instrucoes_formulario">
      <p class="erro">Verifique os campos com asterisco e destaque vermelho.</p>
      <!-- <p>Preencha os campos obrigatórios (*).</p> -->
    </aside>
    <!-- fecha #instrucoes_formulario -->

    <ol>
      <li class="erro">
        <label for="nome">* Nome</label> <input type="text" name="nome" id="nome" /> <em>Apenas letras</em>
      </li>
      <li class="erro">
        <label for="senha">* Senha</label>
        <input type="password" name="senha" id="senha" />
        <em>Ex.: Asd@123</em>
      </li>
      <li>
        <label for="email">* E-mail</label>
        <input type="email" name="email" id="email" />
        <em>exemplo@exemplo.com</em>
      </li>
      <li class="erro">
        <label for="telefone">Telefone</label>
        <input type="tel" name="telefone" id="telefone" />
        <em>(xx) xxxx-xxxx</em>
      </li>
      <!-- input[type=date] é suportado apenas no Opera -->
      <!--
      <li>
        <label for="data">Data</label>
        <input type="date" name="data" id="data" />
        <em>yyyy-mm-dd</em>
      </li>
      -->
      <li>
        <label for="site">Site</label>
        <input type="url" name="site" id="site" value="http://www.exemplo.com/" />
        <em>http://www.exemplo.com/</em>
      </li>
      <li>
        <label>Números</label>
        <input type="number" name="campo_numero" id="campo_numero" />
        <em>Use apenas números</em>
      </li>
      <li>
        <!-- <p> parágrafo com title servindo como label dos campos da listagem a seguir -->
        <p title="Escolha alguma das opções XXXX">Opções</p>
        <!-- <ul> listagem de campos à parte do fluxo de preenchimento -->
        <ul>
          <li>
            <label title="Selecionar opção a"><input type="radio" name="#" /> Opção a</label>
          </li>
          <li>
            <label title="Selecionar opção b"><input type="radio" name="#" /> Opção b</label>
          </li>
          <li>
            <label title="Selecionar opção c"><input type="radio" name="#" /> Opção c</label>
          </li>
        </ul>
        <em>Mensagem de teste</em>
      </li>
      <li>
        <!-- <ol> listagem de campos que fazem parte do fluxo de preenchimento -->
        <ol>
          <li class="erro">
            <label for="campo_selecao">Campo seleção</label>
            <select name="campo_selecao" id="campo_selecao">
              <option>Selecione</option>
            </select>
            <p class="erro">Selecione algum xxxxx</p>
          </li>
          <li class="erro">
            <label for="campo_exemplo1">Campo exemplo 1</label>
            <input type="text" name="campo_exemplo1" id="campo_exemplo1" />
            <p class="erro">Mensagem de erro</p>
          </li>
        </ol>
        <em>Ex. vários campos na mesma linha.</em>
      </li>
      <li>
        <label for="mensagem">Mensagem</label>
        <textarea rows="3" cols="30" name="mensagem" id="mensagem"></textarea>
        <em>Mensagem de ajuda</em>
      </li>
      <li class="confirmacao">
        <label for="confirmar" title="Confirmar XXXXX"><input type="checkbox" name="confirmar" id="confirmar" /> Exemplo de campo de confirmação.</label>
      </li>
    </ol>
    <button type="submit">Botão de enviar</button>
  </fieldset>
</form>
<!-- fecha form -->

Este é um padrão que prevê várias possibilidades para formulários, portanto remova e inclua conforme sua necessidade os códigos HTML e CSS. Sempre fazemos esse procedimento no início de cada projeto.

Veja o exemplo do HTML para formulários implementado em nosso framework.

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:

• Chrome Frame: Developer Guide
• HTML5 Boilerplate

Procuramos formas para resetar essa novidade (seta abre e fecha) e chegamos a alguns códigos para esse HTML:

<details open>
  <summary>Blog Web Standards</summary>
  <aside>Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia.</aside>
</details>

Reset CSS

details summary::-webkit-details-marker { display: none; }

Inclua no CSS essa linha conforme o seus estilos.

Reset do comportamento (abre e fecha)

A princípio desabilitamos com javascript, então escolha alguma das duas opções que desejar, com jQuery ou apenas com javascript sem jQuery.

Com jQuery

$(document).ready(function(){
  $('details summary').click(function(){
    return false;
  });
});

Sem jQuery

window.onload = function() {
	var summary = document.getElementsByTagName("summary");
  for (var i = 0; i < summary.length; i++) {
  	summary[i].onclick = function () {
    	return false;
  	}
  }
};

Inclua um desses trechos de javascript em seu código confome desejar.

Alguma dúvida, sugestão, melhoras ou outras formas de resolver estamos a disposição

Layout do botão:

HTML:

<button class="botao" type="submit"><strong>Logar</strong></button>

CSS:

.botao,
.botao strong { display: inline-block; height: 27px; border: 0; background: url(../imagens/botao-marrom.png) no-repeat; line-height: 27px; text-shadow: rgba(72,25,24,.41) 1px 1px 0; color: #fff; }
.botao { padding-left: 12px; }
.botao strong { padding-right: 12px; background-position: right -27px; }

Nesse caso, a imagem de fundo do botão é o png “botao-marrom.png”:

Veja como o Firefox renderiza:

Para ajustar o bug, inclua o seguinte código no css:

button.botao::-moz-focus-inner { border: 0; padding: 0; }

Fonte da solução: a head creative

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!

“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

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.css?v=1" rel="stylesheet" />
  <link href="css/mobile.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->
  <script src="js/modernizr.custom.48282.js"></script>
</head>
<body id="inicial">

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

<!-- abre #topo -->
  <header id="topo">

  </header>
<!-- fecha #topo -->

<!-- abre #conteudo -->
  <div id="conteudo">

  </div>
<!-- fecha #conteudo -->

<!-- abre #rodape -->
  <footer id="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.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.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

• selectivizr
• Modernizr
• jQuery
• SWFObject
• Google Chrome Frame

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

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.

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

Explicação

Faça download do script DD_roundies e coloque o arquivo junto com o HTML. Caso o arquivo baixado esteja na mesma pasta que o arquivo HTML inclua esse js em seu HTML dentro da tag head:

...
<head>
  <title>Exemplo</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
</head>
...

Agora para colocarmos canto arredondado em algum elemento siga o exemplo.

Coloque dentro da tag body uma div:

...
<body>
  <div>Meu exemplo de canto arredondado</div>
</body>
...

Logo abaixo do código que colocou antes no head, inclua também o código para fazer os cantos arredondados que desejar e um CSS para que veja o que fez:

...
<head>
  <title>Exemplo</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
  <script type="text/javascript">
    DD_roundies.addRule('div', '10px', true);
  </script>

  <style type="text/css">
    div { border: 1px solid red; }
  </style>
</head>
...

Esse código que colocou é apenas para fazer os cantos arredondados em qualquer div com um raio de 10 pixel e funcionar em todos navegados (true). Quando for usar em seu dia-a-dia mude conforme a necessidade, por exemplo:

...
DD_roundies.addRule('div.conteudo ol li', '20px', true);
...

ou assim, com cantos diferentes:

...
DD_roundies.addRule('div.topo .busca form', '20px 0 0 20px', true);
...

Essa ordem usada para deixar os cantos diferentes é a seguinte: Top-Left, Top-Right, Bottom-Left e Bottom-Right.

Veja o exemplo de pronto com cantos arredondados. Caso tenha uma dúvida, comente!

O interessante de usar essa técnica para todos os browsers (incluindo Firefox e Safari) é que mantemos nosso CSS limpo e sua aplicação mostrou-se muito eficaz, já que não se faz mais necessário o uso de imagens para fazer os cantos arredondados.

O único porém que percebi até o momento é no uso das bordas arredondadas para Internet Explorer 8, não mostrando a propriedade background-image caso utilizada.

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.