Blog Web Standards | Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS em seu dia-a-dia - Parte 2
22 2012 março
Autor: g3 em HTML
Sempre utilizamos um estilo base para formulários quando trabalhamos com páginas de cadastro, login, etc. Consequentemente possuímos uma forma bem similar para escrever nossos códigos para formulários. Por isso com o passar do tempo fomos testando e incrementando nosso padrão para formulário. Tanto a parte de código HTML quando CSS.
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 -->
<!-- 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> -->
<!-- fecha #instrucoes_formulario -->
<li class="erro">
<label for="nome">* Nome</label> <input type="text" name="nome" id="nome" /> <em>Apenas letras</em>
<label for="senha">* Senha</label>
<em>Ex.: Asd@123</em>
<label for="email">* E-mail</label>
<em>exemplo@exemplo.com</em>
<em>(xx) xxxx-xxxx</em>
<!-- input[type=date] é suportado apenas no Opera -->
<input type="date" name="data" id="data" />
<em>yyyy-mm-dd</em>
<label for="site">Site</label>
<input type="url" name="site" id="site" value="http://www.exemplo.com/" />
<em>http://www.exemplo.com/</em>
<label>Números</label>
<input type="number" name="campo_numero" id="campo_numero" />
<em>Use apenas números</em>
<!-- <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 -->
<label title="Selecionar opção a"><input type="radio" name="#" /> Opção a</label>
<label title="Selecionar opção b"><input type="radio" name="#" /> Opção b</label>
<label title="Selecionar opção c"><input type="radio" name="#" /> Opção c</label>
<em>Mensagem de teste</em>
<!-- <ol> listagem de campos que fazem parte do fluxo de preenchimento -->
<label for="campo_selecao">Campo seleção</label>
<select name="campo_selecao" id="campo_selecao">
<p class="erro">Selecione algum xxxxx</p>
<label for="campo_exemplo1">Campo exemplo 1</label>
<input type="text" name="campo_exemplo1" id="campo_exemplo1" />
<p class="erro">Mensagem de erro</p>
<em>Ex. vários campos na mesma linha.</em>
<textarea rows="3" cols="30" name="mensagem" id="mensagem"></textarea>
<em>Mensagem de ajuda</em>
<li class="confirmacao">
<label for="confirmar" title="Confirmar XXXXX"><input type="checkbox" name="confirmar" id="confirmar" /> Exemplo de campo de confirmação.</label>
<button type="submit">Botão de enviar</button>
<!-- 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.
Tags: HTML, html5, padrão
18 2010 novembro
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:
<!--[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]-->
<link href="humans.txt" rel="author" />
<script src="js/modernizr.custom.83845.js"></script>
<body id="inicial">
<!-- abre .limites -->
<!-- abre .topo -->
<!-- fecha .topo -->
<!-- abre .conteudo -->
<!-- fecha .conteudo -->
<!-- abre .rodape -->
<!-- fecha .rodape -->
<!-- fecha .limites -->
<!-- abre scripts finais, visando a melhor performance do site -->
<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 -->
13 2010 agosto
Autor: linke em CSS, Hacks, HTML
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.
Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.
<!-- abre listagem -->
<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>
<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>
<img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
<p>Obra em Aquarela</p>
<!-- fecha listagem -->
#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; }
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.
Tags: horizontal, listagem itens
16 2009 outubro
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.
Ú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.
Tags: atributos, HTML, padrão
20 2009 julho
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!